Add custom checkbox on UITableViewCell or UITableView in swift
Steps to create or add custom checkbox on UITableViewCell or UITableView
Step 2: Open “Main.storyboard” file and drag UITableView object on to the view. Then we will add constraints to UITableView so that it fits to our screen size. Please follow the steps as shown in the below picture
Creating custom UITableViewCell (prototype cell)
Step 4: Select UITableViewCell and select option “Size inspector” (option will be on right hand side of your screen) change the height to 100.0 and background color to yellow. Color can be changed from “Attribute inspector”. Next, change the UITableView Row height to 100.0 also. Finally, change UITableViewCell identifer ro “CheckBoxCell”
Step 6: Drag UILable and UIButton (this UIButton will act as checkbox for our cell in UITableview) to content view of UITableViewCell. Add constraints to both object
- UILable constraint: (Top = 0, Bottom = 0, Leading = 10, Trailing = 10 w.r.t. UIButton)
- UIButton constraint: (Trailing = 10, height = 50, width = 50, align center Y to superview)
Adding Image for checkbox
Step 7: Add images to your project. Download images from Archive-CheckBoximages.zip. Change UIButton type to custom and remove title. Set images to UIButton as follows
- Default state – set image Checkmarkempty
- Selected state – set image Checkmark
You can change state of UIButton by changing “State config” property in attribute inspector.
Step 8: Set tag for UILable = 1 and for UIButton = 2. You will find this property under attribute inspector too.
Step 9: Open ViewController.swift. Here we will create IBOutlet for UITableView first and connect it with UITableView in “Main.storyboard”. Then we will write down UITableViewDatasource methods for our UITableView. Below is the complete code for ViewController.swift file
In the selector, we set sender selected property to the opposite of its current elected property. In more clear word, if UIButton has state not selected (state other than selected state) then we make it selected and vice-versa.
Save state of checked checkBox in UITableView
In order to retain selected checkBox. First we will create an array named “selectedRows“. Our array will be of type IndexPath as we will store checked row indexPath. Next, inside our cellForRow datasource, we will check if “selectedRows” contains current row indexPath then we made our checkbox button as selected otherwise made it un-selected. Finally, on checkbox button selector, first we get rows indexpath whose button is touched since we used prototype cell and therefore we already have tag associated with our UIButton checkbox. Then, we check if indexPath is already present in our array, if yes then remove it from array as user is trying to uncheck the checkbox. And if indexpath is not present or contained by array then add it to array because user is checkmarking the checkbox. Lastly, reload UITableView row. Below is the complete code
Where to go from here
In this tutorial, we learned how to add checkbox on UITableViewCell in swift. We use UIButton to act as custom checkbox and then add a target to it. Target will added in cellForRow method of UITableDataSource. You can grab the copy of source code from addCheckBoxonTable-Tutorial.zip.