Dynamic Table View Cell

Handling Dynamic Views in Table View Cell

 

In educational applications we often come to a situation when we have to create a user interface for multiple answer type questions. If each question have same number of answers then it can be created very easily by creating a reusable cell in storyboard but what if number of answers in each question varies?

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.

We will use following three components to accomplish this:

  • UITableView
  • CheckableTableViewCell: Subclass of UITableViewCell
  • CheckableOptionView: Subclass of UIView

CheckableOptionView:

Lets create a subclass of UIView by File>New>File>Cocoa Touch Class. Give the name CheckableOptionView and make it subclass of UIView. Click Next and Create to create the .swift file. It will create a file with following code:

Delete the commented code, we are not gonna use it.

Now create following initializers in CheckableOptionView:

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.

Let’s create initializeView method.

Create UIButton object and set tag with given index.

Now set the button image for different states

Add action target to button

Now create the option label which can have multiple lines

Add Label and Button to the view:

Now disable converting auto resizing masks to constraint for each view:

Add following constraints to Button:

Add following constraints to Label:

Now create a protocol for a delegate call to cell as follows and also create a weak property to store the delegate.

Now create following properties for multiple operations:

Now create the method setSelected and setOptionText

Let’s create the action method of option button

That’s it. Our CheckableOptionView class is complete.

CheckableTableViewCell:

Lets create a subclass of UITableViewCell by File>New>File>Cocoa Touch Class. Give the name CheckableTableViewCell and make it subclass of UITableViewCell. Click Next and Create to create the .swift file.

Change the initial code so that it should have following code:

Now, let’s create following private variables to create a header and footer for question and answer for a cell:

Here, header label and view will be used for displaying question and footer label and view will be used to display answer.

Now, it’s 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.

Create following method:

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’s contentView as subview.

Set background of footer view (Answer) to green. (Or any color you like).

Now disable the auto resizing masks to convert into constraint for each view by following code:

Let’s add constraint to Question View(Header).

Add following constraints to Answer View(Footer).

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).

Now, let’s create the method setSelectedOption(index: selectedOption).

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.

This method will be used to mark the CheckableOptionView that whether it is selectable or not.

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’s 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.

Following method can be used to set the Question Text.

Following method can be used to set the Answer Text.

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).

Now, let’s create the method addOptions(options: [String]) to add the options of question for the cell, it will take an array of strings:

Now, let’s create a protocol for delegate call to view controller:

Let’s implement the CheckableOptionViewDelegate as follows:

Add following extension to safely access the array elements:

Table View Implementation:

To use the given CheckableTableViewCell, add a UITableView from storyboard and set the class of the reusable cell to CheckableTableViewCell as given screenshot:

Screen4

Now, add the following code in the viewDidLoad of your view controller:

In cellForRowAt indexPath method use following code:

If you want to mark an option selected use following code:

To show the answer of the question use following code:

To change the background color of any option use following code:

That’s it. You are ready to go. Compile and run the project.

Leave a Reply