iCodes: Auto Layout : Understanding Tricks of Trade Part

AUTO LAYOUT

Auto Layout is a constraint-based, descriptive user interface layout system for OS X and iOS.

The Auto Layout system defines layout constraints for user interface elements. Constraints represent relationships between user interface elements such as “these views line up head to tail,” or “this button should move with this split view subview.” When laying out the user interface, a constraint satisfaction system arranges the elements in a way that most closely meets the constraints. Constraints are objects and can be established in storyboards and XIBs, exposed as outlets, and created or modified in code.

This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes.

With this brief on auto layout, we will directly move to implementation of auto layout on some screens that as an iOS developer we would have faced or will face some time or the other. Understanding of these will save time for us and will allow to make some flawless designs.

We will start with implementation of auto layout with scroll view, creating sections and will end with customizing those UIViews.

1. Open your project where you want to implement auto layout or create a new one as you desire.
Add a New File and make sure XIB is selected if Storyboard is not being used. I have added a file named TabsViewController with XIB.

2. Let's configure the View Controller. Go to the Attribute Inspector in the right pane and select the size you want to work with.

3. We usually face problem working with Scroll View and auto layout. So let's start with resolving this challenge in a few easy steps. Add a Scroll View, select it and then click on Pin button.

4. Click on all four dotted lines, Top edge,Leading Edge(Left one),Trailing Edge (Right one) and the Bottom Edge and it will turn into solid lines. Make sure the check box against Constraint to Margins is Unselected. Then click on Add 4 Constraints which shows that we have added 4 constraint.

5. We will find that Blue lines on border of the scroll view appears which shows that scroll view has got its constraints perfectly fine. But before we start adding other elements on the screen we have to add another view on scroll view , missing of which may rise problems for us in future.

So Add a UIView on Scroll View and again give the same constraints as you did for scroll view , Top Edge, Leading Edge, Trailing Edge and Bottom Edge. Make sure the check box against Constraint to Margins is Unselected.

6. Hey, why these red lines appear now??? Don't worry it just says that the view has not got all of its constraints that it needs. We will resolve this NOW !!

Select the UIView and click on the Align button just before the Pin button. Then select Horizontal Center in Container and Vertical Center in Container check boxes.

7. Then click on Add 2 Constraints. And the magic happens to make us ready to start working with auto layout on scroll view.

Now, lets us see how to create sections in the screen and implement auto layout. This part will help to implement your understanding where the Screen is supposed to depict information or fields with different Data.

1. We will take three UIView and adjust them in a way that we want it the Screen to be divided.

2. Select the first UIView and give it Top, Leading and Trailing constraints. Make sure you select the check box against Height and these will give proper constraints to the Top View. Make sure the check box against Constraint to Margins is Unselected. Click on Add 4 Constraints.

3. Select the Bottom view and give it Leading, Trailing and Bottom constraints. Make sure you select the check box against Height and these will give proper constraints to the Bottom View. Make sure the check box against Constraint to Margins is Unselected. Click on Add 4 Constraints.

4. Select the Middle View and give it all four constraints Top, Leading, Trailing and Bottom constraints. Make sure the check box against Constraint to Margins is Unselected. Click on Add 4 Constraints.

5. We are all set to RUN the application and test if our auto layout is working fine. If you have implemented everything in the right way as mentioned then . . .

and, HURRAY!!! We perfectly completed the first part of the tutorial . .

We will continue our tour of Auto Layout to create two sections and then using those to
customize our screen.

1. We will take two UIView this time of equal height and width. We will select both the UIViews and select Equal Widths and Equal Heights from Pin Button. Make sure the check box against Constraint to Margins is Unselected. Click on Add 2 Constraints.

2. Don't worry for the orange lines appearing , they will disappear once we give all the constraints to the views. Select the Top View and give it all four constraints Top, Leading, Trailing and Bottom. then, click on Add 4 Constraints. Then select the Bottom View and give all four constraints. Make sure the check box against Constraint to Margins is Unselected. Click on Add 4 Constraints.

RUN the application and we will find the UIViews properly aligned.

We will now see how to customize the content of these Views and likewise we can implement in the understanding from these in future projects. . .

1. we will take four views of same height and width and will align them in the bottom view. Select all the four UIViews and select Equal Heights and Equal Width from Pin button.Make sure the check box against Constraint to Margins is Unselected. Click on Add 2 Constraints.

2. By now , I guess you are easily moving with the flow and understanding what are we doing and and what are we supposed to do next.

Yes you are right, Select the UIViews individually and give all the four constraints Top, Leading, Trailing and Bottom. Make sure the check box against Constraint to Margins is Unselected. Click on Add 4 Constraints.

If you did everything the way as asked above, We are all set to see the magic of autolayout.
Build and RUN the application.

Press (Windows + Arrow Keys) i.e. Rotate the Simulator and we will find that every view is properly set and aligned.

3. Similarly we can configure the content of top view the way we want. Lets add two UIView in the Top View of screen width and equal heights.

4. Select both the UIView and give Equal Widths and Equal Heights from Pin Button. Make sure the check box against Constraint to Margins is Unselected. Click on Add 2 Constraints.

5. Like we did earlier , select the UIViews individually and give it all the four constraints.Make sure the check box against Constraint to Margins is Unselected. Click on Add 4 Constraints.