如何为CollectionView聊天界面的每个消息单元格显示时间（附代码片段）

没问题，我来一步步帮你把时间显示功能加上去。咱们从基础准备到逻辑完善一步步来：

1. 给消息单元格添加时间标签 #

首先得确保你的ChatMessageCollectionViewCell里有一个用来显示时间的UILabel，可以命名为timeLabel。你可以选两种方式创建：

• Storyboard/XIB方式：拖一个UILabel到消息气泡的下方，设置好约束（比如和气泡底部对齐，左右根据消息类型调整），然后关联到cell类中。
• 纯代码方式：在cell的初始化方法里创建这个label并设置布局：

class ChatMessageCollectionViewCell: UICollectionViewCell {
    // 假设你已经有了显示消息内容的label（比如messageLabel）
    let timeLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 12)
        label.textColor = .gray
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(timeLabel)
        // 设置基础约束，后续根据消息类型调整左右对齐
        NSLayoutConstraint.activate([
            timeLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4),
            timeLabel.heightAnchor.constraint(equalToConstant: 16)
        ])
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        // 如果用XIB/Storyboard，这里也可以初始化timeLabel并添加约束，或者直接在界面上拖入配置
    }
    
    // 完善你的configure方法
    func configure(with message: ChatMessage) {
        // 先处理你原来的消息内容逻辑（比如给messageLabel赋值）
        // messageLabel.text = message.content
        
        // 处理时间显示逻辑
        let formattedTime = message.timestamp.formattedChatTime()
        timeLabel.text = formattedTime
        
        // 根据消息发送者调整时间标签对齐（自己发的消息右对齐，对方的左对齐）
        if message.isSentByCurrentUser {
            timeLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8).isActive = true
        } else {
            timeLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true
        }
    }
}

2. 给Date写扩展，实现人性化的时间格式化 #

为了让时间显示更符合聊天场景（比如今天显示HH:mm，昨天显示昨天 HH:mm，更早显示完整日期），我们给Date加一个扩展方法：

extension Date {
    func formattedChatTime() -> String {
        let calendar = Calendar.current
        let now = Date()
        
        // 判断是否是今天
        if calendar.isDateInToday(self) {
            let formatter = DateFormatter()
            formatter.dateFormat = "HH:mm"
            return formatter.string(from: self)
        }
        // 判断是否是昨天
        else if calendar.isDateInYesterday(self) {
            let formatter = DateFormatter()
            formatter.dateFormat = "HH:mm"
            let timeStr = formatter.string(from: self)
            return "昨天 \(timeStr)"
        }
        // 更早的日期显示完整格式
        else {
            let formatter = DateFormatter()
            formatter.dateFormat = "yyyy-MM-dd HH:mm"
            return formatter.string(from: self)
        }
    }
}

这里假设你的ChatMessage模型里有一个timestamp属性（类型为Date），如果你的时间是字符串类型，记得先转成Date再调用这个方法。

3. 原cellForItemAt方法无需修改 #

你原来的collectionView(_:cellForItemAt:)代码完全不用调整，因为我们把时间显示的逻辑都封装到了cell的configure方法里，保持了代码的职责分离，非常合理～

这样设置后，每条消息都会根据时间自动显示对应的格式化文本，而且对齐方式会匹配消息的发送者，完全符合聊天界面的常规设计。

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