Introduction to iOS Development Series 1.4 - Visual Object

In this session, we will continue to setup visual object. To do that lets create a new project called Intro3. Please refer to previous section for creating a new project.

We will be placing a new label into the storyboard canvas.

Placing Visual Object

First, select object library as shown below:

Enter "Label" in the filter bar as shown below:

Drag label to the storyboard canvas and place it at the center of the canvas.

Inspector Pane

With label selected, select attribution inspector. Attribution inspector is on the right pane. If you could not get this page, make sure label is selected as in the previous image and attribution inspector is selected as shown below.

There are other inspector beside attribute inspector.

They are in the order from left to right:

• File Inspector - shows file settings
• Quick Help Inspector
• Identity Inspector - shows the relation between file and object class.
• Attributes Inspector - shows all the related attribute related to an object
• Size Inspector - shows the size and position settings in relation to the canvas.
• Connections Inspector  - shows the connections between each visual objects and the related variables or code in the view controller.

The most common inspector we will be using are attributes and size inspector. Occasionally, we may need to change or adjust identity or connection inspector.

Attribute Inspector

To explore further attributes inspector, we need to select the label that we have placed in the canvas. Various attributes are shown as below

Under attributes inspector, we can choose the type of color, font type and font size for the selected label. In addition, we can adjust the alignment, change the letter spacing, view mode, and background color.

The most common field to change is the second field after text type. This is where the words for the label located. Whatever we write in this field, the label will reflect the text in it.

We can manually adjust the label size. Alternatively, we can use size inspector as shown in the next section.

Size Inspector

Make sure the label is selected and select size inspector as shown below:

The most common section that we used is the view section.

The X and Y refers to the location of the label with reference to its top left corner. X refers to location across and Y refers to vertical location.

If we change the location of label to x=0 and y=0. The effect is as follows

If we shift the label to lower left corner

The location of Y changes

If we shift the label to top right corner but just below the battery image.

The location will be X=319 and y=20.

From the exercise above we know that the maximum of x is 319 and maximum of y is 646. To avoid the status bar at the top, we should offset y by 20.

We can also change the width and height of label in size inspector.

Please note that once the size is changed the relative location of the label will also be change.

We will covering other pane when needed.

Please check out the another simple video on placing and resizing label on Xcode.

***