Swift Programming and iOS Development: Brief Introduction to iOS Development - Part 4

In this tutorial, we will be dealing with auto layout. Auto layout is a design features that will automatically adjust the size of the visual object according to the size of the device. For auto layout to work we must define the relative position of each visual object so that the system will place the visual object accordingly relative to the size of the device.

For example, lets say we have a label which is located at the top left corner. We can define the relative size of the label by defining how much the label should be from the edge from the right. If we want to flush the label to the edge of left and right, we can set the relative edge to 0. Since it is the first visual object, we can set the top edge of label 20 points from the top margin.

For the next visual object after the label, we can place below the label and set the relative position 10 points from the bottom of label.

Lets create a new project called "Intro4" to illustrate further.

Create a new single view project called "Intro4".
Open the storyboard and place a label, button and textfield to the storyboard. The layout is similar to the previous tutorial.
See figure below.

Try running the app without auto layout. We will get the following screen.

Close the app.

Since label and button do not provide a border line, we can change the background of label and button to another color for better visual effects.

To define the relative position of each visual object, first, we need to select the visual object. Next we will click the add constraints button which is the third from the left as shown below.

We will be given a panel to add new constraints as shown below.

Select label and click to add new constraints. Since label is the first object we can set the label to flush the top edge, left edge and right edge to the margin with no allowances. We need to click the red line to highlight the edge we want to set the constraints. In the box, we set the allowance required. Please also make sure Constrain to Margin is set. Finally, under the section Update Frames, we select Items of New Constraints. This option allows the system to set the new constraints and at the same time update the frames. See the figure below.

Once we are satisfied with the constraints, we click Add 3 Constraints. Auto layout will update the constraints and adjust the frames and position of label.

Next, we select the button and click the add constraints button. For button, we would also want the left and right edge to be flush to the margin. For top edge of button we want to set the button 10 points from the bottom of label. Make sure Constrain to margins is set. Please note that for this case, we reference the top edge of button from the margin instead of bottom of label.

As usual, select Items of New Constraints and click Add 3 Constraints.

Finally, select the textfield and click the add constraints button. This time we set the top margin as 20 points from the bottom of button. The rest of the setting is the same as before. Complete the setting and click Add 3 Constraints.

The figure below show the result of the constraints settings. Please note that the gap between label and button is smaller than the gap between button and text field. On appearance, it seems that there is little changes to the storyboard. Actually the layout will change when you run the app in various size of devices.

Run the app using iPhone 5. The result show be the same as below.

Now run the app using iPhone 6 and iPhone 6 Plus.

Both iPhone 6 and iPhone 6 Plus shows that the visual objects are no longer truncated as before. Press CMD + -> key to turn the iPhone 6 Plus to landscape mode. The visual objects as shown below, will will flush to the left and right edges.

Now, lets explore the constraints settings. For a overview of the constraints settings. We can explore the settings using the storyboard document outline as shown below.

Alternatively, select each visual object such as label and click on the fourth button on the right panel as shown below.

The constraints for label is shown under Constraints. We can check the constraints and maybe edit the constraints when necessary. Please note that if you edit constraints here, you must separately update the frames.

Constraints for button is shown below.

Constraints for textfield is shown below.

Stack View

In the next session, we are going to explore another auto layout option called Stack View. Stack view is a visual container that arrange visual objects in a stack.

Lets continue the app by adding a new label, button and textfield on the bottom half of the storyboard as shown below.

After creating the new label, button and textfield; we need to select all the new visual object. We can select all the visual object by boxing all the visual objects using mouse click. Alternatively, select label first then select the button by holding down the shift key follow by the textfield as shown below. We can release the shift key once all the visual object we want are selected.

What we are doing here is to embed the visual objects we selected into the stack view. We can doing this by selecting Editor > Embed In > Stack View as shown below.

Alternatively, we can click the first button on the auto layout panel at the lower right of the storyboard.

The result of embedding the visual object into stack view is shown below.

We can check the storyboard document outline to make sure that we visual objects we selected are indeed under the stack view. See figure below.

Next, we need to set the constraints for the stack view. We need to flush the stack view to the right and left edge. We also need to set the top edge of the stack view 100 points from the bottom of the textfield. Make sure that Constraints to margin is set and select Items of New Constraints. Click Add 3 Constraints.

The result is shown below. Currently, we have set the constraints of the stack view.

Next, we need to set the spacing between each visual objects in the stack. Select stack view and if you are not able to do it select the stack view using the document outline. Set the spacing as 20.

The result is shown below. All visual objects will be 20 points apart.

Next, we need to flush the edge of the visual object to the edge of stack view. Select the label and set Constraints to 0. Please note that in this case, we do not need to reference the edge to the margin. Make sure that Constrain to margin is unchecked. See figure below.

Do the similar settings for button and textfield as shown below.

Constraints for textfield.

Please note that after we have set all the constraints. The auto layout will still show error. This is because, auto layout uses intrinsic size to calculate the visual object. We need to set the intrinsic size for the first visual object.

Select label, go to size inspector (fifth button on the right panel) and change the intrinsic size from default to placeholder.

The result is shown below.

While working on auto layout, we might encounter layout error as shown below.

Click on the yellow triangle and you will be shown whats wrong with the auto layout.

To resolve such error, click on the fourth button of the auto layout panel.

Over here, we have a choice to update frames or update constraints. We need to update frames or constraints when we change the constraints setting or frames setting in the size inspector. Alternatively, you can reset your constraints to the constraints suggested by the system. Usually, we will clear constraints and redo the constraints settings again. For those who are new to auto layout, we need some trial and error in order to get the constraints settings right.

Finally, we can tidy up the label, button and textfield by setting words and color for each visual object.

Change the background color of label and button in order to show the border in the app.

Finally, we run the app on different devices. Please see below. Please note that the image size is not proportional to the device. For larger device such as iPad and iPhone 6, we scale the image to 50%.