レイアウトキットを使って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) 
    } 
}