Simple Approaches to Auto Layout in iOS Development Part 1

Multiple Views with Equal Heights

Photo by Ghost Presenter on Unsplash

Read this post on 👍

Auto Layout is a powerful feature of iOS development that makes user interface manageable for all view hierarchies that diverse on different iOS devices. This feature has been announced with iOS 6 and gone further in every new SDK release. Let’s leave aside introduction part and dig down to the auto layout.

Today, I am going to demonstrate step by step how to place multiple views on screen with equal height.

Follow these steps:

2. Select Main.Storyboard from Project Navigator

As you can see there are a lot of UI Components, but this time we don’t need any of them but UIView. You get it from object library which is shown in lower right corner of following screen shot.

3. Drag and Drop 2 views over the view controller’s view and set different background colors to distinguish them.

4. Now it’s time to set constraints for both views.

Select upper view and click Add New Constraints which is located at second from right on the following screen shot.

After that, set constraint for upper view and tap bottom button as following:

Constraints for Upper View

Also, set constraint for lower view:

Constraints for Lower View

Now, you will see some red lines around views, which indicates some constraints are missing, that you need to fix it by adding equal height attribute.

5. To create a constraint between two views, Control-click one of the views and drag to the other.

When you release the mouse, You will see possible constraints displayed with a HUD menu. Select Equal Height.

HUD Menu

6. You have done it!

Now you can run application and see it is going to fit perfectly in every different iPhone simulator.

You can try it with 3 views as practice.

Thanks for reading!

You can follow me on Medium to keep up with new articles :)

iOS Developer at PlusMinusOne /

iOS Developer at PlusMinusOne /