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