iOS开发：如何实现根据cell数量动态调整自身宽度的横向UICollectionView

核心思路 #

• 自定义UICollectionView，重写intrinsicContentSize，让其可以根据内容大小自动计算自身宽度
• 移除collectionView的固定宽度约束，替换为最大宽度限制，避免内容过多时超出屏幕范围
• 原有按钮绑定collectionView trailing锚点的逻辑不需要修改，会随collectionView宽度变化自动同步偏移

具体实现步骤 #

第一步：自定义自适应宽度的UICollectionView #

新建类继承自UICollectionView，处理内在尺寸的自动计算：

class AutoWidthHorizontalCollectionView: UICollectionView {
    override var intrinsicContentSize: CGSize {
        // 直接取内容实际宽度作为自身内在宽度，高度保持固定80
        return CGSize(width: contentSize.width, height: 80)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 每次布局变化时通知系统重新计算内在尺寸
        invalidateIntrinsicContentSize()
    }
}

第二步：替换原有CollectionView类型 #

修改你原有代码中collectionView的初始化逻辑，替换为自定义类：

lazy var collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    layout.minimumLineSpacing = 8
    // 替换为自定义的AutoWidthHorizontalCollectionView
    let collectionView = AutoWidthHorizontalCollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.register(ImagesCollectionViewCell.self, forCellWithReuseIdentifier: ImagesCollectionViewCell.reuseIdentifier)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    // 如果不需要内容超出后滚动，可打开下面注释
    // collectionView.isScrollEnabled = false
    return collectionView
}()

第三步：调整约束配置 #

删除原有collectionView的固定宽度约束，新增最大宽度限制：

// viewDidLoad中原有写死宽度的约束修改为：
collectionView.anchor(top: top.bottomAnchor, leading: view.leadingAnchor, paddingTop: 20, height: 80)
// 新增最大宽度限制，避免内容过多超出屏幕，-72可根据你的边距需求调整
collectionView.widthAnchor.constraint(lessThanOrEqualTo: view.widthAnchor, constant: -72).isActive = true

第四步：数据更新后刷新集合视图 #

在handleAddImage新增图片的方法中，修改完数据源后调用reloadData即可自动触发宽度更新：

@objc func handleAddImage() {
    // 你的新增数据源逻辑写在这里
    yourImageArray.append(newImage)
    // 刷新集合视图，自动触发宽度重算
    collectionView.reloadData()
}

效果说明 #

• 单张cell时，collectionView宽度为cell宽度加对应边距，按钮紧贴在trailing位置
• 新增cell后，collectionView宽度自动按内容增加，按钮同步右移
• 当cell数量过多、内容宽度达到最大限制时，collectionView宽度不再增加，内部可横向滑动浏览

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