swift - 如何使用layoutkit构建whatsapp时间戳布局？

Question

我尝试使用 layoutKit 构建此消息气泡布局。我正在使用 stackLayout 来构造它，但它无法呈现时间戳和消息的动态位置。时间戳将水平放置在堆栈中，但如果消息较长，时间戳将垂直放置在堆栈中。

谁能告诉我如何构造这个布局？

class LayoutSample1: SizeLayout<View> {
    init(messageLayout: Layout, timeStampLayout: Layout) {

        let stackLayout = StackLayout(
            axis: .vertical,
            distribution: .fillFlexing,
            sublayouts: [messageLayout, timeStampLayout],
            config: { view in
                view.backgroundColor = UIColor.orange
        })

        super.init(
            sublayout: stackLayout,
            config: { view in
                view.backgroundColor = UIColor.yellow
        })
    }
}


class TimestampLayout: LabelLayout<UILabel> {

    init(text: String) {

        super.init(
            text: Text.unattributed(text),
            font: UIFont.systemFont(ofSize: 12),
            numberOfLines: 0,
            alignment: .bottomTrailing,
            config: { label in
                label.backgroundColor = UIColor.red
        })
    }
}

class MessageLayout: LabelLayout<UILabel> {
    init(text: String) {
        super.init(
            text: Text.unattributed(text),
            font: UIFont.systemFont(ofSize: 14),
            numberOfLines: 0,
            alignment: .topLeading,
            config: { label in
                label.backgroundColor = UIColor.red
        })
    }
}

Answer 1

1. 虽然 StackLayout 的子布局应该是不相交的矩形，这应该更容易使用 OverlayLayout相反。

2. 您必须考虑消息的最后一行与时间戳重叠的情况。要解决这个问题，您可以像完成一样手动布置字符串 here .另一种方法是在消息中附加一些空白字符。我发现 UIKit 不会修剪 Braille pattern blank符号 (U+2800)，所以它可以附加在最后。

例子如下:

class LayoutSample1: SizeLayout<View> {

    init(message: String, timeStamp: String, maxWidth: CGFloat = 200) {
        let messageLayout = InsetLayout(
            inset: 4,
            sublayout: LabelLayout(
                text: message + "\u{2003}\u{2003}\u{2800}",
                font: UIFont.systemFont(ofSize: 14)) {
                    $0.backgroundColor = UIColor.red
            }
        )

        let timeStampLayout = LabelLayout(
            text: timeStamp,
            font: UIFont.systemFont(ofSize: 12),
            alignment: .bottomTrailing) {
                $0.backgroundColor = UIColor.red
        }

        let rootlayout = OverlayLayout(
            primary: messageLayout,
            overlay: [timeStampLayout]) {
                $0.backgroundColor = UIColor.yellow
        }

        super.init(maxWidth: maxWidth, sublayout: rootlayout)
    }
}