如何借助Flow Layout实现Collection View上下颠倒且不使用CGAffine Transform？

当然可以！不用任何变换操作，完全能通过自定义UICollectionViewFlowLayout实现这个需求——这对聊天场景来说特别合适，毕竟聊天消息本来就是新内容在底部，颠倒布局刚好适配这个逻辑。

核心思路 #

我们要做的不是翻转整个Collection View，而是翻转每个cell的布局位置，让原本从上到下排列的cell，变成从下到上排列。同时调整contentSize和contentOffset的计算，让滚动逻辑符合聊天场景的预期。

自定义Flow Layout实现代码 #

下面是完整的自定义布局类，直接就能用：

class ChatReverseFlowLayout: UICollectionViewFlowLayout {
    
    override func prepare() {
        super.prepare()
        // 强制设置滚动方向为垂直
        scrollDirection = .vertical
        // 如果是动态高度的聊天消息，打开下面这行自动计算高度
        // estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    }
    
    override var collectionViewContentSize: CGSize {
        guard let collectionView = collectionView else { return super.collectionViewContentSize }
        var contentSize = super.collectionViewContentSize
        // 确保contentSize高度不小于Collection View的可视高度，避免内容过少时无法填满屏幕
        contentSize.height = max(contentSize.height, collectionView.bounds.height)
        return contentSize
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect),
              let collectionView = collectionView else { return nil }
        
        // 遍历所有cell的布局属性，翻转它们的Y轴位置
        let reversedAttributes = originalAttributes.map { attributes in
            let copy = attributes.copy() as! UICollectionViewLayoutAttributes
            let originalY = attributes.frame.origin.y
            let itemHeight = attributes.frame.height
            // 计算翻转后的Y坐标：可视区域底部 - 原cell的底部Y坐标
            let reversedY = collectionView.bounds.height - (originalY + itemHeight)
            copy.frame = CGRect(
                x: attributes.frame.origin.x,
                y: reversedY,
                width: attributes.frame.width,
                height: itemHeight
            )
            return copy
        }
        
        return reversedAttributes
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        // 屏幕旋转或可视区域变化时，重新计算布局
        return true
    }
}

在聊天页面中使用这个布局 #

这里给出一个简单的ViewController示例，展示如何集成：

class ChatViewController: UIViewController {
    
    private var collectionView: UICollectionView!
    // 模拟聊天消息数据
    private var messages: [String] = (0..<20).map { "这是第\($0+1)条消息" }

    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
    }
    
    private func setupCollectionView() {
        let layout = ChatReverseFlowLayout()
        // 固定高度的消息可以直接设置itemSize，动态高度则注释掉下面这行
        layout.itemSize = CGSize(width: view.bounds.width, height: 60)
        layout.minimumLineSpacing = 10
        
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.register(ChatMessageCell.self, forCellWithReuseIdentifier: "ChatMessageCell")
        collectionView.dataSource = self
        collectionView.backgroundColor = .systemBackground
        // 关闭自动调整内边距，避免导航栏影响布局
        collectionView.contentInsetAdjustmentBehavior = .never
        view.addSubview(collectionView)
        
        // 初始滚动到底部，符合聊天页面打开时的预期
        DispatchQueue.main.async {
            self.collectionView.scrollToItem(at: IndexPath(item: 0, section: 0), at: .bottom, animated: false)
        }
    }
}

// 实现数据源协议
extension ChatViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return messages.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChatMessageCell", for: indexPath) as! ChatMessageCell
        cell.messageLabel.text = messages[indexPath.item]
        // 可以在这里区分自己和对方的消息样式（比如对齐方式、背景色）
        return cell
    }
}

// 自定义聊天消息Cell示例
class ChatMessageCell: UICollectionViewCell {
    let messageLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupSubviews() {
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.numberOfLines = 0
        messageLabel.font = .systemFont(ofSize: 16)
        contentView.addSubview(messageLabel)
        
        NSLayoutConstraint.activate([
            messageLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            messageLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            messageLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            messageLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
        
        contentView.backgroundColor = .lightGray
        contentView.layer.cornerRadius = 12
    }
}

关键注意事项 #

1. 动态高度适配：如果你的聊天消息是可变高度，记得打开estimatedItemSize = .automaticSize，并确保cell的约束能正确计算高度。
2. 新消息滚动：当添加新消息时，调用scrollToItem(at: IndexPath(item: newMessageIndex, section: 0), at: .bottom, animated: true)，就能让新消息自动滚动到屏幕底部。
3. 交互逻辑：这个方案只是翻转了布局位置，cell的点击、长按等交互逻辑完全不受影响，和正常布局一致。

这种方式比用CGAffineTransform更可靠，避免了变换带来的contentOffset混乱、动画异常等潜在问题，完全遵循UICollectionView的布局设计理念。

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