Tuesday, September 6, 2016

iOS Stack View - Working well with Auto layout.

In combination with Auto Layout, one of the most useful tools for working with layouts like the one you have is stack view (UIStackView). A stack view provides a streamlined interface for laying out a collection of views in either a column or a row. Stack views let you leverage the power of Auto Layout, creating user interfaces that can dynamically adapt to the device’s orientation, screen size, and any changes in the available space.

Lets say we have to create a UI like this below 

Lets divide the task into below steps

Step 1: add the UI elements to the scene
just drag 2 labels, 2 text fields and a button to the scene so that it looks below 


Step 2: Embed the UI elements in UIStackView

Shift select all of the added elements and Editor > Embed In > Stack View 

This shows like below 

Step 3: Now align the Stack view to the centre of the screen by using Align and Pin tools 

After the alignment, it will look like the below. 

Step 4 : Align the components within stack view


Select the Text fields individually and add Pin to the edges of the stack view. 

Thats it. the screen is ready. Just change the label to have required text and the background color for the text fields. 

references:

No comments:

Post a Comment