向下滚动时 UICollectionView 出错答案

【问题标题】：UICollectionView Goes Wrong When Scroll Down向下滚动时 UICollectionView 出错
【发布时间】：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”
检查问题前后的单元格大小，可能会帮助您解决问题..？

标签： ios swift uicollectionview

【解决方案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()

【讨论】：