Auto Layout in iOS

screen in a specific device and also use rotate screen option to preview the changes in different screen orientation.

Arrange three Buttons in single column

In the next demo, we wil try to arrange three buttons aligned horizontally center to View and in a single column. Add a View Controller to the storyboard then drag drop three buttons on the View Controller. Though we have used the guidelines to align these buttons they don’t look the same when you preview them.

Now let us see how to fix these UI issues by adding constraints.

First select the Button with caption as Auto Layout 2 and make it Horizontal and Vertical Center in Container then Add these two constraints. This would make sure the Auto Layout 2 button is aligned center to the View both vertically and horizontally.

Select the button with caption as Auto Layout 1. Use the Aign option and add Horizontal Center in Container constraint.

Now you need to specify the Centre X and Verical Spacing constraint for this button. This can be done by control dragging from Auto Layout 1 button to Auto Layout 2 and you will be presented with the following option.

Select Vertical Spacing to position the control at constant distance from Auto Layout 2. Repeat the same control drag from Auto Layout 1 and Auto Layout 2 and this time choose Centre X.

Now repeat the above steps for Auto Layout 3 with Auto Layout 2 i.e add Centre X and Vertical Spacing constraints.

 

Scenario 3:- Adjust control width based on screen orientation

This scenario explains how to add constraints so that controls width increases or decreases based on the screen size. For example in the below screenshots, the width for textfields provided for entering name and Age gets adjusted based on screen orientation

Add a new View Controller on to Storyboard then add 2 labels and 2 textfields and a button. Provide the caption for both labels as Name, Age and Submit (button) respectively. We need to add constraints to labels so that their width and position are fixed at the specified location. And for both the textfields, constraints have to be added to trailing edge so that width increases or decreases based on the orientation

Add three constraints to the label with caption as Name using the pin option as shown in the below screenshot.

Repeat the same for label with caption as Age

Select the textfield adjacent to Name label, control drag from textfield to the container then select Trailing Space to Container Margin.

Need to align the textfield with the label, control drag from text field to name label and select Centre Y from the list of constraints.

Keeping the textField selected, navigate to Size Inspector (Utilities Pane) and cick Edit on Trailing Space constraint. Set the value for the constant as 10 as we want to maintain the space between textfield and container to 10 in both landscape and portrait mode.

Repeat the above steps done for Age textfields as well.

Finally we need to add two constraints for the Submit button to make sure it is aligned on the right hand side at certain distance from the Top Layout. Control drag from button to top of the container and select Top Space to Top Layout Guide.

Again repeat the above step by this time to side of the container and select Trailing Space to Container Margin.

Now prevewing the screen in Portait and Landscape mode should look as shown below.

Scenario 4:- Apply constraints to Embedded View

In this demo, let us see how to embed controls within a view and apply constraints to the embedded View instead of applying to the individual constraints.

Note :- Button has been incorrect named as Password it needs to be Register. The source code has been updated with this name change.

Add 2 textfields, 2 buttons and provide name and placeholder text as shown below.

Select these controls and embed them inside a View by navigating to Editor menu -> Embed -> View

Now change the background colour of the View and buttons to dark gray and orange.

Select the Embedded View, click Align option and make the View centre align to both Horizontal and Vertical to the Container.

Also add the width and height constraints for the Embedded View keeping the current value.

Now you might see a dashed orange colour line indicating the view is in misplaced position. You can fix this by selecting Update Frame under Resolve Auto Layout Issues option. Please make sure to select Update Frame option under Selected Views and not the container

Previewing the screen in both portrait and landscape should look as shown below

We have seen an introduction to Auto Layout using Storyboard. You can also add constraints via code using NSLayoutConstraint API or Visual Formatting language.

Download the source from GitHub

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s