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

Posted

技术标签:

【中文标题】iOS - 删除 UICollectionViewCell 之间的垂直空间【英文标题】:iOS - Remove vertical space between UICollectionViewCell 【发布时间】:2020-07-02 15:00:39 【问题描述】:

我有一个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

【问题讨论】:

你是在模拟器还是真机上测试? @CZ54 我都在模拟器真机上测试过了。 CGSize(width: collectionView.frame.width / 3, height: 60) 那有什么价值?我猜这是一条“半像素线”(“一半”,在您的情况下是“三分之一”或“三分之二”)。 【参考方案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
        

【讨论】:

UICollectionView 有 setIntercellSpacing 吗? 可能是这样。我现在还不太确定。我知道它适用于 UITableView。我更新了我的答案。

以上是关于iOS - 删除 UICollectionViewCell 之间的垂直空间的主要内容,如果未能解决你的问题,请参考以下文章

从 UICollectionView 中的 UIAttachmentBehavior 中删除振荡

iOS:使用约束动画 UICollectionView 垂直扩展?

iOS 中带有分页的 UICollectionView 的页数

从 UICollectionView 中删除单元格而不从顶部重新加载 [关闭]

iOS UICollectionView拖动排序

iOS 利用UICollectionView拖拽排序 实现的仿照腾讯新闻频道管理功能 XLChannelControl