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.