向下滚动时UICollectionView出错

时间:2017-05-03 08:00:13

标签: ios swift uicollectionview

我面临着奇怪的问题。如果我向下滚动,我的UICollectionView会显示半边柱。 起初他们完全像这样展示

enter image description here

但是当我向下滚动时,UICollectionView表现得很奇怪,看起来像这样:

enter image description here

下面是我将数据填充到布局(虚拟)的代码:

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()
}

你们可以发现我犯的错误吗?

1 个答案:

答案 0 :(得分:0)

创建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()