Simple Approaches to Auto Layout in iOS Development Part 1
Multiple Views with Equal Heights
Read this post on doganaltinbas.com 👍
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:
- Open Xcode (Create New Xcode Project > Single View App)
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:
Also, set constraint 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.
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 :)
