Swift实现UICollectionView各section的Cell分别在单列垂直展示

问题根因 #

你当前使用的默认UICollectionViewFlowLayout在垂直滚动模式下，默认按「水平填满一行后再垂直换行」的规则排布元素，加上你设置了cell宽度为屏幕宽度的1/4，因此单个section内的元素满4个就会自动换行，无法固定在同一列排列。

解决方案 #

方案1：实现4列并排，每列对应1个section（适配iOS13+，推荐） #

如果你的需求是4个section对应4个并列的列，每个列内的cell垂直排列、整体collectionView垂直滚动，使用UICollectionViewCompositionalLayout可以精准实现该效果，无需复杂自定义布局。

在viewDidLoad中添加布局初始化代码即可：

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.delegate = self
    collectionView.dataSource = self
    
    // 初始化组合布局
    let layout = UICollectionViewCompositionalLayout { sectionIndex, layoutEnvironment in
        // 定义单个cell的尺寸：宽度占当前列的100%，高度可根据需求调整，示例设为60
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(60))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        // 定义列的尺寸：宽度为屏宽的1/4（留边距），高度自适应内容
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.23), heightDimension: .estimated(500))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
        // 同列内cell的上下间距
        group.interItemSpacing = .fixed(8)
        // 定义section的边距
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 8, bottom: 10, trailing: 8)
        return section
    }
    // 设置滚动方向为垂直
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .vertical
    layout.configuration = config
    
    collectionView.collectionViewLayout = layout
    // 原有sizeForItemAt代理方法可以直接删除，尺寸已在布局中定义
}

方案2：实现单列布局，每个section为垂直块（适配全系统版本） #

如果你的需求是整个collectionView只有一列，4个section为上下排列的4个块，每个块内的cell垂直单列排布，直接修改原有布局参数即可：

1. 首先在viewDidLoad中配置FlowLayout：

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.delegate = self
    collectionView.dataSource = self
    
    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        // 同一行cell间距设为0，一行仅展示1个cell
        layout.minimumInteritemSpacing = 0
        // 同section内两个cell的上下间距，可自行调整
        layout.minimumLineSpacing = 8
        // section的上下左右边距
        layout.sectionInset = UIEdgeInsets(top: 15, left: 10, bottom: 15, right: 10)
        layout.scrollDirection = .vertical
    }
}

2. 修改sizeForItemAt代理中的cell尺寸：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // 宽度为屏宽减去左右边距，高度可根据需求调整，示例设为60
    return CGSize(width: view.frame.width - 20, height: 60)
}

内容的提问来源于stack exchange，提问作者SHAILENDRA KUMAR RAM