DevFright

Learning Programming

How to Display HTML in UITextView with Swift

by 1 Comment

I was working with the Google APIs Client Library for Objective-C for REST today and when working on retrieving email messages from Gmail I noticed that the Data being passed, once decoded from base64, contained HTML in some cases. In this quick tutorial I’ll provide a quick example of one way that you can display a string containing HTML and put it in a UITextView.

Instead of showing how to retrieve an email from Gmail, and then access the data string and go through the conversion to make it a readable string, I’ll just begin from a hard-coded HTML string and show how that can be used in a UITextView.

Preparing a String Containing HTML

let messageString = "<!DOCTYPE html><html><body><h1>A Heading</h1><p>My first paragraph.</p><h2>Another Heading</h2><p>More text</p><h3>And Another Heading</h3><p>And done</p></body></html>"

First we create a String and store it in a constant called “messageString”. This is just a simple example of HTML, although more complex HTML layouts will work too. It has H1, H2, H3, and P tags as well as the needed html and body tags.

The UITextView

A read of the UITextView class reference shows that a UITextView has a text property which is often set to display text in the view. What it also has is an attributedText property that requires an NSAttributedString to set it. This allows the UITextView to display styled text, which is what we need.

The NSAttributedString

The NSAttributedString is described as being a “string that has associated attributes (such as visual style, hyperlinks, or accessibility data) for portions of its text.” The NSAttributedString accepts a Dictionary that is used for the attributes of the text. For our needs, one of those options we can set is used to specify that we are using HTML.

To create the NSAttributedString it needs Data passing in, as well as some options providing. Lets first look at converting the string containing HTML in to Data.

let htmlData = NSString(string: messageString!).data(using: String.Encoding.utf8.rawValue)

What we do here is provide the messageString and then initialise the string. We then call the data method which requires the encoding to be used, in this case, the raw value.

The next task is to select the options to be used:

let options = [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html]

On this line we create a constant, called options. In here we store the key:value I mentioned up above. In this case, we are specifying that the documentType key should have the value of a .html type document.

Creating the Attributed String

Now that we have our html data and have created the options, we can now create our NSAttributedString.

let attributedString = try! NSAttributedString(data: htmlData!,
                                               options: options,
                                               documentAttributes: nil)

With the NSAttributedString ready, we can now set the attributedText property of the UITextView to display the formatted text. You do that as follows:

messageView.attributedText = attributedString

Assuming you have a UITextView available in the Storyboard, and have connected it up with an IBOutlet, you can display whatever HTML you want to provide. This is especially useful for when looking at the payload on a Gmail message where the data is sometimes decoded to a HTML string.

Comments

  1. Hi, How to add image tag and display in the textView?
    let messageString = “A HeadingMy first paragraph.Another HeadingMore textAnd Another HeadingAnd done”

Leave a Reply