Swift Components Tour – UILabel

In this lesson

This chapter of the Swift Components Tour is the UILabel, the simplest way to display static text.

Kyle Roberts
Swift Guru at Large

Kyle's Series

Transcript

Tap on time to skip ahead

00:10

Hello world! Kyle here with Brax.tv and we are going to talk about UI Labels. I’ve got with me my Swift Components Tour app. We’re going to open up the LabelsDetailViewController. Just this first view controller was the Detail ViewController from the template of the master detail template that I chose when I created this app. In this Detail ViewController was this label here that says Detail View Content goes here. Since the label is one of the most basic text components in IOS. I thought I would leave that label there. I did not touch it. I added some auto layout constraints and left it how it was created. To serve as an example as about as basic as a label can be. The font point is 12. Using the default system font. That’s about it.

01:20

If we look down here, at the second label, I actually added this one on my own. What I did to create it was I copied this center one, set up auto layout constraints to move it down a bit. Let’s check out the storyboard.

01:42

What I did was I set this lines property, which is actually connected to the UI label dot number of lines property, and set it from 1 to 0. Basically, with that property, when you set it to 0, you are saying that there is no maximum number of lines. The text content in the label will adjust based on its frame size. I filled with the frames a little bit and made it so it lays itself out to one word per line.

02:22

If you may have remembered, let’s show you again in the app, that this top label has the same text made from the same string, but each word is styled a little differently. In the storyboard here, it looks just like the center label. How do we do that? We use something pretty cool called NSAttributedStrings. You can actually set a text components text to an attributed string in interface builder. Except it’s just not as in depth as I was looking for, for a good example of what you can do with attributed strings.

03:12

Let’s check out the code. You can see here that there’s a reference to that top label in the storyboard. You can actually view it right here. All I’m doing is on viewDidLoad, I called this method setAttributedStrings. I basically come up with this font. I set this attribute for the entire string on the in it method on this NSMutableAttributedString. For each word I add a new attribute to this string only at the range of the word. Now there are going to be some neat ways to get the NSRange of a word out of a string, but I was just keeping it simple. This is a static label, it is never going to change. I just counted it out manually that the second word starts at the index of 7 and continues on for 4 characters. We can see in the app the first word detail no attributes other than the Georgia font size 24. The second word we added a strike through style. Third word larger. Fourth word red. Fifth word looks italicized.

04:42

There’s a lot more you can do with UI Labels. You’ll be using a lot of them in iOS development with Swift or Objective-C but I thought this would be a good overview and introduction to the UILabel. Thanks for watching!

Additional Info

Register to get access to additional resources and info.