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 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 AutoLayout 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 into a self-sizing TableView 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 a tableview cell and add two labels into it.
[caption id="attachment_12430" align="alignnone" width="411"]
Add two labels into TableView cell.[/caption]
2. We have to add the two Tableview delegate methods below in View Controller.
[caption id="attachment_12431" align="alignnone" width="967"]
TableView delegates for row height.[/caption]
Or
we can add the two lines of code shown below in viewDidLoad method.
[caption id="attachment_12432" align="alignnone" width="631"]
Set TableView row height properties in viewDidLoad().[/caption]
3. Take some quotes in an array and assign those to quote description labels in cellForRow at indexPath() method. See the result below.
[caption id="attachment_12433" align="alignnone" width="376"]
Result with wrapped text in quote description label.[/caption]
In the above 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, you get the expected result, as shown below.
[caption id="attachment_12434" align="alignnone" width="400"]
Expected result.[/caption]
Self-Sizing Cells in CollectionView
Similar to the TableView demo, we have to follow certain steps to make a custom CollectionView cell into a self-sizing CollectionView cell.
- Use AutoLayout 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.
[caption id="attachment_12435" align="alignnone" width="923"]
Width = (Your cell width) & Height = (Your cell height)[/caption]
We have to add the 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.
See the result screen for the self-sizing UICollectionView cell below.
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.
