在带有 xib 文件的 UIView 中使用 CollectionView

Posted 2023-02-15

【中文标题】在带有 xib 文件的 UIView 中使用 CollectionView

【英文标题】：Using CollectionView in UIView with xib file

【发布时间】：2017-05-02 16:03:32

【问题描述】：

我正在做这个，我想使用 CollectionView，但我没有看到原型单元格，并且不知道在这种情况下如何使用 CollectionView，有人可以帮助我吗？

我尝试这样使用，但它比 UICollectionView 花费大量时间且难以管理

【问题讨论】：

检查这个：appcoda.com/ios-programming-uicollectionview-tutorial

您的问题是在 xib 中看不到原型单元格吗？

【参考方案1】：

好的，首先你必须拥有你的集合视图的 IBOutlet 并实现这样的方法

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout



    @IBOutlet var collectionView: UICollectionView!

    override func viewDidLoad() 

        super.viewDidLoad()
        count = 9;
        let nib = UINib(nibName: "yourItemView", bundle: nil)
        collectionView.registerNib(nib, forCellWithReuseIdentifier: "yourItemView")
        self.collectionView.delegate = self
        self.collectionView.dataSource = self


    

你可以在函数中添加一个 xib 文件，接下来你必须从 UICollectionViewCell 创建扩展，当你完成这个之后你必须重写下一个方法

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return count 
        // the numbers of items
    

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize //size of your item for screen sizes
        let wsize = UIScreen.mainScreen().bounds.size.width
        switch(wsize)
        case 414:
            return CGSize(width: 190, height: 102)
        case 375:
            return CGSize(width: 190, height: 102)
        case 320:
            return CGSize(width: 174, height: 102)
        default:
            return CGSize(width: 174, height: 102)
        
    



    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("yourItemView", forIndexPath: indexPath) as! yourItemView



        return cell
    

这就是全部，祝你好运

【参考方案2】：

使用 UICollectionView 的主要方式是通过编程方式管理逻辑。

首先，创建一个继承自UICollectionViewCell 的新类。选择是否要包含 xib 以轻松设计您的单元格：

使用 Interface Builder 或以编程方式设计您的单元格。

创建您的主视图控制器，包括一个带有 collection view 的 xib（或故事板），并通过 Interface Builder 将其链接到关联的类。或者，您可以通过编程方式将集合视图添加到您的 UIViewController

通过在父类之后声明，使目标视图控制器符合UICollectionViewDelegate 和UICollectionViewDataSource 协议：

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource 

    @IBOutlet weak var collectionView: UICollectionView!

    //...
 

在viewDidLoad 方法中为您的单元格注册关联的 nib 或类，并将数据源和委托协议关联到视图控制器类：

 let cellIdentifier = "cellIdentifier"

 override func viewDidLoad() 
     super.viewDidLoad()
     //if you use xibs:
      self.collectionView.register(UINib(nibName:"MyCollectionCell", bundle: nil), forCellWithReuseIdentifier: cellIdentifier)
     //or if you use class:
      self.collectionView.register(MyCollectionCell.self, forCellWithReuseIdentifier: cellIdentifier)

      self.collectionView.delegate = self
      self.collectionView.dataSource = self
 

实现UICollectionViewDelegate和UICollectionViewDataSource协议中声明的方法：

 let objects = ["Cat", "Dog", "Fish"]

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

 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
       return self.objects.count
 

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! MyCollectionCell

       //in this example I added a label named "title" into the MyCollectionCell class
       cell.title.text = self.objects[indexPath.item]

       return cell
 

在模拟器（或真实设备）中运行您的应用程序，然后......等等！ :)

欲了解更多信息：https://developer.apple.com/reference/uikit/uicollectionview

【讨论】：

tks 很多，它帮助了我

不，问题是：如果将 UICollectionView 添加到 .xib 文件中，为什么 UICollectionView 没有任何工具可以在 Interface Builder 中添加单元格

同意@rommex：您说“创建包含 xib（或情节提要）的主视图控制器”，但我猜您正在使用情节提要。我找不到在 xib 的界面构建器中添加原型单元格的方法，我认为这是实际问题。

谢谢哥们...@尼古拉

我无法将 X 元素排成一行，可能是因为从 xib 我无法编辑单元格的“估计大小”属性，我该如何解决？谢谢