Attributed text with two text alignments

Question

Does anyone know how to achieve two different text alignments in one string?

This is what I want the textView to show:

label                                                                         value

My code:

let txtView = cell.viewWithTag(77) as! UITextView

let leftStyle = NSMutableParagraphStyle()
leftStyle.alignment = NSTextAlignment.Left
let rightStyle = NSMutableParagraphStyle()
rightStyle.alignment = NSTextAlignment.Right

let attText = NSMutableAttributedString(string: "label", attributes: [NSParagraphStyleAttributeName: leftStyle])
attText.appendAttributedString(NSAttributedString(string: " "))
attText.appendAttributedString(NSAttributedString(string: "value", attributes: [NSParagraphStyleAttributeName: rightStyle]))

txtView.attributedText = attText

What I get instead:

label value

take one UIVIew and set both UILabel, one is align at left and another to right. — ios developer, Oct 09 '15 at 03:47

score 16 · Accepted Answer · answered Oct 09 '15 at 04:32

16

Using NSMutableParagraphStyle with NSTextTab:

let paragraph = NSMutableParagraphStyle()
paragraph.tabStops = [
    NSTextTab(textAlignment: .Right, location: 100, options: [:]),
]

let str = "Label\tValue\n"
    + "foo\tbar\n"

let attributed = NSAttributedString(
    string: str,
    attributes: [NSParagraphStyleAttributeName: paragraph]
)

let view = UITextView(frame: CGRectMake(0, 0, 120, 120))
view.textContainer.lineFragmentPadding = 10

view.attributedText = attributed

Of course, this aligns to "tabstop", but not to the edge of UITextView. When you modify the size of the view, you have to also modify the location of NSTextTab.

answered Oct 09 '15 at 04:32

rintaro

51,423
14
131
139

Awesome. Thank you! :) – Whitney Foster Oct 09 '15 at 18:07
@rintaro - Why did you do location: 100? What does 100 mean? – Sam B Sep 12 '16 at 12:41
2

@SamB 100 is `view.textContainer.size.width - view.textContainer.lineFragmentPadding * 2`. That means the right edge of the text area. – rintaro Sep 13 '16 at 14:36

score -1 · Answer 2 · edited Oct 03 '18 at 18:51

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {


        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        let cell = Placestableview.dequeueReusableCell(withIdentifier: "cell", for: indexPath);

        //first text
        let attributestitle = [NSAttributedStringKey.font:
            UIFont(name: "Helvetica-Bold", size: 15.0)!,
                          NSAttributedStringKey.foregroundColor: UIColor.black] as [NSAttributedStringKey: Any]

        //second text
        let attributedString = NSMutableAttributedString(string: "\t"+String(places[indexPath.row].distance!)+" miles", attributes: [NSAttributedStringKey.font: UIFont(name: "Helvetica-Bold", size: 8.0)!,NSAttributedStringKey.foregroundColor: UIColor.black])


        let myParagraphStyle = NSMutableParagraphStyle()
        myParagraphStyle.alignment = .right
        myParagraphStyle.tabStops = [
            NSTextTab(textAlignment: .right, location: 300, options: [:]),
        ]

        let attributedStringtitle  = NSMutableAttributedString(string: places[indexPath.row].title!, attributes: attributestitle)
        //adding the right alignment to the second text alone
        attributedString.addAttributes([.paragraphStyle: myParagraphStyle], range: NSRange(location: 0, length: attributedString.length))

        //combining two texts with different alignments.
        let combination = NSMutableAttributedString()
        combination.append(attributedStringtitle)
        combination.append(attributedString)
        cell.textLabel?.attributedText = combination
        return cell;
    }

Attributed text with two text alignments

2 Answers2

Linked