我尝试使用 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/