Expandable cells with stack view

There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints.

Today I would like to present easier way by using advantages given to us since iOS 9.0 which is called UIStackView.

I am going to build a simple list of a programming languages with the possibility to tap on the title and show short description.

Setup table view

The first step is to setup table view. I hope that this process is familiar to you ☺️.

I prefer to separate table view data source from the main view controller to keep code clean and maintainable. To achieve this, I created class DataSource which maintain all the table view source logic.

Common pattern to retrieve data from array, e.g., to show on cell is something like this: items[indexPath.row], I like to simplify this, so I was written the simple extension to my data source class:

“ProgrammingLanguage” is a just a struct that represents data showing in cell (image, title and description). You can download the whole project from my GitHub page (link below).

Setup cell

Previous steps are typical for iOS table views; now we are going to create our cell. We should start in the storyboard file by adding the custom cell to our table view:

Just drag the cell to the table view and then do the same thing with stack view.

The last thing you need to do is put two or more views to the stack view and customize their appearance as you wish. The pattern you should follow is that the very first view is the collapsed view that is always visible to the user. The crucial is to set some height to the collapsed view. In my case this is 50, but if you want to create bigger collapsed cell you should set a different value.

While using stack view and change their subviews height or width manually you should also remember to configure this control properly. Here is an example for my cell:

If you leave the views configuration at this moment, you probably will be disappointed when seeing that when you expand the cell the “Unable to simultaneously satisfy constraints.” is showing to your console. The reason is simple — the height constraint of hidden view is 0, so if you expand the cell there will be a conflict with a total height of stack view. Fortunately, fix is very simple. Just change collapsed view height constraints priority to 999.

After fun with styling the cell in the storyboard, we need to connect it to real code. To do that we need to create a class that inherits UITableViewCell and makes basic setup base on our needs.

The crucial part here is to create the cell state, which describing if te cell should be collapsed or expanded. The Swift enumerations will be helpful here.

As you can see above, I added “carretImage” property which deciding what carret image we should show on our cell in the current state. Also we need a property or method that allow us to change the current state of cell.

The logic here is simple. I set the default state (.collapsed) and using observer property to call toggle() method, which hides or show our ‘expanded view’.

Thats it! 😆. We are finished our cell — code and UI.

Set up the puzzles!

The last step is to connect data to cells. We achieve this by implement cellForRowAt indexPath method in data source class.

The last step of configuring the cell is it state. We need to know when the cell is expanded or no. To achieve it I saving the selected cell indexpath in the source data source class.

If this collection contains current index path I set the state to expanded, otherwise to collapsed.

Here is how it works:

So this is all! UIStackView is a powerful control, I suggest to spend few minutes and make some experiments with it.

Hope that my quick article will be helpful to you :).

Resources:

UIStackView guide: https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views

UITableView guide: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/TableView_iPhone/CreateConfigureTableView/CreateConfigureTableView.html

Customize table view cells (Objective-C): http://www.appcoda.com/customize-table-view-cells-for-uitableview/

Project sources:

My github page 😁