1.2. UILabel, our first UI element

Let's add a text pane, UILabel to our storyboard. Open the Main storyboard, and press Command(⌘) + Shift + L together. It opens up the Objects Library like this:

Now, look for 'label'. Press the intended UI element, (in this case, it shows as 'Label'), drag it, and drop it on the preview screen.

It will now show:

See, there is a left view pane where you can find all the elements. The newly added Label got added inside the View Controller tree. Inside the View Controller, you have a View. The View is actually the view of the entire screen, including the camera cut.

Safe area: Inside the View, we have a Safe area. A safe area is an area where there are no interruptions or obstacles like the camera cut. Click on the safe area; it will mark the safe area on the screen:

The safe area comes in very handy designing the screen with constraints.

Now, let's add a few constraints and attributes for the Label we just added.

Click on the Label, either on the preview screen or the left view pane, and notice the right configuration pane:

Change the label text, color, and font. You see, once you change the attributes, the changes reflect on the actual UI element.

Constraints and Alignments

Now, let's work on the constraints so that we can place the label on the screen, and it stays somewhere predictable, even if we rotate the screen. This is called anchoring.

Before we change anything for the Label, let's see where we will find the tools to work on constraints. Look at the bottom right corner of the Middle pane:

Now let's click on the Label. Then click on the Alignment tool, and select both 'Horizontally in Container,' and 'Vertically in Container.' And add the constraints. It should put the Label in the center of the screen (center-aligned both horizontally and vertically):

Now run the app. and rotate the screen:

See, for both cases, the alignment setup is keeping the Label on the screen nice and predictable.