swift - 如何使用layoutkit构造whatsapp时间戳布局?-LMLPHP
我尝试使用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
        })
    }
}

最佳答案

虽然StackLayout的子布局应该是不相交的矩形,但是使用OverlayLayout应该容易得多。
当消息的最后一行被时间戳重叠时,必须考虑这种情况。要解决这个问题,您可以手动布置字符串,就像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)
    }
}

关于swift - 如何使用layoutkit构造whatsapp时间戳布局?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42527628/

10-09 18:12
查看更多