Setting a NSMutableAttributedString left aligned and right aligned text

Question

I am attempting to use NSMutableAttributedString to format text to be left aligned and right aligned on the same piece of text

I've reviewed a similar answer at IOS Multiple right and left align on same line but could not get the tab stops to work correctly.

My own solution is to do the following.

Have my copy + add physical tabs (ie: \t) to the end of the copy

Then create a paragraph style for my chat time string which is right aligned and append this to the end of the string.

I've almost got it to work;

enter image description here

But the problem is the time isn't right aligned at all; it seems to be stuck left aligned.

I'd like the time text to be on the right hand side.

Here is my code for setting up the time part;

    NSAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:message.body attributes:attributes];

NSMutableAttributedString *finalizedCopy = [attributedString mutableCopy];
    if (message.sender.remoteID) [finalizedCopy appendAttributedString:tabStops];


    // Add time to the chat bubble
    NSString *messageTime = [[JSQMessagesTimestampFormatter sharedFormatter] timeForDate:message.date];
    NSAttributedString *chatMessageTime = [[NSAttributedString alloc] initWithString:messageTime attributes:attributes];

    NSMutableParagraphStyle *timeParagraphStyle = [[NSMutableParagraphStyle alloc] init];
    timeParagraphStyle.alignment = NSTextAlignmentRight;

    NSMutableAttributedString *dateString = [[NSMutableAttributedString alloc] initWithAttributedString:chatMessageTime];
    [dateString setAttributes:@{ NSFontAttributeName : [UIFont vic_fontOfSize:10],
                                 NSForegroundColorAttributeName: [UIColor vic_darkTextColor]
                                 }
                        range:NSMakeRange(0, dateString.length)];

    [dateString addAttribute:NSParagraphStyleAttributeName value:timeParagraphStyle range:NSMakeRange(0, dateString.length)];

    [finalizedCopy appendAttributedString:dateString];


    attributedString = [finalizedCopy copy];

I am wondering how to best achieve the desired effect.

Many thanks

Also, if I were to use NSTabStops -- where do I put them, at the end of my left-hand string or at the start of my right-hand string?

ie:

NSTextTab *tabStop = [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentRight location:150 options:nil]; [paragraph setTabStops:@[tabStop]]; [finalizedCopy addAttribute:NSParagraphStyleAttributeName value:paragraph range:NSMakeRange(0, finalizedCopy.length)];

Is at the end of my left-hand string but I see no results visually.

Have you tried two labels and autolayout ? I know its not direct answer to your question, but just a suggestion. — Miknash, Jul 17 '15 at 10:44
I can't do that because I will be expected to pass in the attributedString into a JSQMessage podfile and return this; `return [[VICChatMessage alloc] initWithAttributedText:attributedString sender:senderID date:message.date];}` — Atilla Jax, Jul 17 '15 at 10:45

score 3 · Answer 1 · answered Dec 06 '16 at 20:07

Here's some generic Swift code that does what you want I think. The same approach should work in Objective-C as well:

    // Paragraph with left and right aligned text

let paragraph = NSMutableParagraphStyle()
paragraph.alignment = .left
for tabStop in paragraph.tabStops {
    paragraph.removeTabStop(tabStop)
}
paragraph.addTabStop(NSTextTab(textAlignment: .right, location: 240.0, options: [:]))

let text = NSMutableAttributedString()

let leftAttributes = [
    NSFontAttributeName: UIFont.systemFont(ofSize: 10.0),
    NSForegroundColorAttributeName: UIColor.white,
    NSParagraphStyleAttributeName: paragraph
]

let rightAttributes = [
    NSFontAttributeName: UIFont.boldSystemFont(ofSize: 20.0),
    NSForegroundColorAttributeName: UIColor.white,
    NSParagraphStyleAttributeName: paragraph
]

let data = [
    "Carrots": 23,
    "Pears": 453,
    "Apples ": 2350
]

for (key, value) in data {
    text.append(NSAttributedString(string: key, attributes: leftAttributes))
    text.append(NSAttributedString(string: "\t\(value)\n", attributes: rightAttributes))
}

Setting a NSMutableAttributedString left aligned and right aligned text

1 Answers1