iOS CollectionView实现消息底部加载的变换失效问题

你之前用变换CollectionView和单元格的方法容易踩坑，因为这种手动反转的方式会和系统的布局逻辑冲突，尤其是插入新单元格时，CollectionView的内部布局计算会混乱，导致单元格显示异常。下面给你两种更稳定的解决方案，都是从布局层面入手，完美适配WhatsApp/Telegram的消息展示效果：

方法一：自定义FlowLayout（推荐，最稳定） #

直接自定义UICollectionViewFlowLayout，让布局逻辑本身就把单元格从底部往上排列，从根源解决问题，适配所有场景（包括插入新消息、屏幕旋转、自适应高度cell）。

步骤1：创建自定义布局类 #

class BottomAlignedFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect) else {
            return nil
        }
        
        // 复制属性避免修改原对象（系统要求）
        let attributes = originalAttributes.map { $0.copy() as! UICollectionViewLayoutAttributes }
        
        // 计算内容总高度和CollectionView可视高度
        let contentHeight = collectionViewContentSize.height
        let collectionViewHeight = collectionView?.bounds.height ?? 0
        
        // 计算顶部偏移量：当内容高度小于视图高度时，让内容靠底部；否则偏移为0
        let topOffset = max(0, collectionViewHeight - contentHeight)
        
        // 调整每个单元格的Y坐标，实现从底部往上排列
        attributes.forEach { attr in
            attr.frame = CGRect(
                x: attr.frame.origin.x,
                y: topOffset + contentHeight - attr.frame.maxY,
                width: attr.frame.width,
                height: attr.frame.height
            )
        }
        
        return attributes
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        // 当视图边界变化时（比如旋转、插入单元格），重新计算布局
        return true
    }
}

步骤2：使用自定义布局初始化CollectionView #

// 初始化布局
let bottomLayout = BottomAlignedFlowLayout()
bottomLayout.itemSize = CGSize(width: view.bounds.width, height: UITableView.automaticDimension)
bottomLayout.minimumLineSpacing = 8 // 消息之间的间距
// 如果是自适应高度cell，记得设置estimatedItemSize
bottomLayout.estimatedItemSize = CGSize(width: view.bounds.width, height: 100)

// 创建CollectionView
let messageCollectionView = UICollectionView(
    frame: view.bounds,
    collectionViewLayout: bottomLayout
)
messageCollectionView.register(MessageCell.self, forCellWithReuseIdentifier: "MessageCell")
messageCollectionView.dataSource = self
view.addSubview(messageCollectionView)

方法二：动态调整ContentInset和滚动位置（适合简单场景） #

如果不想自定义布局，可以在每次更新数据源后，通过调整contentInset或滚动到底部来实现底部对齐。这种方法适合消息数量不多、布局简单的场景。

示例代码（插入新消息时调用） #

func addNewMessage(_ message: Message) {
    messages.append(message)
    let newIndexPath = IndexPath(item: messages.count - 1, section: 0)
    
    collectionView.performBatchUpdates({
        self.collectionView.insertItems(at: [newIndexPath])
    }) { [weak self] finished in
        guard let self = self, finished else { return }
        
        let contentHeight = self.collectionView.contentSize.height
        let collectionViewHeight = self.collectionView.bounds.height
        
        if contentHeight > collectionViewHeight {
            // 内容超过视图高度，自动滚动到底部显示新消息
            self.collectionView.scrollToItem(
                at: newIndexPath,
                at: .bottom,
                animated: true
            )
        } else {
            // 内容不足，调整顶部inset让内容靠底部
            let topInset = collectionViewHeight - contentHeight
            self.collectionView.contentInset = UIEdgeInsets(
                top: topInset,
                left: 0,
                bottom: 0,
                right: 0
            )
        }
    }
}

为什么之前的变换方法不行？ #

直接给CollectionView设置transform = CGAffineTransform(scaleX: 1, y: -1)，再反转单元格的方式，会导致：

• CollectionView的contentOffset计算逻辑颠倒，插入新单元格时系统计算的位置和实际显示位置冲突
• 单元格的交互事件（比如点击、长按）的响应区域会出现偏移
• 自适应高度的单元格计算会出现错误

所以不推荐这种hack式的做法，还是用布局层面的解决方案更可靠。

内容的提问来源于stack exchange，提问作者Andrew