Chapter 5

Facebook
Twitter
LinkedIn

[vc_row css=”.vc_custom_1487155756517{padding-bottom: 40px !important;}”][vc_column][vc_column_text]

Displaying Text using UILabel

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column width=”1/6″][vc_wp_custommenu nav_menu=”35″][/vc_column][vc_column width=”5/6″][/vc_column][/vc_row][vc_row][vc_column][/vc_column][/vc_row][vc_row][vc_column][vc_tta_tour][vc_tta_section title=”Page 1″ tab_id=”1549350058885-f18cda20-9a80″][vc_column_text]We use println(”message string”) to display text on the console.
Now we want to display the text on the iOS device screen. There are three components as per our example in previous chapter, wall, blackboard and hand. Where do you want to display the text? Yes, we want to display the text on the blackboard. Who has the blackboard? The hand has the blackboard. Thus ViewController has a View and on top of that View we need to display the text.
To display the text on the screen we need to create the UI component called “UILabel”. This component will be declared in the ViewController class. Before we start writing the code we should first figure out the model and view relationship and how the controller will merge them. UILabel is a view component and the model component which will provide data to the UILabel, is NSString.
Thus before we allocate the memory for the UILabel we need to have NSString object in the memory.

UILabel <———————————————————- NSString
Follow the below 4 steps whenever we discuss the new UI component:
1.Declare the UI Component.
2.Declare the loading method.
3.Call the loading method in the viewDidLoad method.
4.Implement the loading method in the file. When I say implement,
I just want a blank body method implementation.
Thus for our example we will have to:
1.Declare object firstLabel of type UILabel (Member variable) in ViewController.swift
2.Declare method loadFirstLabel in ViewController.swift
3.Call the method loadFirstLabel in the viewDidLoad method of ViewController.swift
4.Implement the method loadFirstLabel in ViewController.swift[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 2″ tab_id=”1549350058901-9601a2e3-1dad”][vc_column_text]ViewController.swift will be as follows
class ViewController: UIViewController {
var firstLabel: UILabel?//1. Declare the UI component
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = UIColor.yellowColor()
loadFirstLabel() //3. call the method
}
func loadFirstLabel() //2. & 4. Declare and implement the load method
{
}
}
Thus in other language we do not mention the “this” pointer when we call the method of the same class, same applied in swift as well. Now we will start implementing the loadFirstLabel method. First we will create String object with the text, which you want to display.
For creating the UI Component we follow 4 golden rules mentioned below
1.Create the UI Component and initialize it’s frame.
2.Set the purpose property or the model property of the UI Component.
3.Set the secondary property of the UI Component .
4.Add the UI Component to the parent view.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 3″ tab_id=”1549350070636-b60ed81c-345b”][vc_column_text]In our example we will have
1.Create the UILabel with frame having 10,60,300,40.
2.Set the “text” property of UILabel to the String object which was created.
3.Set the backgroundColor, textColor, font and textAlignment property of
UILabel to make it look text more attractive.
4.Add the UILabel Component on to the ViewController’s view
The code is as follows
func loadFirstLabel() //2. & 4. Declare and implement the load method
{
var str = “Priyank Ranka” // Declaring the Model

//Step 1
firstLabel = UILabel(frame: CGRectMake(10.0,60.0,300.0,40.0))
firstLabel!.text = str //Step 2

//Step 3 starts
firstLabel!.textColor = UIColor.blueColor()
firstLabel!.font = UIFont.boldSystemFontOfSize(20)

firstLabel!.textAlignment = NSTextAlignment.Center

//Step 3 ends

self.view.addSubview(firstLabel!)//Step4
}[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 4″ tab_id=”1549350061170-f445d3ee-f621″][vc_column_text]

When you run the app, you will get following output on the simulator.

Suppose you want to make your text dynamic, you need to create the String using format specifiers.

Format specifiers are universal and accepted in all programming languages.

For example %d for integer, %f for float or double and so on. But Swift makes our life more easier, we can use “+” operator to add the string in whatever order. In order to insert

 the data we use “\()”

func loadFirstLabel()//2. & 4. Declare and implement the load method

    {

        var str    =   “Priyank Ranka”

        var str1    =   str + ” \(10)”

     //Step 1

        firstLabel  =   UILabel(frame: CGRectMake(10.0,60.0,300.0,40.0))/

     firstLabel!.text = str1//Step 2

        //Step 3 starts

        firstLabel!.textColor        =   UIColor.blueColor()

        firstLabel!.font             =   UIFont.boldSystemFontOfSize(20)

        firstLabel!.textAlignment    =   NSTextAlignment.Center

       //Step 3 ends

        self.view.addSubview(firstLabel!)//Step4

    }

[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 5″ tab_id=”1549350064985-62b1f35e-20f7″][vc_column_text]

Thus if you see how we have declared str1 object, you will notice we have used “ \(10)” to add to the str

When you run the project you get following output. Please refer folder 3.LableDemo

[/vc_column_text][/vc_tta_section][/vc_tta_tour][/vc_column][/vc_row]

Categories

Build Your Team in 1 Hour