基于Telegram二次开发 --- 消息气泡：Message

2022-12-12  本文已影响0人  试图与自己和解

Bubbles（气泡）作为一种展示UI，几乎与我们工作生活密不可分；如果消息只是一段纯文本或一个图片，那就没什么可说的；但 Telegram 中的情况就很复杂，因为消息中的元素很多，比如文本、富文本、markdowm 文本、图片、相册、视频、文件、网页、位置等；因为一条消息可以包含多个任意类型的元素，所以它就显得更加复杂了。

本文将阐述 Telegram 如何在其异步 UI 框架上构建消息气泡。

1、Classes 概述

image.png

ChatControllerImpl 是管理用户消息聊天界面的核心控制器；它的内容控制器 ChatControllerNode 主要由以下 node 构成：

class ChatControllerNode: ASDisplayNode, UIScrollViewDelegate {
    ...
    let backgroundNode: WallpaperBackgroundNode  // background wallpaper
    let historyNode: ChatHistoryListNode // message list
    let loadingNode: ChatLoadingNode  // loading UI
    ...
    private var textInputPanelNode: ChatTextInputPanelNode? // text input
    private var inputMediaNode: ChatMediaInputNode? // media input
    
    let navigateButtons: ChatHistoryNavigationButtons // the navi button at the bottom right
}

public protocol ListViewItem {
    ...
    func nodeConfiguredForParams(
        async: @escaping (@escaping () -> Void) -> Void, 
        params: ListViewItemLayoutParams, 
        synchronousLoads: Bool, 
        previousItem: ListViewItem?, 
        nextItem: ListViewItem?, 
        completion: @escaping (ListViewItemNode, @escaping () -> (Signal<Void, NoError>?, (ListViewItemApply) -> Void)) -> Void
    )
}

2、List 倒置

聊天消息列表将最新消息放在底部，垂直滚动指示器也从底部开始；实际上，它是 iOS 上很常见的 list UI 倒置；

Telegram 使用 AsyncDisplayKit 里 ASTableNode 类似的 UI 变换伎俩；ChatHistoryListNode 利用 ASDisplayNode 的 transform 属性旋转了 180° ，因此它所有的 content node 也要被旋转。

// rotate the list node
public final class ChatHistoryListNode: ListView, ChatHistoryNode {
    public init(...) {
        self.transform = CATransform3DMakeRotation(CGFloat.pi, 0.0, 0.0, 1.0)
    }
}
// rotate content nodes
public class ChatMessageItemView: ListViewItemNode {
    public init(...) {
        self.transform = CATransform3DMakeRotation(CGFloat.pi, 0.0, 0.0, 1.0)
    }
}
final class ChatMessageShadowNode: ASDisplayNode {
    override init() {
        self.transform = CATransform3DMakeRotation(CGFloat.pi, 0.0, 0.0, 1.0)
    }
}
final class ChatMessageDateHeaderNode: ListViewItemHeaderNode {
    init() {
        self.transform = CATransform3DMakeRotation(CGFloat.pi, 0.0, 0.0, 1.0)
    }
}
...

以下屏幕截图演示了应用逐步被旋转后的样子：

image.png

3、ListView Items

public final class ChatMessageItem: ListViewItem, CustomStringConvertible {
    ...
    let chatLocation: ChatLocation
    let controllerInteraction: ChatControllerInteraction
    let content: ChatMessageItemContent
    ...
}

public enum ChatLocation: Equatable {
    case peer(PeerId)
}

public enum ChatMessageItemContent: Sequence {
    case message(
        message: Message, 
        read: Bool, 
        selection: ChatHistoryMessageSelection, 
        attributes: ChatMessageEntryAttributes)
    case group(
        messages: [(Message, Bool, ChatHistoryMessageSelection, ChatMessageEntryAttributes)])
}

public final class Message {
    ....
    public let author: Peer?
    public let text: String
    public let attributes: [MessageAttribute]
    public let media: [Media]
    ...
}

public protocol MessageAttribute: AnyObject, PostboxCoding { ... }

public protocol Media: AnyObject, PostboxCoding {
    var id: MediaId? { get }
    ...
}

Message 的实例始终有一个 text 条目和一些可选的 MessageAttribute；如果attributes 有 TextEntitiesMessageAttribute 条目，则可以通过 stringWithAppliedEntities 构造属性字符串；然后可以在 bubble 中展示富文本。

// For example, this one states the entities inside a text
public class TextEntitiesMessageAttribute: MessageAttribute, Equatable {
    public let entities: [MessageTextEntity]
}

public struct MessageTextEntity: PostboxCoding, Equatable {
    public let range: Range<Int>
    public let type: MessageTextEntityType
}

public enum MessageTextEntityType: Equatable {
    public typealias CustomEntityType = Int32
    
    case Unknown
    case Mention
    case Hashtag
    case Url
    case Email
    case Bold
    case Italic
    case Code
    ...
    case Strikethrough
    case BlockQuote
    case Underline
    case BankCard
    case Custom(type: CustomEntityType)
}

协议 Media 及其类的实现描述了一组丰富的媒体类型，如 TelegramMediaImage、TelegramMediaFile、TelegramMediaMap 等。

总而言之，Message 基本上是带有几个媒体附件的属性字符串，而ChatMessageItem 实际上是一组 Message 实例；这种设计可以灵活地表达复杂的消息内容并轻松的保持向后兼容；例如，将 grouped album 表示为具有多个消息的 item，而每个消息的媒体为 TelegramMediaImage。

4、Bubble Nodes

ChatMessageItem 实现 nodeConfiguredForParams 用数据匹配对应 bubble nodes；如果我们查看代码，会发现它对 item 结构有一些规定。

private func contentNodeMessagesAndClassesForItem(_ item: ChatMessageItem) -> [(Message, AnyClass, ChatMessageEntryAttributes)] {
    var result: [(Message, AnyClass, ChatMessageEntryAttributes)] = []
    ...
    outer: for (message, itemAttributes) in item.content {
        inner: for media in message.media {
            if let _ = media as? TelegramMediaImage {
                result.append((message, ChatMessageMediaBubbleContentNode.self, itemAttributes))
            } else if {...}
        }
        
        var messageText = message.text
        if !messageText.isEmpty ... {
            result.append((message, ChatMessageTextBubbleContentNode.self, itemAttributes))
        }
    }
    ...
}

5、Layout

image.png

bubble 的布局由 ListView 的异步布局机制驱动；上图显示了重点布局方法的调用流程；需要注意的一件事是 ListView 不会缓存布局结果。

参考资料：

上一篇 下一篇

猜你喜欢

热点阅读