求助：如何实现显示前后卡片边缘的UICollectionView卡片布局？

要实现目标中前后卡片边缘可见的横向卡片布局，你的代码存在三个核心问题：未设置横向滚动方向、开启了边界裁剪、section内边距计算逻辑错误。以下是具体修复方案：

修复步骤 #

1. 设置横向滚动方向 #

UICollectionView默认是垂直滚动，需将布局修改为横向滚动。在viewDidLoad中添加：

override func viewDidLoad() {
    super.viewDidLoad()

    self.colList.delegate = self
    self.colList.dataSource = self

    let nib = UINib(nibName: "CardCell", bundle: nil)
    self.colList.register(nib, forCellWithReuseIdentifier: "CardCell")
    
    // 设置横向滚动
    if let flowLayout = colList.collectionViewLayout as? UICollectionViewFlowLayout {
        flowLayout.scrollDirection = .horizontal
    }
}

2. 关闭边界裁剪 #

UICollectionView默认会裁剪超出自身边界的内容，导致前后卡片边缘被隐藏。关闭该属性：

// 在viewDidLoad中继续添加
colList.clipsToBounds = false

也可以直接在Storyboard中选中colList，取消勾选Clip Subviews选项。

3. 修正Section内边距 #

原内边距计算是针对垂直布局的居中逻辑，改为直接设置左右内边距为20，确保滚动时前后卡片能露出边缘：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
}

4. 调整卡片水平间距 #

横向滚动时，minimumInteritemSpacing控制卡片间的水平间距，设置为20让前后卡片露出更多：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 20
}

同时保持minimumLineSpacing为0即可（垂直方向无间距需求）。

完整修改后代码 #

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var colList : UICollectionView!
    
    var arrData = [1,2,3]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.colList.delegate = self
        self.colList.dataSource = self

        let nib = UINib(nibName: "CardCell", bundle: nil)
        self.colList.register(nib, forCellWithReuseIdentifier: "CardCell")
        
        // 设置横向滚动
        if let flowLayout = colList.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.scrollDirection = .horizontal
        }
        // 关闭边界裁剪
        colList.clipsToBounds = false
    }
}

extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate , UICollectionViewDelegateFlowLayout{
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrData.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CardCell", for: indexPath) as? CardCell
        cell?.setUpData(data: "\(indexPath.row)")
        return cell ?? UICollectionViewCell()
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: (collectionView.frame.width) - 40 , height: collectionView.frame.height)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

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