我已经在其中构建了自定义单元格,Interface Builder
并且正在尝试将其沿其他MessageKit
单元格(主要是简单的文本单元格)显示。
然后我计算了它的大小:
open class CustomMessagesFlowLayout: MessagesCollectionViewFlowLayout {
open lazy var customMessageSizeCalculator = CustomMessageSizeCalculator(layout: self)
open override func cellSizeCalculatorForItem(at indexPath: IndexPath) -> CellSizeCalculator {
if isSectionReservedForTypingIndicator(indexPath.section) {
return typingIndicatorSizeCalculator
}
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: 312)
}
}
所以它现在有固定的高度,但这很好。它显示得非常好,就像我希望它看起来一样,但它似乎以某种方式破坏了传入的消息头像及其底部标签。我在 3D 视图和头像视图中检查了这一点,只是丢失了。此外,如果我不使用 .Custom 类型的消息(从 nib 加载),传入消息的头像会完美显示。
我像这样初始化布局(viewDidLoad()):
messagesCollectionView = MessagesCollectionView(frame: .zero, collectionViewLayout: CustomMessagesFlowLayout())
messagesCollectionView.register(UINib(nibName: Constants.Chat.kCustomCellID, bundle: .main), forCellWithReuseIdentifier: Constants.Chat.kCustomCellID)
我像这样设置集合视图:
func configureMessageCollectionView() {
let layout = messagesCollectionView.collectionViewLayout as? MessagesCollectionViewFlowLayout
layout?.sectionInset = UIEdgeInsets(top: 1, left: 8, bottom: 1, right: 8)
// Hide the outgoing avatar and adjust the label alignment to line up with the messages
layout?.setMessageOutgoingAvatarSize(.zero)
layout?.setMessageOutgoingMessageTopLabelAlignment(LabelAlignment(textAlignment: .right, textInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 8)))
layout?.setMessageOutgoingMessageBottomLabelAlignment(LabelAlignment(textAlignment: .right, textInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 8)))
// Set outgoing avatar to overlap with the message bubble
layout?.setMessageIncomingMessageTopLabelAlignment(LabelAlignment(textAlignment: .left, textInsets: UIEdgeInsets(top: 0, left: 18, bottom: outgoingAvatarOverlap, right: 0)))
layout?.setMessageIncomingAvatarSize(CGSize(width: 30, height: 30))
layout?.setMessageIncomingMessagePadding(UIEdgeInsets(top: -outgoingAvatarOverlap, left: -18, bottom: outgoingAvatarOverlap, right: 18))
layout?.setMessageIncomingAccessoryViewSize(CGSize(width: 30, height: 30))
layout?.setMessageIncomingAccessoryViewPadding(HorizontalEdgeInsets(left: 8, right: 0))
layout?.setMessageIncomingAccessoryViewPosition(.messageBottom)
layout?.setMessageOutgoingAccessoryViewSize(CGSize(width: 30, height: 30))
layout?.setMessageOutgoingAccessoryViewPadding(HorizontalEdgeInsets(left: 0, right: 8))
messagesCollectionView.messagesLayoutDelegate = self
messagesCollectionView.messagesDisplayDelegate = self
}
}
我有消息数据源:
lazy var messageList: [ChatMessage] = []
所以它的设置与 github 上的 MessageKit 示例应用程序非常相似。
我不确定我是否在这里遗漏了一些重要的东西,或者我以某种错误的方式使用了自定义尺寸计算器,这反过来又破坏了 UI/其他默认计算器的功能?
有什么提示吗?