Auto Layout : Understanding Tricks of Trade Part - III

Auto Layout And Making Watsapp Like Tabs

When its Auto Layout we usually think about those applications that almost every smartphone have like Watsapp. How do they manage to design such complex screens with such perfection!!! Its really  incredible.

 This tutorial will you guide to implement Auto Layout to create Tabs like we find on the top of applications like Watsapp . Nevertheless with growing client demands almost every iOS developer will sooner or later will definitely implement such tabs and with Auto Layout , the task becomes a lot more easier.

So Lets Start....
 This tutorial will use the implemented scroll view from  Auto Layout : Understanding Tricks of Trade Part - I which was very interesting to go along.

1. Drag and drop a View from Object Library on to your XIB and align it as shown below. 

Select the View and click on the Pin button to give Top Edge, Leading Edge and Trailing Edge and Height constraints. Make sure the checkbox against Constraints to Margins is unselected. This gives proper constraints to our base view for tabs.

2. Drag and drop another two views inside this view, of equal widths and height equal to the previously added view.

3. Now select both the Views and click on the Pin button and select the check box against Equal Widths and Equal Heights. Click on the Add 2 Constraints button.

4. Now, select each view individually and give it Top Edge, Leading Edge, Trailing Edge and Bottom Edge constraints. 

5.  Now we are all set to enjoy our work. If you have done everything as per the guidelines then you will observe the below result.

 

Once the Views are properly aligned you can add other objects as you like and continue with the project.

Now lets implement three Tabs...

1. Drag and drop a view next to the above created view. Give it Top Edge, Leading Edge, Trailing Edge and Height constraints. Add three more views in this view of equal width and height equal to the superview.

2. Select all the three views add give it Equal Widths and Equal height from the Pin Menu.

Do not bother about the orange lines as we are not done implementing auto layout.

3. I guess now you are moving with flow, Select each subview individually and give them Top Edge, Leading Edge, Trailing Edge and Bottom Edge constraints. Make sure the check box against Constrint to Margins is left unselected.

4.Now we are all set to see the outcome of our labor . . . Build and Run the application. 

Once our Views get aligned properly, we can add other objects like button to it and add associated functionalities and continue with the project.

Hope you will not find any difficulty implementing Auto Layout. 

Feel free to post your suggestions and your contribution to improving this tutorial will be highly appreciated . 

Thanks for visiting and do help your friends to save their time.