If you’ve ever created layouts or designed any apps, you probably came across a couple of common tasks that you needed to perform. For example, a login form with a label and a text box stacked on top of each other, the same again and finally a login button just like what a normal login form would look like. Not that those are very time intensive layouts, but still it would be nice to save at least some time on those everyday tasks.

Well, Apple came up with a clever idea to streamline common tasks like this. There is a set of different views to streamline the process of those common tasks. And you don’t even need constraints to get started. Or at least very little.

No Constraints

Stack Views

The first thing that I want to show you that makes your life much easier, are stack views. I just described the picture of this login view with those stacked views, all the same width etc. This is exactly what a stack view can do for you.

But I don’t want to go into too much boring theory, let’s just look at them in action right in the Interface Builder.

There even is a button inside of Xcode that wraps all the selected elements inside of a stack view.


Table Views

Another super handy thing to have is the TableView. Like the name says, a TableView is a view that presents information in a table like way. You’ve probably seen them plenty of times as they are one of the most commonly used presentation options in iOS and macOS development. Now they don’t exactly have something to do with auto-layout because the superview will still need adjustment to match the screen size, but what is interesting in this case is that the table view arranges its items stacked on top of each other much like a stack view. Also it makes use of the scroll view on its own, so you don’t have to implement a scroll view yourself.

Again, let’s look at a little example.


Collection Views

Lastly I want to focus your attention on the CollectionView. The collection view is a little more interesting than the table view when it comes to auto-layout. The CollectionView presents elements just like the tableView, with one special difference. The Information is not presented in a table, but rather in multiple little squares. Those buttons can take any size that they want – height or width – while on the table view, it was just possible to change the height while the width was always limited to being exactly the width of the tableView.

This is the last one of the views that I wanted to show you, but before we move on to the constraints, let’s just take a look again, what this would look like in the Interface Builder.


Now, those are very effective ways of creating layouts without having to deal with constraints too much. Most of the work is done by the Framework itself, but still this doesn’t help us as much as we would need to create a fully adapting layout. Also they are not too customizable, so as soon as our layout gets a little bit more complicated and sophisticated, we will need more flexibility in our layout.

So you can see, there really is no getting around this time. We need to get into constraints to finally make our apps beautiful and make them adapt to any screen size.

Ask Anything!

Do you have any questions? Ask them! I'll answer via Email as soon as I read it.

Not readable? Change text. captcha txt