SwiftUI

Learn how to bold, italicize, highlight text and more on iOS

It is normal to have multiple labels with different attributes on our iOS screen. Some will be bold and with a larger font size; We call these headings of our screens. Some will be smaller, perhaps grayer, and thinner (or lighter) than a regular font; We call these subtitles. These attributes apply to all text on the same label.

what if you want emphasize (Make adventure) A word in the middle of your text? Should we make multiple labels? Each has its own characteristics and uses them side by side? What if we want to make a piece of text throughout the link to open a web browser within our app? Should we start using buttons as well as labels?

As you can imagine this can get complicated very fast. So is there a better way? Yes there is! Attributed Strings Allow us to do all that and more on a single piece of text within a single label.

In this tutorial, I will show you how to attribute strings and display them on a label (TextView) SwiftUI, I assume you are familiar with the fundamentals of Swift and SwiftUI,

I used Swift 5.6.1 and Xcode 13.4.

In this section, we’ll start by downloading a pre-existing iOS app project. The project is a simple app with a piece of text that needs formatting. Then we will format the text and add attributes Attributed Strings and display it.

Here are the steps we are going to take:

1. Download Starter Pack
2. display using strings AttributedString
3. Adding Font Attributes to AttributedString
4. add link attributes to it AttributedString

let’s get started!

In this tutorial we will use an existing iOS app project to give an example how to use Attributed Strings, Let’s download the pre-existing iOS app project. Open a terminal and run the following command:

cd $HOME
curl https://github.com/anuragajwani/attributed_string_intro/archive/starter.zip -L -o starter.zip -s
unzip -q starter.zip
cd attributed_string_intro-starter/AttributedStringTut
open -a Xcode AttributedStringTut.xcodeproj

turn on app or preview ContentView.swift, Here is the current status of the app:

Note that sentences such as “This sentence is in bold” are not currently displayed in bold. We will fix that through this tutorial.

In this step we will replace our displayed text with a simple string to one AttributedString, Open ContentView.swift, change property myText with the following:

let myText: AttributedString = {
let text = """
This text is to exemplify how NSAttributedStrings work.
This sentence is bold.
This sentence is italicised.
This sentence will be of a larger font size than the rest of the text.
This sentence is a link to Google.
"""
var attributedString = AttributedString(text)
return attributedString
}()

up we’ve changed myText property type String To AttributedString, Feather ContentViewinitialization of ending will be executed and the result will be stored in myText Property.

Run the app or run the preview again and you won’t see any visible changes to your app. That’s because we’ve wrapped our string In an AttributedString however we have not provided any attribute to it. We will do this in the next step.

Comment We don’t need to change our body within ContentView, Basic lesson See SwiftUI Accept strings And Attributed Strings without requiring any changes to the code.

In this step we will add bold, italic and large font attributes where necessary myText Property. Let’s start with the second sentence of the text. We will bold this sentence.

To make the second sentence bold, we need to know the index from where the sentence begins and where the sentence ends. one way to use it range(of: _) function within Attributed Strings, between the lines var attributedString = AttributedString(text) And return attributedString Add the following line:

let rangeOfBold = attributedString.range(of: "This sentence is bold.")!

Add the following line after the above to enforce the bold attribute:

attributedString[rangeOfBold].font = .boldSystemFont(ofSize: 17)

Run the app or preview again and you’ll see that the second sentence is now in bold.

Now we’ll repeat the process for the italicized and larger font attributes. Add the following lines after the line that applies the bold attribute:

let rangeOfItalic = attributedString.range(of: "This sentence is italicised.")!
attributedString[rangeOfItalic].font = .italicSystemFont(ofSize: 17)let rangeOfLargeFont = attributedString.range(of: "This sentence will be of a larger font size than the rest of the text.")!
attributedString[rangeOfLargeFont].font = .systemFont(ofSize: 23)

In this section we’ll just link the last sentence of text to open the browser with Google.

Add the following lines after applying the large font size attribute:

let rangeOfLink = attributedString.range(of: "This sentence is a link to Google.")!
attributedString[rangeOfLink].link = URL(string: "https://www.google.com")

Above we have done the same operations as we applied bold, italic and larger font size. we found for the first time range of the text where we want to apply the link and then set Contact characteristic for this. The link attribute takes a url value.

Run the app again and click on Blue text. This will open Google in Safari.

In this post we learned:

• How to apply different attributes to different parts of text in the same label

You can find the source code of this tutorial in my repo:

You can also find a complete list of Attributes to apply in Apple’s documentation,

In this post, I showed you AttributedStrings allows us to simplify attributing the different parts strings, However what if you don’t know the exact text that requires the attribute? For example, you retrieve a piece of text from the web that is probably in HTML format; Or perhaps a piece of text that is in markdown format. Apple has covered you in these scenarios. I will cover these in future posts.

If you are using custom markup on your text you may need to use regular expressions, This will allow you to identify the range of text that requires markup and apply the required attributes. i will cover regular expressions Also in a future post in Swift.

Want to Connect?For more on iOS development follow me on Twitter!