Как создать настраиваемую ячейку чата из XIB с всплывающим сообщением в MessageKit - PullRequest
Новая
       57

Как создать настраиваемую ячейку чата из XIB с всплывающим сообщением в MessageKit

0 голосов
/ 09 июля 2019

Я хочу создать следующий пользовательский пузырь чата, используя MessageKit

enter image description here

Я использую пример CustomCell в предоставленном образце.Но это не добавляет фон пузыря чата и его позиционирование на основе типа отправителя.

Как создать пользовательскую ячейку с тем же фоном пузыря чата?

1 Ответ

0 голосов
/ 23 июля 2019

Создание пользовательской ячейки с помощью MessageKit

Чтобы создать собственную ячейку, вы должны создать ячейку, которая наследуется от UICollectionViewCell. Как только у вас будет ваша клетка, вам нужно указать ее размер. Как можно это сделать?

Вы должны создать класс, который наследуется от MessageSizeCalculator или CellSizeCalculator, чтобы создать калькулятор нестандартного размера ячейки

Вы должны создать класс, наследуемый от MessagesCollectionViewFlowLayout, и добавить калькулятор нестандартного размера, который будет вычислять размер вашей ячейки.

Вы должны переопределить два метода для достижения этого:

  • messageSizeCalculators() чтобы добавить свой калькулятор размера ячейки
  • cellSizeCalculatorForItem(at indexPath: IndexPath) для выбора ячейки, в которой вы будете использовать свой калькулятор ячейки

Вы можете увидеть этот пример из основной ветки: 

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

}

Вы можете взглянуть на эту проблему на GitHub

Создание ячейки на основе MessageBubble с MessageKit

MessageContentCell - это класс, используемый MessageKit для отображения вашего сообщения в чате чата

Вы можете создать ячейку, просто расширив этот класс: 

import MessageKit
import UIKit

open class CustomCell: MessageContentCell {

     open override func configure(with message: MessageType, at indexPath: IndexPath, and messagesCollectionView: MessagesCollectionView) {
         super.configure(with: message, at: indexPath, and: messagesCollectionView)


      }

     override open func layoutAccessoryView(with attributes: MessagesCollectionViewLayoutAttributes) {
         // Accessory view is always on the opposite side of avatar
     }


  }

Если вы хотите расширить другие Ячейки

...