Introduction :

In today’s post, we are going to create our very own Hello World application. In other words, we are going to use Label element and learn how to add text to our application. So let’s start.

We all know!

In the last post, we saw a bit about simulators and even some basic part of the User-Interface. We have already created an application. We also know that the main storyboard i.e. Main.storyboard file contains the UI of the application or in simple terms, how the application looks.


Now, let’s take a look at labels and let’s learn how to add text to our application.

What are labels? 

Labels or UILabel are views that display one or more lines of read-only text. Often used in conjunction with other controls that describe intended purpose. The appearance of the labels and properties can be configured and they can display attributed strings, allowing you to customize the appearance of substrings within a label. You can learn more about labels here –

How to add labels?

Step 1: You can simply drag any element directly to the screen of the device. You can simply search for the label and drag it to the screen.

Step 2: You can edit the text inside the label by double-clicking on the label or by changing the text in attributes window. You can even place elements using the lines also known as guided lines.


To keep everything simple, we are not going to look everything in detail but use simple things to format the text right now.

Text: Allows you to change between texts we are going to keep it to plain for now.

Color: Allows us to change the color of the text. You can use the color changer to change the color

Font: Allows us to change the font of the text which includes some predefined system fonts.

Alignment: Allows us to change the alignment of the text for example left, right, and center.

Lines: Allows us to define, the number of lines that the label contains.

Autoshrink: Another awesome feature which allows us to fix sizing issues. We can auto shrink font depending on the size of the label.

 Highlighted: Allos us to highlight the text given on the label and even change the color of highlighted text.

Shadow: Allows us to provide proper shadow to the text and change the color of the shadow. Buttons below allow us to change the position of the shadow by defining shadow offset width and height.

Detailed Video Tutorial :

Detailed Video tutorial