如何使收藏视图单元格超过一列？

Question

下面是代码的输出，但我想把它变成2个coloumn。

我想做一个多于1列的Collection View，但这个代码只显示一列。有谁能帮我解决一下吗？谢谢你......

import UIKit

class SearchViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {


    @IBOutlet weak var collectionView: UICollectionView!

这里是数组

    var collectionArray : [String] = ["1", "2", "3", "4"]


    let labelnamee = [("Long Sleeve Abstract Print Top"), ("Logo Graphic Print Top"), ("Material Study T-Shirt"), ("Mission Statement Print T-Shirt"), ("Printed Logo T-Shirt"), ("Tie-Dye Print T-Shirt")]

    let labelpricee = [("RM 1021"), ("RM 860"), ("RM 750"), ("RM 750") , ("RM 670"), ("RM 760")]

    let imagee = [UIImage(named: "abstractprint"),
                   UIImage(named: "longsleeve"),UIImage(named: "studymaterial"),UIImage(named: "mission"), UIImage(named: "white"), UIImage(named: "tiedye")]

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.delegate = self
        collectionView.dataSource = self

    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return labelnamee.count
    }

采集单元格的边框

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        let cellIndex = indexPath.item
        cell.imageView.image = imagee[cellIndex]
        cell.labelname.text = labelnamee[cellIndex]
        cell.labelprice.text = labelpricee[cellIndex]

        cell.contentView.layer.cornerRadius = 10
        cell.contentView.layer.borderWidth = 1.0
        cell.contentView.layer.borderColor = UIColor.blue.cgColor
        cell.backgroundColor = UIColor.white

        cell.layer.shadowColor = UIColor.gray.cgColor
        cell.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        cell.layer.shadowRadius = 2.0
        cell.layer.shadowOpacity = 1.0
        cell.layer.masksToBounds = false
        cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, cornerRadius: cell.contentView.layer.cornerRadius).cgPath

        return cell
    }

}

这是布局的代码。我想我在高度和重量上犯了错误。

extension SearchViewController : UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }


    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let bounds = collectionView.bounds
        let heigtVal = self.view.frame.height
        let widthVal = self.view.frame.width
        let cellsize = (heigtVal < widthVal) ? bounds.height/2: bounds.width/2



        return CGSize(width: cellsize - 10, height: cellsize - 10)
    }

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

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

Answer 1

如果单元格的宽度或单元格的内容是这样的，collectionView不能容纳能够看到他们在屏幕的可见部分，集合视图自动放置在他们旁边。你必须滚动你的collectionView才能看到下一列。

如果你想在屏幕可见部分看到两列，请按照以下步骤操作。

首先将所有的视图放置在一个 StackView 并将它们垂直对齐。

然后设置正确的 width ＆amp; height 约束到您的imageView，以保持您的要求的纵横比。我设置了如下的约束条件，只是为了演示。

除了上面的约束条件，我还在Storyboard中设置了单元格的大小为自动，而不是通过编程来实现。删除了 sizeForItemAt indexPath 从代码

:

最后，按照上述所有步骤，输出的结果是这样的