iOS - 删除 UICollectionViewCell 之间的垂直空间

Question

我有一个UICollectionView，每行有三个单元格。除 iPhone SE 外，所有 iPhone 上的单元格之间都没有垂直间距。

iPhone SE 上的第二个和最后一个单元格之间大约有 1 点垂直间距。我不明白它来自哪里。如何摆脱它？

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let collection = ColorCollectionView(sectionHeadersPinToVisibleBounds: false)
        self.view.addSubview(collection)
        collection.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8).isActive = true
        collection.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 8).isActive = true
        collection.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -8).isActive  = true
        collection.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -8).isActive  = true
        collection.translatesAutoresizingMaskIntoConstraints = false
        
        let colors: [UIColor] = [.systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,
                                 .systemGray, .systemGray2, .systemGray3,]
        collection.colors = colors
    }
}



class ColorCollectionView: UICollectionView {
    var colors: [UIColor] = []
    
    var selectedColor: UIColor?
    
    var headerName: String?
    
    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
        self.backgroundColor = .clear
        self.register(ColorCollectionViewCell.self, forCellWithReuseIdentifier:ColorCollectionViewCell.identifier)
        self.dataSource = self
        self.delegate = self
    }
    
    convenience init(sectionHeadersPinToVisibleBounds: Bool) {
        let layout = UICollectionViewFlowLayout()
        layout.sectionHeadersPinToVisibleBounds = sectionHeadersPinToVisibleBounds
        layout.scrollDirection = .vertical
        self.init(frame: .zero,  collectionViewLayout: layout)
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}



extension ColorCollectionView: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width / 3, height: 60)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
                        minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return CGFloat.leastNormalMagnitude
    }

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



extension ColorCollectionView: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return colors.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ColorCollectionViewCell.identifier, for: indexPath)
        let color = colors[indexPath.row]
        cell.backgroundColor = color
        return cell
    }
}

class ColorCollectionViewCell: UICollectionViewCell {
    static let identifier = "ColorCollectionViewCell"
}

我已经包含了我所有的代码。

更新

视图的宽度：375.0

CollectionView 的宽度：359.0

CollectionVeiwCell 的宽度：119.66666666666667

Answer 1

您应该尝试将 interCellSpacing 设置为以下内容：

self.tableView setIntercellSpacing:NSMakeSize(0, 0)];

看苹果docs。

表格视图通常在连续选择的行或列之间有 1 个像素的间隔。

将单元间距设置为 (0,0) 应该消除单元之间的分隔。

还要检查单元格的绘图代码。您看到的间隙可能是您的单元格子类的边界。您可以覆盖 drawRect(rect:) 方法并在那里设置边框宽度和边框颜色以查看边框是否有问题。所以在你的单元子类中：

override func drawRect(rect: CGRect) {
        self.layer.borderWidth = 1
        self.layer.borderColor = UIColor.redColor().CGColor
    }

希望对你有帮助！

---

编辑：

您可以尝试直接分配它，而不是直接使用 delegate 方法（我自己尝试过，它对我有用）

 if let collectionViewFlowLayout = collection.collectionViewLayout as? UICollectionViewFlowLayout{
            // the width of your main view or your parent view
            let width = UIScreen.main.bounds.width
            // what ever item size you need
            collectionViewFlowLayout.itemSize = CGSize(width: width / 2, height: width / 2)

            // probably you need also to set the section inset
            collectionViewFlowLayout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)
        layout
            
            collectionViewFlowLayout.minimumInteritemSpacing = 0
            collectionViewFlowLayout.minimumLineSpacing = 0
            
            // assign your collection view layout to your collectionViewFlowLayout
            yourCollectionView.collectionViewFlowLayout = collectionViewFlowLayout
        }