While working on my sooper-sekrit project today, I came across a surprising hurdle. I wanted to accomplish the following feats using Interface Builder inside Xcode 6 (running iOS 8):
- A fixed-size UITableView, one that doesn’t scroll, but rather alters its height in its superview as the contents change;
- The table view has rows of varying height;
- Inside a UIScrollView that contains other views, above the table view, such that the full view, including the table view, scroll together;
- Using AutoLayout and iOS 8’s new Size Classes
Turns out that it wasn’t easy! But with the help of Stack Overflow, various blog posts and some elbow grease, I got it done. Let’s take a tour.
TL;DR: This is all encapsulated in a demo project, which I’ve posted on Github.
Layout In Interface Builder
As Apple outlines in TN2154, Auto Layout works a bit differently when scroll views are involved. In a nut, while Apple talks about a “mixed” vs “pure” approach to setting your constraints, I recommend the former. When putting content inside a scrollview, embed the content into a separate UIView class first. That way, you only need to adjust the constraints on the view.
In the sample project, take note of the constraints that match the width of the container view to that of the scroll view. This is the only way I was able to avoid an ambiguous scrollview warning; constraining the leading and trailing edges isn’t sufficient.
In IB, I’m also setting two properties as constraints: the height of the container view, and the height of the table view. At runtime, I’m going to reset the height constants on both properties in order to accommodate the change in row heights.
The table view cell contains a UILabel that is constrained to each edge
of the cell, so it will expand. Set the UILabel
numberOfLines to 0 and
turn on Word Wrap. In code, we’ll have to set the
preferredMaxLayoutWidth, so it knows where to wrap the label. We’ll
get to that shortly.
Setting up the View Controller
In the VC’s
viewDidLoad: function, there are a pair of important lines
required in iOS 8 to manage variable row height:
self.tableView.estimatedRowHeight = 80 self.tableView.rowHeight = UITableViewAutomaticDimension
estimatedRowHeight property should be set to whatever the most
common row height might be. This doesn’t have to be accurate all the
time. The table view’s
rowHeight property tells the table to calculate
row heights using Auto Layout.
The view controller in this example is also the table view’s data
source, and the noteworthy line is in the
cell.textContentLabel.preferredMaxLayoutWidth = self.tableView.bounds.size.width - 16
Auto Layout requires this value to know where to wrap the text. Without an accurate value here, you’ll get some pretty whacky results!
Finally, there’s the
viewDidLayoutSubviews() function. There’s some
crazy stuff in here, but it’s the result of a great deal of trial and
The purpose of this function is to set the new height constraints on the
table view and the container view (setting the height of the container
view with Auto Layout will trigger a change in the enclosing scroll
contentSize property, enabling accurate scrolling). Throughout
this function I’m calling
layoutIfNeeded(), to ensure that all objects
are being accurately represented. The whole thing is enclosed in a
dispatch_async block. Why? Because otherwise it doesn’t work right,
dammit. That’s why.
Testing it out
The end result is a view that has a fixed table height which scrolls along with the image above. You can rotate the device and the table will resize correctly. You can open the thing on the iPad simulator, and it still works. I’ve also added support for Dynamic Type, so you can change to a larger version of the text, and the table will reload accordingly.
I hope you find it useful! Code on, my friends.