UICollectionViewのスクロールがカクついてしまう

Question

内容

collectionViewでチャットを実装しているのですが、
スクロールするとカクついてしまうので、スムーズにスクロールさせるための方法が知りたいです。

考えられる原因

チャットメッセージを表示するためのChatMessageCellはUILabel+AutoLayoutをつかっているため、
描画領域外のCellの高さを事前に計算できておらずスクロール時に描画計算するためスクロールがカクつくのではないかと考えています。

試したこと

UICollectionViewのisPrefetchingEnabledをtrueにしましたが、
改善はされませんでした。

ソース

class ChatMessageCell: UICollectionViewCell {
    
    static let reuseIdentifier = "chat-message-cell-reuse-identifier"
    
    let message = UILabel()
    var messageLeadingAnchor: NSLayoutConstraint! = nil
    var messageTrailingAnchor: NSLayoutConstraint! = nil
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        message.numberOfLines = 0
        message.preferredMaxLayoutWidth = UIScreen.screenWidth * 0.7
        contentView.addSubview(message)
        
        message.translatesAutoresizingMaskIntoConstraints = false
        message.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
        message.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
        messageLeadingAnchor = message.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
        messageTrailingAnchor = message.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
    }
    
    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
    
    func applyOutcomingStyle() {
        messageLeadingAnchor.isActive = false
        messageTrailingAnchor.isActive = true
    }
    
    func applyIncomingStyle() {
        messageLeadingAnchor.isActive = true
        messageTrailingAnchor.isActive = false
    }
}

import UIKit

class ChatMessageViewController: UIViewController {
    
    private var messages = [ChatThreadMessage]()
    private var messageListener: ListenerRegistration?
    
    enum Section { case main }
    var messageCollectionDataSource: UICollectionViewDiffableDataSource<Section, ChatThreadMessage>! = nil
    var currentMessageSnapShot = NSDiffableDataSourceSnapshot<Section, ChatThreadMessage>()
    
    private let viewer: User
    private let recipient: User
    
    private let v: ChatMessageView
    override func loadView() { view = v }
    
    init(user: User, recipient: User) {
        self.viewer = user
        self.recipient = recipient
        
        v = ChatMessageView()

        super.init(nibName: nil, bundle: nil)
        self.title = recipient.username
    }
    
    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configDataSource()
        configFirestore()
    }
}

// MARK: - Helpers

extension ChatMessageViewController {
    private func configDataSource() {
        messageCollectionDataSource = UICollectionViewDiffableDataSource<Section, ChatThreadMessage> (collectionView: v.collectionView) {
            [weak self] (collectionView: UICollectionView, indexPath: IndexPath, message: ChatThreadMessage) -> UICollectionViewCell? in
            guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ChatMessageCell.reuseIdentifier,
                                                                for: indexPath) as? ChatMessageCell else { return nil }
            cell.message.text = message.text
            if message.senderId == self?.viewer.userId {
                cell.applyOutcomingStyle()
            } else {
                cell.applyIncomingStyle()
            }
            return cell
        }
        currentMessageSnapShot.appendSections([.main])
    }
    
    private func configFirestore() {
        var shouldAnimateScrolling = false
        
        let chatRef = hoge
        self.messageListener = chatRef.addSnapshotListener {[weak self] querySnapshot, error in
            if let error = error {
                print("(error.localizedDescription)")
                return
            }
            
            guard let self = self, let snapshot = querySnapshot else { return }
            snapshot.documentChanges.forEach { change in
                if change.type == .added, let messageModel = try? change.document.data(as: ChatMessageModel.self) {
                    let chatMessage = ChatThreadMessage(model: messageModel)
                    self.currentMessageSnapShot.appendItems([chatMessage])
                }
            }
            
            self.messageCollectionDataSource.apply(self.currentMessageSnapShot, animatingDifferences: false) {
                [weak self] in
                self?.scrollToBottom(animated: shouldAnimateScrolling)
                shouldAnimateScrolling = true
            }
        }
    }
    
    private func scrollToBottom(animated: Bool = true) {
        guard let bottomMessage = currentMessageSnapShot.itemIdentifiers.last,
              let bottomIndexPath = messageCollectionDataSource.indexPath(for: bottomMessage) else { return }
        
        self.v.collectionView.scrollToItem(at: bottomIndexPath, at: .bottom, animated: animated)
    }
}

struct ChatThreadMessage: Hashable {
    let text: String
    let senderId: String
    let senderUsername: String
    let createdAt: Date
    
    init(model: ChatMessageModel) {
        text = model.content
        senderId = model.senderId
        senderUsername = model.senderUsername
        createdAt = model.createdAt?.dateValue() ?? Date()
    }
}

import UIKit

class ChatMessageView: UIView {
    
    var collectionView: UICollectionView! = nil
    
    init() {
        super.init(frame: .zero)
        cofigHierarchy()
        configConstraint()
    }

    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
}

extension NChatThreadView {
    private func cofigHierarchy() {
        collectionView = UICollectionView(frame: .zero, collectionViewLayout: createLayout())
        collectionView.isPrefetchingEnabled = true
        
        collectionView.contentInset.top = 10
        
        collectionView.register(ChatMessageCell.self, forCellWithReuseIdentifier: ChatMessageCell.reuseIdentifier)
        addSubview(collectionView)
    }
    
    private func configConstraint() {
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
    
    private func createLayout() -> UICollectionViewLayout {
        let sectionProvider = { (sectionIndex: Int,
            layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
            
            let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                              heightDimension: .estimated(44))
            let item = NSCollectionLayoutItem(layoutSize: size)
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)
            
            let section = NSCollectionLayoutSection(group: group)
            section.orthogonalScrollingBehavior = .none
            section.interGroupSpacing = 10
            section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 15,
                                                            bottom: 0, trailing: 15)
            return section
        }
        
        return UICollectionViewCompositionalLayout(sectionProvider: sectionProvider)
    }
}

Comments

[hoshi-takanori]

view controller のソースを見ないとなんとも言えません。

[popai306]

ソースコード追加しました＞＜