ios - 如何使集合视图单元格超过一列？

问题描述

我想制作一个多于 1 列的集合视图，但此代码仅显示一列。谁能帮我解决一下？？？谢谢你....

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

标签： iosswiftuicollectionview

如果单元格的宽度或单元格的内容使得collectionView 无法在屏幕的可见部分看到它们，则collectionView 会自动放置在它们旁边。您必须滚动您的 collectionView 才能看到您的下一列。

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

首先将所有视图放在 a 中StackView并垂直对齐。

然后为您的 imageView 设置正确的width和height约束以保持您的要求的纵横比。我设置如下只是为了演示：

除了上述限制，我还在 Storyboard 本身中将单元格大小设置为自动，而不是以编程方式进行。sizeForItemAt indexPath从代码中删除

：

最后，在完成上述所有步骤之后，输出看起来像这样

ios - 如何使集合视图单元格超过一列？

问题描述

解决方案

推荐阅读