如何使用MessageKit中的消息气泡从XIB创建自定义聊天单元

时间:2019-07-09 18:15:36

标签: ios swift chat messagekit

我想使用MessageKit

创建以下自定义聊天气泡

enter image description here

我在提供的示例中使用CustomCell示例。但这并没有添加基于发件人类型的聊天气泡背景和位置。

如何创建具有相同聊天气泡背景的自定义单元格?

2 个答案:

答案 0 :(得分:0)

使用MessageKit创建自定义单元格

要创建自定义单元格,必须创建一个继承自...的单元格。 有了单元格后,您需要告诉您单元格的大小。该怎么办呢?

您必须创建一个继承自UICollectionViewCellMessageSizeCalculator的类,以创建自定义像元大小计算器

您必须创建一个继承自CellSizeCalculator的类,并添加自定义大小计算器,以计算单元格的大小。

您必须重写两种方法才能实现这一目标:

  • MessagesCollectionViewFlowLayout添加自定义单元格大小计算器
  • messageSizeCalculators()选择要使用自定义单元格计算器的单元格

您可以从master分支中看到以下示例:

cellSizeCalculatorForItem(at indexPath: IndexPath)

您可以看看此issue on GitHub

使用MessageKit创建基于MessageBubble的单元格

MessageContentCellMessageKit用来在聊天气泡中显示消息的类

您可以通过扩展此类来创建单元格:

open class CustomMessagesFlowLayout: MessagesCollectionViewFlowLayout {

    open lazy var customMessageSizeCalculator = CustomMessageSizeCalculator(layout: self)

    open override func cellSizeCalculatorForItem(at indexPath: IndexPath) -> CellSizeCalculator {
        let message = messagesDataSource.messageForItem(at: indexPath, in: messagesCollectionView)
        if case .custom = message.kind {
            return customMessageSizeCalculator
        }
        return super.cellSizeCalculatorForItem(at: indexPath)
    }

    open override func messageSizeCalculators() -> [MessageSizeCalculator] {
        var superCalculators = super.messageSizeCalculators()
        // Append any of your custom `MessageSizeCalculator` if you wish for the convenience
        // functions to work such as `setMessageIncoming...` or `setMessageOutgoing...`
        superCalculators.append(customMessageSizeCalculator)
        return superCalculators
    }
}

open class CustomMessageSizeCalculator: MessageSizeCalculator {

    public override init(layout: MessagesCollectionViewFlowLayout? = nil) {
        super.init()
        self.layout = layout
    }

    open override func sizeForItem(at indexPath: IndexPath) -> CGSize {
        guard let layout = layout else { return .zero }
        let collectionViewWidth = layout.collectionView?.bounds.width ?? 0
        let contentInset = layout.collectionView?.contentInset ?? .zero
        let inset = layout.sectionInset.left + layout.sectionInset.right + contentInset.left + contentInset.right
        return CGSize(width: collectionViewWidth - inset, height: 44)
    }

}

如果要扩展其他Cells

答案 1 :(得分:0)

他们当前已更新其文档,以包括如何添加自定义单元格。在这里检查 Read more about custom cells