向下滚动时 UICollectionView 出错

Posted 2023-03-14

【中文标题】向下滚动时 UICollectionView 出错

【英文标题】：UICollectionView Goes Wrong When Scroll Down

【发布时间】：2017-05-03 08:00:13

【问题描述】：

我遇到了奇怪的问题。如果我向下滚动，我的 UICollectionView 会显示半边栏。 起初他们表现得非常完美

但是当我向下滚动时，UICollectionView 的行为很奇怪，看起来像这样：

下面是我将数据填充到布局的代码（虚拟）：

let layoutProduct: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layoutProduct.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
layoutProduct.scrollDirection = .vertical

collectionViewProduk = UICollectionView(frame: self.view.frame, collectionViewLayout: layoutProduct)
collectionViewProduk.dataSource = self
collectionViewProduk.delegate = self
collectionViewProduk.register(ProdukPopulerCell.self, forCellWithReuseIdentifier: "ProductCell")
collectionViewProduk.backgroundColor = UIColor(red: 231/255.0, green: 231/255.0, blue: 231/255.0, alpha: 1.0)
self.view.addSubview(collectionViewProduk)

要显示多少数据：

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        if collectionView == self.collectionViewByFilter 
            return 4
         else if collectionView == self.collectionViewProduk 
            return 8
        
        return section

我如何将虚拟数据填充到单元格：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
            if collectionView == self.collectionViewProduk 
                        if let cellA = collectionViewProduk.dequeueReusableCell(withReuseIdentifier: "ProductCell", for: indexPath) as? ProdukPopulerCell 
                            cellB.backgroundColor = UIColor.white

                            if indexPath.row < 8  
                                cellB.nameLabel.text = "Product"
                                cellB.theImageView.image = UIImage(named: "biometric")
                                cellB.priceLabel.text = "Rp 30.000"
                            
                            return cellB
                        
            
            return UICollectionViewCell()

我如何布局单元格并使它们看起来像 1 行中的 2 个单元格：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        if collectionView == self.collectionViewProduk 
            let collectionViewSize = collectionViewProduk.frame.size.width - 10
            return CGSize(width: collectionViewSize / 2, height: collectionViewSize / 2)
        
        return CGSize()

你们能看出我犯的错误吗？

【问题讨论】：

检查滚动方向并根据需要进行相应设置。

我猜你错误地计算了单元格的高度和宽度。考虑细胞之间的距离。

@ravi.p 我已经设置了“layoutProduct.scrollDirection = .vertical”

检查问题前后的单元格大小，可能会帮助您解决问题..？

【参考方案1】：

创建一个 customCollectionViewFlowLayout 并将其应用于您的 collectionview

    import UIKit

    class customCollectionViewFlowLayout: UICollectionViewFlowLayout 
        override init() 
            super.init()
            setupLayout()
        

        required init?(coder aDecoder: NSCoder) 
            super.init(coder: aDecoder)
            setupLayout()
        

        func setupLayout() 
            minimumInteritemSpacing = 1
            minimumLineSpacing = 1
            scrollDirection = .vertical
        

        override var itemSize: CGSize 
            set 

            
            get 
                let numberOfColumns: CGFloat = 2

                let itemWidth = (self.collectionView!.frame.width - (numberOfColumns - 1)) / numberOfColumns
                return CGSize(width:itemWidth, height:itemWidth)
            
        
    

然后将它应用到你的collectionview

  yourCollectionView.collectionViewLayout = customCollectionViewFlowLayout()