Using Auto Layout in an UIScrollView
Ways of setting up auto layout constraints for an UIScrollView and its content right in the interface builder.
Putting auto layout constraints to the most of the UI elements is considerably easy with the interface builder (IB). It helps us to build things visually and fast with some easy debugging features.
However, when there is a scroll view, this can be a bit tricky and it feels like maybe it cannot be done right in the IB as we wanted. This is because auto layout works with UIScrollView a bit differently and it’s not easily noticeable in the IB.
Even it feels like this, there are some ways and tricks that let us to do most of the things right in the IB without compromising adaptive design.
Let’s Go over an Example
In my last app Languru, I wanted to put a side-out menu to the left — which was going to be easily accessible by a swipe gesture. I wanted to implement it with just a simple UIScrollView and some container views in it, not with using over-featured complex third-party add-ons. So I will show you the first part of how to do that in this example.
The app’s main screen is like described in the image below. It contains three parts in an UIScrollView: a slide-out menu and two container views — which left container view appears only when horizontal size class is regular and it covers 1/3 of the screen.
The Tender Point
To get UIScrollView working with auto layout without problems, we need to create a content view first and put it into the scroll view. Scroll view wants to know how big its content is. So the size of the content view should be calculable. To do that in a responsive way, we need to use equal-width and equal-hight constraints along with the other ones.
I made a descriptive graphic of how our constraints should be. If it looks complicated or not clear, don’t worry just go on, you will understand it when watching the video following.
Here, main UIView covers all the screen. The size of our UIScrollView’s content view is equal to the main view’s size and 90 pt more in width. This extra space is for putting slide-out menu. With these equal-width/hight constraints, our content view’s size is calculable. Because the size of the screen is known.
After this point, setting up the inside of the content view is as easy as putting views and constraints like in normal. You can watch the rest from the video following.
How to Implement the Slide-out Menu
This tutorial is the first step of this. It’s very easy to make this work with just some simple codes. I’m planning to make a tutorial for this. I didn’t want to put it here because the main idea here is learning how we can use auto layout in UIScrollView.
Example Use Case
These screenshots are from the Languru app. It has the exact same layout. Press on it to enlarge.
Here, left and main container views contain their own UITableView or UICollectionView. The UIScrollView is just to add slide-out menu functionality.
Making the Content View Dynamically Resized According to Its Content
Let’s say we have a screen filled with elements like texts, images etc. and these elements have to be in an UIScrollView. Doing this is still possible and easy right in the IB.
The width and hight of the content view should be equal to the screen’s, but at the same time hight must be equal to its content too. To do that, the constraints with the contents have to have higher priority than the equal-hight constraint with the main UIView. Because otherwise, when the content has bigger hight than the screen, two constraints would conflict. So we will change the priority attribute of the equal-heigh constraint to low. In the graphic below, dashed constraint is the one with low priority.
Download the Xcode Project File
You can download it from here.
