質問編集履歴

ソースコードの追加

2021/01/29 10:50

投稿

popai306

スコア157

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,15 +10,15 @@
 チャットメッセージを表示するための`ChatMessageCell`は`UILabel`+`AutoLayout`をつかっているため、
-描画領域外のCellの高さを事前に計算できておらずスクロール時に描画計算するためスクロールがカクつく。
+描画領域外のCellの高さを事前に計算できておらずスクロール時に描画計算するためスクロールがカクつくのではないかと考えています。
 ### 試したこと
-`UICollectionView`の`isPrefetchingEnabled`を`true`にすることで、
+`UICollectionView`の`isPrefetchingEnabled`を`true`にしましたが、
-多少スムーズにスクロールできるようになりましたがそれでもカクつきます。。
+改善はされませんでした。
@@ -97,3 +97,337 @@
 }
 ```
+```ChatMessageViewController
+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()
+    }
+}
+```
+```ChatMessageView
+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)
+    }
+}
+```