如何使用layoutkit構建whatsapp時間戳佈局？

我嘗試使用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 
     }) 
    } 
}

來源

2017-03-01 Jason Chan

雖然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) 
    } 
}

來源

2017-08-13 23:14:46

如何使用layoutkit構建whatsapp時間戳佈局？

回答

相關問題