Join Steven Lipton for an in-depth discussion in this video Attributed string jazz, part of iOS Development Tips Weekly.
- [Instructor] Sometimes you need a label, to have a bold or italic word, or possibly even two fonts. Well, it has a lot more it can do. You can jazz up a label or button using attributed strings in iOS. Download and startup the XCode project I've set up for you. I've laid out a label and code, but I haven't added any text yet. We'll add the text and format it using the attributed string in the format label method. I made the string for you called text, as you can see right here, and right under that, we're gonna assign it to an NS mutable attributed string so I can make changes to it.
There's both a mutable and non-mutable, and as you probably know, if you've worked with objective C before, mutables are the only ones you can make changes to, so let's go ahead and do that. Let's do a let attributed text =NSMutable. And you can see there's several of them, so be careful which one you pick, and then put attributed, and there it comes up, attributed string, and I'm just gonna do the one with the string. There's lots of different versions you can do.
We'll talk a little bit more about some of them a little later. And you'll use text, and we'll use our text, "I really love pizza." There we go, alright, so we've got an attributed text. Now, with attributed strings, you're in a place where older foundation conventions are king over the modern Swift. And you can see we're using NS for this, that's one of these. Labels and buttons have an attributed text property, which we can use directly, and I'll assign the text here from a label. So my label can use its attributed text property and that equals my attributed text.
Now, I have a 9.7 inch iPad simulator started. I'll select that for my simulator and I'll run on this. And you get, in really tiny letters, our default textiles and font for the attributed text. So go ahead and stop the app and give yourself some space between label attributed text and the let attributed text, and we're gonna add some stuff in here. Now, the first thing I'm gonna do is I'm gonna change all the text to Georgia 26 point so we can read it.
You'll add an attribute to the text using the add attributed method. So you do attributed text, add attribute, and you'll see there's two, we're gonna use the one that says name. And the name will be a key that we're gonna use for this, and ours is gonna be font. Value can be any, so depending on what you're doing, you're gonna have different values. We have a UI font in this, so I'm gonna use UI font. And I'm gonna use a name and we're gonna call it Georgia, will be the name of the font, and we're gonna make it a size 48 font, and the next one we have here is range.
And I'm just gonna put in full range for a second here. Now, ranges in Swift are not NS ranges, so we have to use an NS range here for this, and that means I'm gonna have to make some definitions. And I'm gonna go above attributed text here and I'm gonna add a computed property of full range, but I'm gonna return a value in full range. And what I'm gonna do is NS range is a location and a length.
So, NS range and you can see down here, it's got one for location and length, and that's the one we're gonna be using. And the location is going to start our start location for the range and how long the range is going to be. So location is zero, we're gonna start from the full for full range for the entire text it'll be zero. And then, we have in our attributed text, instead of count or something like that, we have length, which gives us our actual length.
And now I have a full range variable. If I wanna say everything in my text, I've got it right here. Go ahead and run that, and you get, "I really love pizza." in a much bigger font. Go ahead and stop that. You'll see we have a little bit of an error here, and that's just because of UI font is optional, so I'm just gonna put an exclamation point there to get rid of that. Okay, now that we've got nice font, let's go ahead and center the text. And for that, you're gonna use a paragraph style attribute.
So, before we do that, we're gonna need a value of a paragraph style, and so, I'm gonna set up the paragraph style. So, let paragraph style =NSMutableParagraphStyle. There it is, and I'm gonna change the paragraph style. Alignment=center, and then I can add that attribute. Paragraph style, and then I'll just use the paragraph style I've made up.
And I'll use full range again, nice and handy. And I can run that again, and now my text is centered. Now, that's all stuff you can do with a plain label. The power of attributed text is formatting parts of the text. For example, I can tilt the word really to make it look a little bit more italic. I need the range of the word really here, so I'll first add a method below the full range variable to get it, and I'm gonna use an NS mutable string method called range.
So I'm gonna do this, func range of string, and so I'm gonna take a string and convert it to an NS range. And the nice thing about how we're gonna do this is there's a nice and cheap way of getting around a whole bunch of problems of finding that. Return attributed text, mutable string, and that gets us the string from the attributed text, and one nice thing about mutable strings, unlike strings, is they have a property range, and it's actually called range of.
And I can just put my string in that and it will return an NS range. Now that I have that NS range, I can use that to make my oblique really. So I can do attributed text.addattribute, pick obliqueness, and my value I wanna make 0.25 and my range is going to be range of string really, and I'm gonna do one more thing before we run this, and that's that I may wanna make a whole bunch of changes all at once, and that I can do with a dictionary.
I'll change pizza to be a little bit more funky of a font. I'll set the stroke with the outline and the font to red, and with a negative number, it'll fill it in, but I'm gonna leave it to the positive here. So let's go ahead and do let attributes and I'm gonna make a dictionary of Nsattributedstringkey and any= and I'll put my attributes under here tabbed out so you can see each one, .font, and that's one's gonna be a UI font.
And we're gonna use name size again, and the name for this one we'll use chalkduster, and the size will be 72, and I'll unwrap it, put a comma for our next entry, and then foreground color is another key you can use. And I'm just gonna set that to UI color.red. And I can set a stroke width.
Like I said before, stroke widths that are positive will be outlines, stroke widths that are negative will be filled in. And I'm just gonna use six here. And now we can use the other add attribute function which is let's do attributed text, add attributes, and in here, I can put my attributes. And my range, I'm gonna use the range of again, and that'll be the word pizza.
Now, there is one of the initializes by the way, that where we said up here to create the attributed text, I could set this whole thing up to be an attributed string that has all my attributes in here together, I just didn't do that for this one. And we have everything in place now for what we wanna try, so go ahead and run the app. And now you've got a tilted font over here, and you've got some funky looking red pizza text here so that you can format this in lots of different ways.
There's plenty of keys in the documentation for you to look at, and this should give you some idea of the power of attributed text.
Note: Because this is an ongoing series, viewers will not receive a certificate of completion.