求助：UICollectionViewCell内部内容位置显示异常的原因排查

我来帮你分析下这个问题，你遇到的UICollectionViewCell内容位置偏移，核心原因是直接硬编码修改cell和子视图的frame这种方式不符合UICollectionView的布局逻辑，咱们一步步来修复：

问题根源拆解 #

1. UICollectionView的cell尺寸是由你设置的UICollectionViewFlowLayout自动管理的，手动修改self.frame会和布局系统冲突，导致cell尺寸混乱。
2. 你直接基于self.frame.origin.x/y计算子视图位置，但cell复用的时候，self.frame.origin的值并不是固定的（比如滚动后复用的cell位置已经变化），这会导致子视图位置完全错位。
3. 子视图应该添加到cell的contentView上，而不是直接作为cell的子视图——contentView是UICollectionViewCell专门用来承载内容的容器，会自动处理选中、高亮等状态的布局适配。

具体修复步骤 #

1. 移除cell中手动设置frame的代码 #

删掉Cell类里这段代码：

self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: width, height: width)

因为UICollectionViewFlowLayout已经通过itemSize指定了cell的尺寸，不需要手动修改。

2. 改用AutoLayout约束子视图（推荐方案） #

放弃硬编码frame，给每个子视图添加AutoLayout约束，这样布局会自动适配cell的尺寸变化。示例代码如下：

首先，在Cell的初始化方法（或者awakeFromNib）中设置子视图的约束：

class DevicesCollectionViewCell: UICollectionViewCell {
    let stateImageView = UIImageView()
    let lightImageView = UIImageView()
    let sensImageView = UIImageView()
    let humdityImageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupSubviews()
    }

    private func setupSubviews() {
        // 把所有子视图添加到contentView
        [stateImageView, lightImageView, sensImageView, humdityImageView].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview($0)
        }

        // 设置stateImageView约束：右上角，宽高为cell宽度的1/3
        NSLayoutConstraint.activate([
            stateImageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            stateImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            stateImageView.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 1/3),
            stateImageView.heightAnchor.constraint(equalTo: stateImageView.widthAnchor)
        ])

        // 设置lightImageView约束：左上角，间距10，宽高为cell宽度的1/3
        NSLayoutConstraint.activate([
            lightImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            lightImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            lightImageView.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 1/3),
            lightImageView.heightAnchor.constraint(equalTo: lightImageView.widthAnchor)
        ])

        // 设置sensImageView约束：左上角，间距10，宽高为cell宽度的1/5
        NSLayoutConstraint.activate([
            sensImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            sensImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            sensImageView.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 1/5),
            sensImageView.heightAnchor.constraint(equalTo: sensImageView.widthAnchor)
        ])

        // 设置humdityImageView约束：在sensImageView下方，间距15，宽高为cell宽度的1/5
        NSLayoutConstraint.activate([
            humdityImageView.topAnchor.constraint(equalTo: sensImageView.bottomAnchor, constant: 15),
            humdityImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            humdityImageView.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 1/5),
            humdityImageView.heightAnchor.constraint(equalTo: humdityImageView.widthAnchor)
        ])
    }

    // 现在setDeviceInfoInCell只需要设置数据，不需要管布局
    func setDeviceInfoInCell(device: Device, roomName: String) {
        // 这里只处理图片、文字等数据赋值，比如：
        // stateImageView.image = device.stateImage
        // lightImageView.image = device.lightImage
        // ...其他数据设置
    }
}

3. 修改代理方法中的调用 #

因为现在不需要传width参数了，所以代理方法里的代码可以简化：

if let deviceCell = cell as? DevicesCollectionViewCell, let devices = room?.devices, let roomName = room?.roomName {
    deviceCell.setDeviceInfoInCell(device: devices[indexPath.item], roomName: roomName)
}

4. 可选：如果坚持用frame布局（不推荐） #

如果一定要用frame，那应该在layoutSubviews方法里计算，并且基于contentView.bounds来计算，而不是self.frame：

override func layoutSubviews() {
    super.layoutSubviews()
    let width = contentView.bounds.width
    stateImageView.frame = CGRect(x: contentView.bounds.width - (width/3), y: 0, width: width/3, height: width/3)
    lightImageView.frame = CGRect(x: 10, y: 10, width: width/3, height: width/3)
    sensImageView.frame = CGRect(x: 10, y: 10, width: width/5, height: width/5)
    humdityImageView.frame = CGRect(x: 10, y: sensImageView.frame.size.height + 15, width: width/5, height: width/5)
}

不过这种方式还是不如AutoLayout灵活，尤其是屏幕旋转或者cell尺寸变化时，需要手动处理布局更新。

额外注意点 #

• 确保所有子视图都添加到contentView上，而不是cell本身，否则会出现选中状态下内容偏移的问题。
• 不要在setDeviceInfoInCell里修改布局，这个方法只负责数据赋值，布局逻辑应该放在cell的布局生命周期方法里（比如layoutSubviews）或者用AutoLayout约束。

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