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