使用UICollectionViewCompositionalLayout实现设备适配布局遇问题求助

问题描述 #

需求为iPad上并排显示条目、iPhone上逐行显示，但使用UICollectionViewCompositionalLayout实现时出现布局拥挤压缩的问题，原代码如下：

//Configure the layout of the elements based on the device size
private func layout() -> UICollectionViewCompositionalLayout {
    
    let layout = UICollectionViewCompositionalLayout { [weak self] sectionIndex, environment -> NSCollectionLayoutSection? in
        guard let self = self else { return nil }
        
        let itemSize = NSCollectionLayoutSize (
            widthDimension: .fractionalWidth(0.2),
            heightDimension: .estimated(400)
        )
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize (
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(400)
        )
        //Not only on iPad but also this works on phone's landscape in this way
        let columns = (environment.container.contentSize.width > 500 && self.toggleSwitch.isOn) ? 2 : 1
        
        //Issue is here 
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, repeatingSubitem: item, count: columns)

        
        group.interItemSpacing = .fixed(20)
        
        if columns > 1 {
            group.contentInsets.leading = 20
            group.contentInsets.trailing = 20
        }
        
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 20
        section.contentInsets.top = 20
        
        return section
    }
    
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.interSectionSpacing = 50
    layout.configuration = config
    
    return layout
}

核心问题 #

1. Item宽度固定不合理：原代码中item的宽度固定为fractionalWidth(0.2)，无论列数是1还是2，都会导致单行显示时item仅占容器宽度的20%，视觉上拥挤；双行显示时item尺寸过窄，布局比例失衡。
2. 宽度计算未考虑间距和边距：多列模式下的group边距、item间距未被纳入宽度计算，导致实际布局超出预期空间，引发压缩。

修复方案 #

修改后的代码 #

private func layout() -> UICollectionViewCompositionalLayout {
    let layout = UICollectionViewCompositionalLayout { [weak self] sectionIndex, environment -> NSCollectionLayoutSection? in
        guard let self = self else { return nil }
        
        let baseSpacing: CGFloat = 20
        // 根据容器宽度和开关状态确定列数
        let columns = (environment.container.contentSize.width > 500 && self.toggleSwitch.isOn) ? 2 : 1
        
        // 配置group边距并计算可用宽度
        var groupContentInsets = NSDirectionalEdgeInsets()
        var availableWidth = environment.container.contentSize.width
        if columns > 1 {
            groupContentInsets.leading = baseSpacing
            groupContentInsets.trailing = baseSpacing
            availableWidth -= groupContentInsets.leading + groupContentInsets.trailing
        }
        
        // 计算item相对宽度：扣除item间距后平均分配可用空间
        let totalItemSpacing = baseSpacing * CGFloat(columns - 1)
        let itemRelativeWidth = (availableWidth - totalItemSpacing) / availableWidth / CGFloat(columns)
        
        // 构建item尺寸
        let itemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(itemRelativeWidth),
            heightDimension: .estimated(400)
        )
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        // 构建group尺寸
        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(400)
        )
        
        // 创建横向group并设置间距、边距
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, repeatingSubitem: item, count: columns)
        group.interItemSpacing = .fixed(baseSpacing)
        group.contentInsets = groupContentInsets
        
        // 配置section
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = baseSpacing
        section.contentInsets.top = baseSpacing
        
        return section
    }
    
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.interSectionSpacing = 50
    layout.configuration = config
    
    return layout
}

关键修改点 #

1. 动态计算item宽度：根据列数、容器可用宽度、item间距，动态计算item的相对宽度，确保items能均匀填充group的可用空间，避免固定宽度导致的拥挤问题。
2. 统一间距常量：将所有间距相关数值统一为baseSpacing，减少硬编码重复，便于后续维护。
3. 纳入边距计算：多列模式下，先扣除group的左右边距再计算item宽度，保证布局整体比例协调。
4. 优化逻辑顺序：先确定列数和边距配置，再计算item尺寸，逻辑更清晰易读。

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