Self Sizing Cells

TableView and CollectionView in iOS using Swift

Designed by Giridhar Reddy Vennapusa

Most of the iOS apps on the App Store have a UI representation of a list of items, so it’s clear that iOS developers spend a lot of time with TableView and CollectionView throughout development. At AppIt Ventures, we have been developing iOS apps since 2009 and adapting to all the tricks, improvements and new features that iOS offers. In this article, we want to share a concept called Self-Sizing Cells. While not a new topic (this was announced with iOS 8), we want to help beginners with more details and use-cases with Self-Sizing Cells.

Displaying dynamic content in TableView or CollectionView with cells of different heights was not an easy process before iOS 8. We used to have to calculate the height of each cell programmatically and increase the height of the respective cell. With Self-Sizing Cells, displaying dynamic content with variable heights is a simple process.

Self Sizing Cells in a TableView

• Use Auto Layout for the UI elements inside the tableview cells.
• Set the Tableview rowHeight to UITableViewAutomaticDimension .
• Set the estimatedRowHeight or implement the height estimation delegate method and this estimatedRowHeight will be the default height of the cell.

Once both of these properties are set, the system uses Auto Layout to calculate the row’s actual height. The estimatedRowHeight is the height of the prototype cell in the storyboard, when the rowHeight property is set to the UITableViewAutomaticDimension we are telling tableview to calculate the cell height as per the other constraints we added in the cell.

Let’s see a quick demo on how we can tell tableview to self size.

• Create a sample Quotes list demo to show quote with author name in tableview and take a custom cell to make a tableview cell as self-sizing table view cell.

In this sample demo, we will show how to create self-sizing TableView cells that support Dynamic Type. Because Dynamic Type lets the user control the size of the text displayed in the cell, it’s important that the cell resizes itself based on the text size.

1. In storyboard take tableview cell and add two labels into it.

Add two labels into tableview cell

2. We have to add below two Tableview delegate methods in View controller.

Tableview Delegates for row height

Or

we can add below two lines of code in viewDidLoad method.

Set tableview row height properties in viewDidLoad()

3. Take some quotes in an array and assign those to quote description labels in cellForRow at indexPath() method, see below for the result.

Result with wrapped text in quote description label

In the above result screen we did not get the expected result because we need to set number of lines to zero for quote description label. Once you set that, the final result is as below.

Expected result

Self Sizing Cells in a CollectionView

Similar to tableview demo we have to follow below steps to make a custom collection view cell to a self-sizing collectionView cell.

• Use Auto Layout for the UI elements inside the UI CollectionView cell.
• Set the estimatedItemSize for UICollectionViewFlowLayout.
• Set the systemLayoutSizeFitting for UI CollectionView cell.

The estimatedItemSize is the estimated size of the prototype cell in the CollectionView. When we set the systemLayoutSizeFitting property to the CollectionView cell, CollectionView returns the optimal size of the view based on its current constraints.

Like we did for TableView, let’s create a quotes list demo for CollectionView and take custom cell to show quotes with author photo.

Width = (Your cell width) & Height = (Your cell height)

we have to add following method in CollectionView custom cell class.

In storyboard set number of lines to zero for quote description label in CollectionView cell like in TableView cell.

Finally see the result screen for self sizing UICollectionView cell.

Note: The CollectionView demo we have created above has a problem in terms of UI and whitespace. The right representation would require the use of staggered grid view. So, in order to achieve staggered grid view, we would likely need to use some other external libraries. If you are aware of any tricks to achieve staggered view UI while using default CollectionView, share your thoughts in comments section.

If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Follow AppIt Ventures for other interesting articles. Thanks 😄