Multi-Line TableView Cell with Text Formatting

Question

Scenario
I have a JSON feed where I get all this information about places in a city. The design looks like this (see attached image).

The design wants bolded text, URL text, different font size text. Sometimes the URL might not exist in the JSON feed.

Question
Which option is the best way to lay this out in a TableViewCell?

I'm thinking Option 3 is the easiest as I read that in Swift 4 you can use the new string literals. Concat all the strings with line breaks and then place them in a UITextView. But I don't think it supports formatted text.

Looking for feedback please

score 0 · Answer 1 · answered Jul 19 '18 at 01:12

Updated: Based on the research below I figured out that you can solve this by using:

- NSAttributedStringKey
- NSAttributedString
- NSMutableAttributedString

First Step
I created a private function called generateEntry that returns an NSMutableAttributedString

private func generateEntry(bType: String, bTitle:String, bDescription:String, bUrl: String) -> NSMutableAttributedString {
    // -- passed in parameters
    let bookmarkType:String = bType
    let bookmarkTitle:String = bTitle
    let bookmarkDesc: String = bDescription
    let bookmarkUrl: String = bUrl
    // -- type
    // Step 1 - you need to create the attribute for the string you want to change. Size, color, kern effect
    // Step 2 - then you create a NSAttributedString and apply the attributes from the previous line
    let bTypeAttribute = [NSAttributedStringKey.font: UIFont(name: "Arial", size: 14), NSAttributedStringKey.foregroundColor: UIColor.black, NSAttributedStringKey.kern: NSNumber(value: 0.5)]
    let test: NSAttributedString = NSAttributedString(string: bookmarkType.uppercased() + ": ", attributes: bTypeAttribute as Any as? [NSAttributedStringKey : Any])

    // -- title
    let bTitleAttribute = [NSAttributedStringKey.font: UIFont(name: "Arial-Bold", size: 18), NSAttributedStringKey.foregroundColor: UIColor.black]
    let testb: NSAttributedString = NSAttributedString(string: bookmarkTitle, attributes: bTitleAttribute as Any as? [NSAttributedStringKey : Any])

    // -- description
    let bDescriptionAttribute = [NSAttributedStringKey.font: UIFont(name: "Arial", size: 18), NSAttributedStringKey.foregroundColor: UIColor.black]
    let testc: NSAttributedString = NSAttributedString(string: ": " + bookmarkDesc, attributes: bDescriptionAttribute as Any as? [NSAttributedStringKey : Any])

    // -- url
    let bURLAttribute = [NSAttributedStringKey.font: UIFont(name: "Arial-Italic", size: 18), NSAttributedStringKey.foregroundColor: UIColor.black]
    let testd: NSAttributedString = NSAttributedString(string: bookmarkUrl, attributes: bURLAttribute as Any as? [NSAttributedStringKey : Any])

    // combine the strings
    let mutableAttributedString = NSMutableAttributedString()
        mutableAttributedString.append(test)
        mutableAttributedString.append(testb)
        mutableAttributedString.append(testc)
        mutableAttributedString.append(NSAttributedString(string: "\n"))
        mutableAttributedString.append(testd)

    return mutableAttributedString
}

Step 2 Then within my tableViewCell I can use this private method to generate the NSMutableAttributedString and apply it to my custom tableViewCell. But instead of using cell.descriptionLabel.text you need to make sure to use attributedText

let testText = generateEntry(bType: "Type", bTitle: "PLACE", bDescription: "A description...", bUrl: "URL")
cell.descriptionLabel?.attributedText = testText

Multi-Line TableView Cell with Text Formatting

1 Answers1