Self Sizing Cells
TableView and CollectionView in iOS using Swift
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
- Set the
estimatedRowHeightor implement the height estimation delegate method and this
estimatedRowHeightwill 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.
- In storyboard take tableview cell and add two labels into it.
2. We have to add below two Tableview delegate methods in View controller.
we can add below two lines of code in viewDidLoad method.
3. Take some quotes in an array and assign those to quote description labels in cellForRow at indexPath() method, see below for the result.
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.
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.
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.
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.