Ios：如何对齐诸如whatsapp聊天消息标签和时间标签之类的标签？答案

【问题标题】：Ios : How to align labels like whatsapp chat message label and time label?Ios：如何对齐诸如whatsapp聊天消息标签和时间标签之类的标签？
【发布时间】：2018-08-09 11:12:32
【问题描述】：

在whatsapp中，如果消息很短，文本和时间在同一行。如果消息很长，时间在右下角 - 上面的文字。

如何在 iOS 中使用 Storyboard 实现这一目标

【问题讨论】：

使用表格视图和 2 个包含左右内容的单元格。它不仅仅是标签，还有图像和时间标签。
@Bista 我想将时间标签与单个单元格中的图像对齐
@Arunkrishna 我想实现与您在问题中提到的完全相同的事情。你找到解决办法了吗？

标签： ios swift uilabel chat

【解决方案1】：

尝试使用类似这样的方法来定义最后一行的宽度（也许您需要根据自己的情况对文本容器进行更多调整）：

public func lastLineMaxX(message: NSAttributedString, labelWidth: CGFloat) -> CGFloat {
    // Create instances of NSLayoutManager, NSTextContainer and NSTextStorage
    let labelSize = CGSize(width: bubbleWidth, height: .infinity)
    let layoutManager = NSLayoutManager()
    let textContainer = NSTextContainer(size: labelSize)
    let textStorage = NSTextStorage(attributedString: message)

    // Configure layoutManager and textStorage
    layoutManager.addTextContainer(textContainer)
    textStorage.addLayoutManager(layoutManager)

    // Configure textContainer
    textContainer.lineFragmentPadding = 0.0
    textContainer.lineBreakMode = .byWordWrapping
    textContainer.maximumNumberOfLines = 0

    let lastGlyphIndex = layoutManager.glyphIndexForCharacter(at: message.length - 1)
    let lastLineFragmentRect = layoutManager.lineFragmentUsedRect(forGlyphAt: lastGlyphIndex,
                                                                  effectiveRange: nil)

    return lastLineFragmentRect.maxX
}

然后您可以决定最后一行是否有足够的位置放置您的日期标签

用法示例：

// you definitely have to set at least the font to calculate the result
// maybe for your case you will also have to set other attributes
let attributedText = NSAttributedString(string: self.label.text, 
                                        attributes: [.font: self.label.font])
let lastLineMaxX = lastLineMaxX(message: attributedText, 
                                labelWidth: self.label.bounds.width)

【讨论】：

这不是返回最后一行的宽度。它返回所有单词的总宽度
@Arunkrishna 你是怎么检查的？我肯定它会返回最后一行的宽度。我尝试使用 UILabel 在此函数计算的坐标处将黑线置于其上方，并且该线正好位于最后一行文本中的最后一个符号的后面。我在答案末尾添加了用法示例。希望这可以帮助
我的标签宽度不是固定的。我认为这就是对我造成问题的原因。感谢回复
@Arunkrishna 欢迎您。我不认为只在 NIB 文件中设置一些约束就可以设置这样的布局。所以你必须计算代码中单元格的大小。并且要计算单元格的大小，您可能会根据其最大宽度计算文本的大小。之后，您将知道标签宽度，这将让您计算最后一行的宽度，进而让您决定是否有足够的空间放置日期标签，或者您必须扩展单元格高度才能将日期标签放在消息下方

【解决方案2】：

将 Swift 转换为 Objective-C

- (void)lastlineWidth {

    NSDictionary *attrsDictionary = [NSDictionary dictionaryWithObject:self.label.font forKey:NSFontAttributeName];

    NSAttributedString *message = [[NSAttributedString alloc] initWithString:self.label.text attributes:attrsDictionary];

    CGSize labelSize = CGSizeMake(self.label.bounds.size.width, INFINITY);
    NSLayoutManager *layoutManager = [[NSLayoutManager alloc] init];
    NSTextContainer *textContainer = [[NSTextContainer alloc] initWithSize:labelSize];
    NSTextStorage *textStorage = [[NSTextStorage alloc] initWithAttributedString:message];

    [layoutManager addTextContainer:textContainer];
    [textStorage addLayoutManager:layoutManager];

    textContainer.lineFragmentPadding = 0.0;
    textContainer.lineBreakMode = NSLineBreakByWordWrapping;
    textContainer.maximumNumberOfLines = 0;

    NSInteger lastGlyphIndex = [layoutManager glyphIndexForCharacterAtIndex:message.length-1];

    CGRect lastLineRect = [layoutManager lineFragmentUsedRectForGlyphAtIndex:lastGlyphIndex effectiveRange:nil];

    NSLog(@"lastLineWidth = %f", lastLineRect.size.width);
}

【讨论】：