Add custom checkbox on UITableViewCell

Add custom checkbox on UITableViewCell or UITableView in swift

In this tutorial, we are going to learn about, how we can add custom checkbox on UItableViewCell or UITableView in swift. And we also perform IBAction on our custom checkbox placed on UITableViewCell. We will place UIButton on UITableViewCell that will act as checkbox for our UITableViewCell in UITableView. In the end of this tutorial, we will have output as shown in below picture

Learn how to create checkbox in swift from HERE

Steps to create or add custom checkbox on UITableViewCell or UITableView

Step 1 : Create a new Xcode project and select “Single View App” template. Name project as “addCheckBoxonTable-Tutorial”.

Add custom checkbox on UITableViewCell or UITableView in swift 4

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 3: Now we need to add UITableViewCell to our UITableView. Drag UItableViewCell on to UITableView, added in step 2.

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 above code, we write down UITabelViewDatasource methods. numberOfRows and cellForRow. In cellForRow we get UILable using the tags we set in prototype cell, same we will do for UIButton. Lastly, we add target to UIButton.

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.