如何减少 CollectionView 中的垂直间距答案

【问题标题】：how to reduce vertical spacing in UICollection View如何减少 CollectionView 中的垂直间距
【发布时间】：2021-03-01 09:55:29
【问题描述】：

我正在使用UICollectionView 下面是我的代码，如何删除垂直间距？我尝试设置UICollectionViewFlowLayout，但没有成功。

class ViewController: UIViewController {
    
    @IBOutlet weak var cv: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
        let xx : CGFloat = (UIScreen.main.bounds.width / 8)
        let yy : CGFloat = 6.0
        layout.itemSize = CGSize(width: xx, height: yy)
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 1
        cv!.collectionViewLayout = layout
    }
}

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 70
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if (indexPath.row/2 == 0) {
            cell.backgroundColor = UIColor.blue.withAlphaComponent(12)
        }
        else if (indexPath.row/4 == 0) {
            cell.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
        }
        else{
            cell.backgroundColor = UIColor.blue.withAlphaComponent(0.1)
        }
        return cell
    }
}

【问题讨论】：

标签： ios swift uicollectionview uicollectionviewcell

【解决方案1】：

在您的情况下，间距是由每个项目的尺寸 - 宽度，主要是 - 引起的。

所以你有这个代码来计算你的单项宽度：

let xx : CGFloat = (UIScreen.main.bounds.width / 8)

但是由于您有部分插图，因此您的计算必须更改，或者您必须删除插图，因此：

let xx : CGFloat = (UIScreen.main.bounds.width - 10 / 8)
// 10 = 5 left + 5 right is taken for section insets

或者，删除您的部分插图：

// layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)

如果您想提供前导/尾随边距，请改用集合约束，即将collectionView 约束到它的超级视图的leadingAnchor/ trailingAnchor 并带有常量（比如5），那么您不必进行计算，因为您可以使用 sizeForItem 委托方法并以这种方式返回计算：

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.bounds.width / 8, height: 5.0)
 }

【讨论】：

【解决方案2】：

您可以使用UICollectionViewDelegateFlowLayout 协议和minimumInteritemSpacingForSectionAt 或minimumLineSpacingForSectionAt 函数，如下代码：

extension ViewController: UICollectionViewDelegateFlowLayout {
    
    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10 // or any value
    }
    
    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10 // or any value
    }
}

【讨论】：