如何为UICollectionView中不同类型聊天消息单元格设置对齐方式？

嗨，这个需求在聊天APP里太常见啦，我来给你分享几种靠谱的实现方式～

方案一：利用UICollectionViewDelegateFlowLayout代理（最简便） #

这种方法不需要自定义布局，直接通过代理方法控制每个item的内边距和尺寸，配合cell内部的内容对齐就能快速实现效果。

1. 设置代理
   先让你的ChatVC遵守UICollectionViewDelegateFlowLayout协议，记得把collectionView的delegate设为自身：

class ChatVC: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
        // 其他初始化逻辑
    }
}

2. 通过内边距控制对齐
   用collectionView(_:layout:insetForItemAt:)方法，根据消息的发送/接收类型设置不同的内边距，让item自然向对应方向对齐：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
    let message = messages[indexPath.item]
    if message.isSentByMe {
        // 自己发的消息：左边留大间距，右边留小间距，实现右对齐
        return UIEdgeInsets(top: 8, left: 60, bottom: 8, right: 16)
    } else {
        // 收到的消息：右边留大间距，左边留小间距，实现左对齐
        return UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 60)
    }
}

3. 限制消息气泡的最大宽度（可选）
   如果不想让消息气泡撑满屏幕，可以同时实现sizeForItemAt方法，计算文本所需的尺寸并限制最大宽度：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let message = messages[indexPath.item]
    // 这里假设你有一个计算文本尺寸的工具方法
    let maxTextWidth = view.bounds.width - 80 // 减去左右内边距总和
    let textSize = message.content.boundingRect(with: CGSize(width: maxTextWidth, height: CGFloat.greatestFiniteMagnitude),
                                               options: .usesLineFragmentOrigin,
                                               attributes: [.font: UIFont.systemFont(ofSize: 16)],
                                               context: nil).size
    // 加上气泡的内边距
    return CGSize(width: textSize.width + 32, height: textSize.height + 16)
}

4. Cell内部内容对齐
   在自定义的ChatCell里，根据消息类型调整气泡和文本的对齐方式，同时可以区分气泡颜色：

class ChatCell: UICollectionViewCell {
    @IBOutlet weak var messageBubble: UIView!
    @IBOutlet weak var messageLabel: UILabel!
    
    func configure(with message: Message) {
        messageLabel.text = message.content
        if message.isSentByMe {
            // 自己发的消息：文本右对齐，气泡靠右
            messageLabel.textAlignment = .right
            messageBubble.backgroundColor = .systemBlue
        } else {
            // 收到的消息：文本左对齐，气泡靠左
            messageLabel.textAlignment = .left
            messageBubble.backgroundColor = .systemGray5
        }
    }
}

方案二：自定义UICollectionViewFlowLayout（更灵活） #

如果你的聊天界面需要支持多种消息类型（比如图片、语音、文件），自定义布局会更灵活。重写layoutAttributesForElements(in:)方法，直接修改每个item的布局位置：

class ChatLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let baseAttributes = super.layoutAttributesForElements(in: rect) else { return nil }
        let collectionWidth = collectionView?.bounds.width ?? UIScreen.main.bounds.width
        
        for attributes in baseAttributes {
            guard let indexPath = attributes.indexPath else { continue }
            // 从数据源获取当前消息
            let message = (collectionView?.dataSource as? ChatVC)?.messages[indexPath.item]
            
            if message?.isSentByMe == true {
                // 自己发的消息：item右边缘贴紧collectionView右边缘，减去右边距
                attributes.frame.origin.x = collectionWidth - attributes.frame.width - 16
            } else {
                // 收到的消息：item左边缘贴紧collectionView左边缘，加上左边距
                attributes.frame.origin.x = 16
            }
        }
        return baseAttributes
    }
}

然后在ChatVC里替换默认布局：

override func viewDidLoad() {
    super.viewDidLoad()
    let customLayout = ChatLayout()
    customLayout.minimumLineSpacing = 8
    collectionView.collectionViewLayout = customLayout
    // 其他初始化逻辑
}

小提示 #

• 记得给collectionView设置contentInset，避免消息被导航栏、TabBar遮挡：collectionView.contentInset = UIEdgeInsets(top: 8, left: 0, bottom: 80, right: 0)
• 如果用AutoLayout布局cell内部控件，不用手动设置frame，只需要根据消息类型调整约束的优先级或constant值就行（比如发送消息时，气泡的right约束优先级高于left约束）

内容的提问来源于stack exchange，提问作者FS.O6