You can access the full course here: iOS App Development for Beginners
Displaying Text
Now that we have learned the basics of storing and changing values, let’s turn to the app development side of things and learn how to display some text in an app. In iOS, we do so using the UI element UILabel. This is just a way to display static text and we can change the text as needs be, even while the app is running. First, we need to start up the project that we created earlier or start a new one. Now open ViewController.swift. We need a label so create a variable to hold a label just above viewDidLoad() so it should look like this:
class ViewController: UIViewController {
var label: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
}
}You have to add the ! as we will initialize label in viewDidLoad and that acts as a promise to initialize it before we use it. Next initialize label in viewDidLoad with a CGRect(). Feel free to add whatever x and y value you want as well as width and height but don’t make it too big. Something like this is pretty safe:
label = UILabel(frame: CGRect(x: 100, y: 200, width: 220, height: 50))
Next you want to add some text to the label through the text property. You can assign any string to label.text. Finally add it to the main view (every view added to the page such as labels, buttons, text fields, etc. are children of the parent view) with the view.addSubview() function, passing in your label. The final code should look something like this:
label = UILabel(frame: CGRect(x: 100, y: 200, width: 220, height: 50)) label.text = "Welcome to my app!"; view.addSubview(label)
Make sure this code is in viewDidLoad and run the app. You should see a blank screen with some text near the top (whatever String you assigned).
Transcript
What is up everyone, and welcome to part six of our iOS development course. Here we’re going to learn how to display text within an app. It’s a very important part of pretty much any app as you’ll likely need to display some sort of label or text throughout the app’s execution. So we’re going to talk about how to display text, we’re going to talk also about how to add UI Elements and use them.
So when we add UI Elements to code, we can get access to their properties and attributes and that’s what we’re going to do. We’re going to interact with the UILabel, we’ll be able to change text attributes, and then this we’ll be able to display the exact text that we want.
So we’re going to start off with the label, we’re going to add it to the page or the screen as a variable. And then we can access and modify the properties. In our case again, we’re just going to be using the text property, although there are many others that we can modify. So we’ll explore those a little bit as well.
So let’s head on over to the code. And as you can see I have this project started up. This is iOS Development. If you remember when we were exploring Xcode, I started a project called iOS Development, that’s exactly what this is starting out with a blank page, you’ll want to get yourself a project started up, I have also my playground here by the way, I just minimized it. And we’re only going to be working ViewController.
So as soon as you open that up, you can actually close that panel up there. Okay. So if we run this app right now, it’s just gonna show a plain white screen, there’s nothing on the storyboard and there’s nothing in the ViewController. What we want to do is simply display a label with some text, that text can say whatever we want on it. So the first step will be to create the label to hold the text then we can change the text, then we can add it to the screen.
So I think probably the simplest way of doing this is creating a variable in here or you can create the label and then work within viewDidLoad. But for now we’re just gonna work with everything in here. Okay. So make sure it’s within this viewDidLoad function. This is essentially the one that is called as soon as this screen comes into play. So there will be a screen associated with this ViewController. As soon as it appears on your device, this function is called so this is used to do all the setup.
So we’ll start off with a constant, this is just going to be our label, okay. And this is going to be an instance of a UILabel. Okay, so we wanna select this guy. And we’ll actually want to pass on a frame right away. Okay, so this frame is going to need an argument. This argument is going to be a CGRect. So this stands for Core Graphics Rect, or Core Graphics Rectangle. So a rectangle is going to have four coordinates, it’s going to have an x and y position. And it’s going to have a width and height, we need to specify all for those in this label.
Now, generally speaking it’s a good idea to take different screen sizes into account. So you probably don’t wanna use absolute numbers like 50, or 100. However, we’re not really building a real app, we’re just using this tutorial, and this project to explore some app concepts. So it’s okay in our case. If you want more tips on app development techniques, then feel free to take some of our other courses. However, for now we’re just going to create a rectangle.
So let’s create something called a labelRect. This is going to be a CGRect like so. If we open up the brackets, you’ll see there’s a few constructors we can use. So doesn’t really matter which one, I would recommend using one of these guys, these last three. Okay, this allows us to enter an x and y position, and a width and a height. For now we’ll just do something like 50 for the x position 100 for the y position, a width of maybe 200 and a height of 100. Doesn’t really matter what figures you enter in here, you’ll probably want at least these numbers, just at least like I don’t know, you could do a hundreds on all of them. That will make sure that’s big enough to hold some text.
Okay so when we create this label, we’re going to pass it in our lableRect. You could alternatively just use this right in here. You don’t have to create the variable but that’s up to you. Okay so we have a label. We have its position and its size. And now we want to assign some text to it. So what we’re gonna do is we’re gonna call upon our label, dot, and now this will give us access to all of the properties. There are lots of properties, attributes, functions that we can call upon this.
Note that we can give it some attributed text. We can change its font. We can change whether its highlighted or not. We can set the number of lines. We can change the text itself, text color, we can change the background color, etc. For now all we’re going to do is we’re going to set some text.
Note that this text is optional. It’s an optional string. The reason it’s an optional string is because this is used to both set the text and retrieve the text. So if I said something like variable someString is equal to my label text. This label might not have text. So that’s why this is optional, okay, because of this label doesn’t have text, then this will take on the value of nil. In our case, we’re not retrieving anything. We’re actually setting something.
So we’re just going to say label.text is equal to, and then we’re just going to set some string. So remember, strings are used to represent text data. So this is the perfect chance for this. So feel free to enter whatever string you like. I’m just gonna say, “Hello, my name is Nimish”, like so. Okay this should fit all on one line. But just in case it doesn’t, I’m going to say label.numberOfLines is equal to two. This will make sure that this fits over multiple lines, if needs be. Okay, cool stuff.
So we have a rectangle with a specific size and position. We have a text assigned to this label. We have a number of line set. So now all that’s needed is to add this to our main screen. So every ViewController controls a specific view. So if we call upon view, you’ll see that this is a view that this ViewController managers. We want to add every UI element to this view or to some child of this view. We’ll talk more about child hierarchies in a few sections from now. For now, what we’re gonna do is we’re gonna say, view.addSubView, Okay?
Note that this takes any UI view. Well a label is actually a subclass of view UIView. So we can actually just pass in our label here. So basically, we’re taking our view our overall screen view and we’re adding this label to it. This label has all of these properties and so we should see this label with “Hello, my name is Nimish” or whatever text you put there displayed when we’re going to run it. So that’s gonna be our next step.
Let’s go ahead and we can run this guy. So build succeeded, it’s looking good so far. Let’s see if there are any errors here. Okay, there we go. So 50 is not very far from the edge and 100 is not very far from the edge there so you can see that we get this nice label with whatever text you assigned. It only spans just a little bit. We didn’t actually need this numberOfLines equal to two but just in case if you have a large phone or a lot of text then it might overflow.
Okay but that is it for this tutorial. You’ve learned how to add or how to create UIviews, in this case a label. You’ve learned how to change some properties of these Uiveiws and you’ve learned how to add them to our screen with this view.addSubview. In the next session, we’ll be actually going back to the language basics. We’ll need to learn a little bit more before covering the next part of our app development tutorial. So that’s it, thanks for watching. See you guys in the next one.
Interested in continuing? Check out the full iOS App Development for Beginners course, which is part of our Mobile App Development Mini-Degree.
