Brief Introduction to iOS Development - Part 4 - Auto Layout and Stack View

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%.

For iPhone 6, we rotate the phone to landscape mode to check if auto layout will adjust the visual objects accordingly.

To check the constraints settings, we can either use the document outline as shown below, or we can use size inspector (next figure).

A copy of this project is stored at Github at https://github.com/SwiftiCode/Intro4

*** End ***

Brief Introduction to iOS Development - Part 3 - Label, TextField and Button

In this tutorial, we will explore 3 most basic visual object that we will certainly use in every app. They are label, textfield and button.

Labels

Create a new project named as Intro3. Go to main.storyboard, on the right panel, under the object library search for Label as shown below.

Click on Label and drag the object to the storyboard as shown below. Drag the label to the top left corner.

To show the border of label, select Editor > Canvas > Show Bounds Rectangle

On the storyboard, select the label. On the left panel, select the fourth option called attributes inspector from the left panel as shown below.

This attributes inspector panel allow us to set various properties of the label such as the alignment, fonts, font size and many more options. The details of selected options are as follows:

• Text - We usually leave it as default in Plain
• The box after Text is where we enter our text for the label. We have the option to enter the text directly in the storyboard or we can enter the text here.
• Color - This is where we set the color of the label. 
• Font - The default font is System 17.0. We can change to other font type and font size.
• Alignment - We can change our alignment to the right or center using this option. Left alignment is the default.
• Lines - Usually there is only one line for label. we can change that by changing the number of lines.
• Line Breaks - This option allow us to decide what happen if the text is too long to fit into the label. we can choose to clip, word wrap, truncate head or middle or tail. The default is truncate tail.
• Autoshrink - This option allow us to change the font size if we cannot fit the text into the label. The default is "Fixed Font Size". We can change to "Minimum Font Size" and set the minimum font size. The system will keep shrinking down the font size to the minimum until it could fit the entire text in the label. We can use this option to provide some accessibility features where we can set the original font size to big and we allows smaller device screen to reduce the font size. We also can check "Tighten Letter Spacing" to improve the shrinking.
• Background - This option allow us to change the background color of the label. We can set to any color option we want.
• There are many more options but the above options are the common ones we will be using more often.

Next, we select the next option of the left panel called size inspector.

The details of the size inspector are as shown below:

This is where we can change the size of the label, its position on the screen. We can also tell the label box how it should align relative to other objects in the storyboard. In addition, we use additional option here for auto layout which we will be discussing later. 

For now, we just need to know that to set the size of the label, we need to change the width and height. The set the position, we need to change X and Y which is counted from top left hand over of the view.

To enter text in the label, we can double click the label and enter the text directly as shown below.

Alternatively, we can enter the text on the second box of the properties panel as shown below.

The resulting screen in the storyboard is show below.

Button

Under object library, search for button and drag the button object as shown below to the storyboard.

Select the attributes inspector on the left panel as shown below.

As usual, we can change the font type, font size and the color of the text. In addition, we have additional properties that applies to button.

• State Config - In addition to Default, we can set the condition of button as Highlighted, Focused, Selected or Disabled.
• Image - We can set a specific image for each state (Focused, Selected, Disabled or Highlighted)
• Button/Background - Beside image for the button, we can also set a background image for a button and the text remains the same.
• View/Background - If we do not want to include any pictures in the button, we can also choose different background color for the button.

Select the size inspector of the top left panel as shown below. Over here, we can set the position and the size of the button.

Next, we resize the button to be the same as label as shown below.

Text Field

Next, we are going to explore text field. This is one of the display object that user can enter their text. Go to objects library and search for text field. 

Drag the text field to the storyboard and resize the text field as follows:

Select the attributes inspector on the left panel. the text box in the second row allows us to enter some text, but usually in text field, we usually do not enter text, instead we leave it blank as allows user to enter some text. As usual, we can also set font type, font size and font color.

The rest of the common properties are as follows:

• Alignment - This is where we align the text in the text field.
• Placeholder - Usually in text field we do not entered text. However, we might want to inform user what this textfield is for. Under such circumstances, we can entered our instruction under Placeholder. The text will be shown as light color text in the text field.
• Borders style - We can change the border style of the text field over here.
• Clear Button - This option allows us to decide when to show the clear button when we can clear everything in the text field. The options are Clear While Editing, Clear Unless Editing, Always Visible or the default Never Appear. We also have additional check box that clear everything when user start typing something in the text field.
• Capitalization - This allows the system to capitalize the words or sentences automatically.
• Correction - This allows us to set to auto-correction when user typing in the words.
• Spell Check - This option decides if spell check is needed if user start entering the text.
• Keyboard Type - This is where we can choose which keyboard to appear. If user in entering text, then alpha numeric keyboard should be appear. However, if user is entering numbers we can choose to use number pad instead of a full keyboard.
• Return Key - Do you notice when you use an app and when you enter some text, some keyboard show "Done" instead of return and some keyboard shows "Search". This is the option where we decided what to user for alpha numeric keyboard. There is also an addition check box to auto enabled, when it is check the return key will be disabled unless something is entered. This prevents user from not entering anything. 

The above are some of the common attribute we can use in the text field. Please change the option and run the app to see the effects of each option. 

The size inspector as shown below is the same with other objects, we can set the size and the position of text field.

The screen below shows all the visual objects. We have included an addition textfield to demonstrate the difference between the text box and placeholder. 

A copy of this project is stored at Github at https://github.com/SwiftiCode/Intro3