In this post we will see how we can make use of TableView in iOS to create an user interface in which each cell of TableView can have multiple options. This project will be created in XCode 8.1 and Swift 3.0.<\/span><\/p>\n We will use following three components to accomplish this:<\/span><\/p>\n Lets create a subclass of UIView by <\/span>File>New>File>Cocoa Touch Class. <\/b>Give the name <\/span>CheckableOptionView<\/b> and make it subclass of <\/span>UIView. <\/b>Click Next and Create to create the .swift file. It will create a file with following code:<\/span><\/p>\n Delete the commented code, we are not gonna use it.<\/span><\/p>\n Now create following initializers in CheckableOptionView:<\/span><\/p>\n Now we will implement the initializeView(index:) method. But before implementing this method create a label and a button object in this class and a constant value to use for button tag.<\/p>\n Let’s create initializeView method.<\/span><\/p>\n Create UIButton object and set tag with given index.<\/span><\/p>\n Now set the button image for different states<\/span><\/p>\n Add action target to button<\/span><\/p>\n Now create the option label which can have multiple lines<\/span><\/p>\n Add Label and Button to the view:<\/p>\n Now disable converting auto resizing masks to constraint for each view:<\/span><\/p>\n Add following constraints to Button:<\/span><\/p>\n Add following constraints to Label:<\/p>\n Now create a protocol for a delegate call to cell as follows and also create a weak property to store the delegate.<\/span><\/p>\n Now create following properties for multiple operations:<\/span><\/p>\n Now create the method setSelected and setOptionText<\/span><\/p>\n Let’s create the action method of option button<\/span><\/p>\n That\u2019s it. Our CheckableOptionView class is complete.<\/span><\/p>\n Lets create a subclass of <\/span>UITableViewCell<\/b> by <\/span>File>New>File>Cocoa Touch Class. <\/b>Give the name <\/span>CheckableTableViewCell<\/b> and make it subclass of <\/span>UITableViewCell. <\/b>Click Next and Create to create the .swift file.<\/span><\/p>\n Change the initial code so that it should have following code:<\/span><\/p>\n Now, let’s create following private variables to create a header and footer for question and answer for a cell:<\/span><\/p>\n Here, header label and view will be used for displaying question and footer label and view will be used to display answer.<\/span><\/p>\n Now, it\u2019s time to define the initializeCell method. In this method we will initialize header and footer view and add constraints to them. Initially the footer view will be invisible to user to hide the answer.<\/span><\/p>\n Create following method:<\/span><\/p>\n Make header label and footer label number of lines to zero and line break mode to word wrapping so that we can display multiple lines in it. Finally add them to cell\u2019s contentView as subview.<\/span><\/p>\n Set background of footer view (Answer) to green. (Or any color you like).<\/span><\/p>\n Now disable the auto resizing masks to convert into constraint for each view by following code:<\/span><\/p>\n Let’s add constraint to Question View(Header).<\/span><\/p>\n Add following constraints to Answer View(Footer).<\/p>\n Cell initialization is done here. Let’s create some properties which can be used for different operations on the cell.(Methods used in these properties will be defined later in the post).<\/span><\/p>\n Now, let’s create the method setSelectedOption(index: selectedOption).<\/span><\/p>\n Let’s create a method to clear the selection for entire row. In this method we will find all the subviews of the content view of cell(Line 2). If the subview is type of CheckableOptionView(Line 3) then we will deselect that option.<\/span><\/p>\n This method will be used to mark the CheckableOptionView that whether it is selectable or not.<\/span><\/p>\n Let’s create a method to change the background color of any option. It will have two parameters color and the index of the option which background color has to be change. In this method we will find all the subviews of cell\u2019s content view and check if it is of type CheckableOptionView(Line 2 and 3) then we check that the option index of that view is equal to the given index(Line 4). If it is true then we will set the background color of that view to the given color in method parameter.<\/span><\/p>\n Following method can be used to set the Question Text.<\/span><\/p>\n Following method can be used to set the Answer Text.<\/span><\/p>\n Let’s create a method to show the answer of the question. In this method we will find all the constraints in the footerView(Line 2) and check if it is a height constraint(Line 3). If the constraint is of height then we will disable that constraint(Line 4).<\/span><\/p>\n Now, let’s create the method <\/span>addOptions(options: [String]) <\/b>to add the options of question for the cell, it will take an array of strings:<\/span><\/p>\n Now, let’s create a protocol for delegate call to view controller:<\/span><\/p>\n\n
CheckableOptionView:<\/span><\/h2>\n
class CheckableOptionView: UIView {\r\n\/*\r\n\u00a0 \u00a0 \/\/ Only override draw() if you perform custom drawing.\r\n\u00a0 \u00a0 \/\/ An empty implementation adversely affects performance during animation.\r\n\u00a0 \u00a0 override func draw(_ rect: CGRect) {\r\n\u00a0 \u00a0\u00a0 \u00a0 \/\/ Drawing code\r\n\u00a0 \u00a0 }\r\n*\/\r\n}<\/pre>\ninit(index: Int) {\r\n\u00a0 \u00a0 super.init(frame: .zero)\r\n\u00a0 \u00a0 initializeView(index: index)\r\n}\r\n\r\nrequired init?(coder aDecoder: NSCoder) {\r\n\u00a0 \u00a0 fatalError(\"init(coder:) has not been implemented\")\r\n}<\/pre>\nprivate var checkableButton: UIButton!\r\nprivate var labelOption: UILabel!\r\nprivate let buttonTag: Int = 8080<\/pre>\n
private func initializeView(index: Int) {\r\n}<\/pre>\ncheckableButton = UIButton(type: .custom)\r\ncheckableButton.tag = buttonTag + index<\/pre>\n
checkableButton.setImage(UIImage(named: \u201cunchecked\u201d), for: .normal)\r\ncheckableButton.setImage(UIImage(named: \u201cchecked\u201d), for: .selected)<\/pre>\n
checkableButton.addTarget(self, action: #selector(optionSelected(sender:)), for: .touchUpInside)<\/pre>\n
labelOption = UILabel()\r\nlabelOption.numberOfLines = 0\r\nlabelOption.lineBreakMode = .byWordWrapping<\/pre>\n
addSubview(checkableButton)\r\naddSubview(labelOption)<\/pre>\n
translatesAutoresizingMaskIntoConstraints = false\r\ncheckableButton.translatesAutoresizingMaskIntoConstraints = false\r\nlabelOption.translatesAutoresizingMaskIntoConstraints = false<\/pre>\n
\/\/Height = 30\r\ncheckableButton.heightAnchor.constraint(equalToConstant: 30).isActive = true\r\n\r\n\/\/Width = 30\r\ncheckableButton.widthAnchor.constraint(equalToConstant: 30).isActive = true\r\n\r\n\/\/Leading = 8\r\ncheckableButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8).isActive = true\r\n\r\n\/\/Vertically center\r\ncenterYAnchor.constraint(equalTo: checkableButton.centerYAnchor).isActive = true<\/pre>\n
\/\/Lable leading = button trailing + 8\r\nlabelOption.leadingAnchor.constraint(equalTo: checkableButton.trailingAnchor, constant: 8).isActive = true\r\n\r\n\/\/Top = 8\r\nlabelOption.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true\r\n\r\n\/\/Trailing = 8\r\ntrailingAnchor.constraint(equalTo: labelOption.trailingAnchor, constant: 8).isActive = true\r\n\r\n\/\/Bottom = 8\r\nbottomAnchor.constraint(equalTo: labelOption.bottomAnchor, constant: 8).isActive = true<\/pre>\n
protocol CheckableOptionViewDelegate: class {\r\n\u00a0 \u00a0 func checkableOptionView(option: Int)\r\n}\r\n\r\npublic weak var delegate: CheckableOptionViewDelegate?<\/pre>\n\/\/To mark an option selected\r\npublic var selected: Bool = false {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 setSelected(selected: selected)\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/To set the option text\r\npublic var optionText: String = \"\" {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 setOptionText(text: optionText)\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/To get the index of the option\r\npublic var option: Int {\r\n\u00a0 \u00a0 get {\r\n\u00a0 \u00a0 return checkableButton.tag - buttonTag\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/To set whether option can be selected or not\r\npublic var optionSelectable: Bool = true {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0\u00a0 \u00a0 \u00a0 if !optionSelectable {\r\n\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 checkableButton.isSelected = false\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func setOptionText(text: String) {\r\n\u00a0 \u00a0 labelOption.text = text\r\n}\r\n\r\npublic func setSelected(selected: Bool) {\r\n\u00a0 \u00a0 if !optionSelectable {\r\n\u00a0 \u00a0\u00a0 \u00a0 return\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 if selected {\r\n\u00a0 \u00a0\u00a0 \u00a0 checkableButton.isSelected = true\r\n\u00a0 \u00a0 } else {\r\n\u00a0 \u00a0\u00a0 \u00a0 checkableButton.isSelected = false\r\n\u00a0 \u00a0 }\r\n}<\/pre>\n@objc private func optionSelected(sender: UIButton) {\r\n\r\n\u00a0 \u00a0 if !optionSelectable {\r\n\u00a0 \u00a0\u00a0 \u00a0 return\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 if !sender.isSelected {\r\n\u00a0 \u00a0\u00a0 \u00a0 sender.isSelected = true\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0 \/\/Call delegate method\r\n\u00a0 \u00a0\u00a0 \u00a0 delegate?.checkableOptionView(option: sender.tag - buttonTag)\r\n\u00a0 \u00a0 }\r\n}<\/pre>\nCheckableTableViewCell:<\/span><\/h2>\n
class CheckableTableViewCell: UITableViewCell {\r\n\r\n\u00a0 \u00a0 override func awakeFromNib() {\r\n\u00a0 \u00a0\u00a0 \u00a0 super.awakeFromNib()\r\n\u00a0 \u00a0\u00a0 \u00a0 initializeCell()\r\n\u00a0 \u00a0 }\r\n\r\n}<\/pre>\nprivate let headerView = UIView()\r\nprivate let footerView = UIView()\r\nprivate let headerLabel = UILabel()\r\nprivate let footerLabel = UILabel()<\/pre>\n
private func initializeCell() {\r\n}<\/pre>\nheaderLabel.numberOfLines = 0\r\nheaderLabel.lineBreakMode = .byWordWrapping\r\n\r\nfooterLabel.numberOfLines = 0\r\nfooterLabel.lineBreakMode = .byWordWrapping\r\n\r\nheaderView.addSubview(headerLabel)\r\nfooterView.addSubview(footerLabel)\r\n\r\ncontentView.addSubview(headerView)\r\ncontentView.addSubview(footerView)<\/pre>\n
footerView.backgroundColor = UIColor.green<\/pre>\n
headerView.translatesAutoresizingMaskIntoConstraints = false\r\nfooterView.translatesAutoresizingMaskIntoConstraints = false\r\nheaderLabel.translatesAutoresizingMaskIntoConstraints = false\r\nfooterLabel.translatesAutoresizingMaskIntoConstraints = false<\/pre>\n
\/\/headerLabel.top = headerView.top + 8\r\nheaderLabel.topAnchor.constraint(equalTo: headerView.topAnchor, constant: 8).isActive = true\r\n\r\n\/\/headerLabel.leading = headerView.leading + 8\r\nheaderLabel.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: 8).isActive = true\r\n\r\n\/\/headerView.trailing = headerLabel.trailing + 8\r\nheaderView.trailingAnchor.constraint(equalTo: headerLabel.trailingAnchor, constant: 8).isActive = true\r\n\r\n\/\/headerView.bottom = headerLabel.bottom + 8\r\nheaderView.bottomAnchor.constraint(equalTo: headerLabel.bottomAnchor, constant: 8).isActive = true\r\n\r\n\/\/headerView.leading = contentView.leading + 8\r\nheaderView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true\r\n\r\n\/\/headerView.top = contentView.top + 8\r\nheaderView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8).isActive = true\r\n\r\n\/\/contentView.trailing = headerView.trailing + 8\r\ncontentView.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: 8).isActive = true<\/pre>\n
\/\/footerLabel.leading = footerView.leading + 8\r\nfooterLabel.leadingAnchor.constraint(equalTo: footerView.leadingAnchor, constant: 8).isActive = true\r\n\r\n\/\/footerLabel.top = footerView.top + 8\r\nfooterLabel.topAnchor.constraint(equalTo: footerView.topAnchor, constant: 8).isActive = true\r\n\r\n\/\/footerVoew.trailing = footerLabel.trailing + 8\r\nfooterView.trailingAnchor.constraint(equalTo: footerLabel.trailingAnchor, constant: 8).isActive = true\r\n\r\n\/\/footerView.bottom = footerLabel.bootom + 8\r\nfooterView.bottomAnchor.constraint(equalTo: footerLabel.bottomAnchor, constant: 8).isActive = true\r\n\r\n\/\/footerView.leading = contentView.leading + 8\r\nfooterView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true\r\n\r\n\/\/contentView.bottom = footerView.bottom + 8\r\ncontentView.bottomAnchor.constraint(equalTo: footerView.bottomAnchor, constant: 8).isActive = true\r\n\r\n\/\/contentView.trailing = footerView.trailing + 8\r\ncontentView.trailingAnchor.constraint(equalTo: footerView.trailingAnchor, constant: 8).isActive = true<\/pre>\n
\/\/Set the options in a question.\r\npublic var options: Array<String> = [] {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 addOptions(options: options)\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/Set the selected option index.\r\npublic var selectedOption: Int = -1 {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 setSelectedOption(index: selectedOption)\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/Set the question string of the cell.\r\npublic var question: String = \"\" {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 headerLabel.text = question\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/Set the answer string for that question.\r\npublic var answer: String = \"\" {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 footerLabel.text = answer\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/Set whether the options are selectable or not.\r\npublic var optionSelectable: Bool = true {\r\n\u00a0 \u00a0 didSet {\r\n\u00a0 \u00a0\u00a0 \u00a0 setOption(selectable: optionSelectable)\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func setSelectedOption(index: Int) {\r\n\u00a0 \u00a0 \/\/If options are not selectable do nothing.\r\n\u00a0 \u00a0 if !optionSelectable {\r\n\u00a0 \u00a0\u00a0 \u00a0 return\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \/\/ Find all subviews\r\n\u00a0 \u00a0 for subview in contentView.subviews {\r\n\u00a0 \u00a0\u00a0 \u00a0 \/\/If it is CheckableOptionView\r\n\u00a0 \u00a0\u00a0 \u00a0 if let checkableOptionView = subview as? CheckableOptionView {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 \/\/If the option index is equal to given index mark it as selected otherwise mark it as deselected.\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 if checkableOptionView.option == index {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 checkableOptionView.selected = true\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 } else {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 checkableOptionView.selected = false\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func clearSelection() {\r\n\u00a0 \u00a0 for subview in contentView.subviews {\r\n\u00a0 \u00a0\u00a0 \u00a0 if let checkableOptionView = subview as? CheckableOptionView {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 checkableOptionView.selected = false\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func setOption(selectable: Bool) {\r\n\u00a0 \u00a0 \/\/Find each subview and check if it is of type CheckableOptionView, set the selectability of that view.\r\n\u00a0 \u00a0 for subview in contentView.subviews {\r\n\u00a0 \u00a0\u00a0 \u00a0 if let checkableOptionView = subview as? CheckableOptionView {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 checkableOptionView.optionSelectable = selectable\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func setBackground(color: UIColor, forOption option: Int) {\r\n\u00a0 \u00a0 for subview in contentView.subviews {\r\n\u00a0 \u00a0\u00a0 \u00a0 if let checkableOptionView = subview as? CheckableOptionView {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 if checkableOptionView.option == option {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 checkableOptionView.backgroundColor = color\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func setQuestion(question: String) {\r\n\u00a0 \u00a0 headerLabel.text = question\r\n}<\/pre>\npublic func setAnswer(answer: String) {\r\n\u00a0 \u00a0 footerLabel.text = answer\r\n}<\/pre>\npublic func showAnswer() {\r\n\u00a0 \u00a0 for constraint in footerView.constraints {\r\n\u00a0 \u00a0\u00a0 \u00a0 if constraint.firstAnchor == footerView.heightAnchor {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 constraint.isActive = false\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\npublic func addOptions(options: [String]) {\r\n\r\n\u00a0 \u00a0 \/\/ Store previous option view to add constraints\r\n\u00a0 \u00a0 var previousView: CheckableOptionView? = nil\r\n\r\n\u00a0 \u00a0 var i=0\r\n\u00a0 \u00a0 var isFirst = true\r\n\r\n\u00a0 \u00a0 \/\/ For all options given in the array\r\n\u00a0 \u00a0 while i < options.count {\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0 \/\/ If view is already exist (Due to reusability of \u00a0cell)\r\n\u00a0 \u00a0\u00a0 \u00a0 if let optionView = contentView.subviews[safe: i+2] as? CheckableOptionView {\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 \/\/Reset the view with given parameters\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.optionText = options[i]\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.optionSelectable = optionSelectable\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.selected = false\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.backgroundColor = UIColor.white\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 previousView = optionView\r\n\u00a0 \u00a0\u00a0 \u00a0 } else { \/\/ If view is not available create a new view and add constraints.\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 let optionView = CheckableOptionView(index: i)\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.optionText = options[i]\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.delegate = self\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.optionSelectable = optionSelectable\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 contentView.addSubview(optionView)\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 if let previous = previousView {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 if isFirst { \/\/ Remove the bottom constraint of previous view with footer view\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 for constraint in contentView.constraints {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 if constraint.firstAnchor == footerView.topAnchor {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 constraint.isActive = false\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 \/\/ Add top constraint to bottom of previous view\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.topAnchor.constraint(equalTo: previous.bottomAnchor).isActive = true\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 } else {\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 \/\/If previous view is not available then add top constraint to header view\u2019s bottom.\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.topAnchor.constraint(equalTo: headerView.bottomAnchor, constant: 8).isActive = true\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 \/\/ Add leading and trailing constraint to content view.\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 contentView.trailingAnchor.constraint(equalTo: optionView.trailingAnchor, constant: 8).isActive = true\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.heightAnchor.constraint(greaterThanOrEqualToConstant: 30).isActive = true\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 isFirst = false\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 previousView = optionView\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0\u00a0 \u00a0 i = i + 1\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 if let previous = previousView {\r\n\r\n\u00a0 \u00a0\u00a0 \u00a0 \/\/ Add last view\u2019s bottom to top of the footer view.\r\n\u00a0 \u00a0\u00a0 \u00a0 footerView.topAnchor.constraint(equalTo: previous.bottomAnchor, constant: 8).isActive = true\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \/\/ Initially hide the footer view (Answer View)\r\n\u00a0 \u00a0 footerView.heightAnchor.constraint(equalToConstant: 0).isActive = true\r\n\r\n\u00a0 \u00a0 \/\/ If there are more view\u2019s than the given options remove them. (Due to reusability of cell).\r\n\u00a0 \u00a0 while i < contentView.subviews.count - 2 {\r\n\u00a0 \u00a0\u00a0 \u00a0 if let optionView = contentView.subviews[safe: i+2] as? CheckableOptionView {\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 optionView.removeFromSuperview()\r\n\u00a0 \u00a0\u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n}<\/pre>\nprotocol CheckableTableViewCellDelegate: class {\r\n\u00a0 \u00a0 func checkableTableViewCell(_ cell: CheckableTableViewCell, option: Int)\r\n}<\/pre>\n
![\"Screen4\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/01\/Screen4.png\")
<\/a><\/p>\n