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

Using CollectionView in UIView with xib file

提问by Thanh H?i

i'm doing with this, i want to use CollectionView, but i haven't seen prototype cell, and don't know how to use CollectionView in this case, can someone help me ?

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

I try to use like this way but it take alot of time and hard to manage than UICollectionView

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

回答by Nicola Giancecchi

The main way to use UICollectionView is by managing the logic programmatically.

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

1. First, create a new class which inherits from UICollectionViewCell. Choose if you want to include a xib to easily design your cell:

2. Design your cell with Interface Builder or programmatically.

3. Create your main view controller including a xib (or a storyboard) with the collection viewinside and link it to the associated class via Interface Builder. Alternatively you can add a collection view programmatically to your UIViewController

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

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

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

1. Make the target view controller conform to the UICollectionViewDelegateand UICollectionViewDataSourceprotocols by declaring them after the father class:

   class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
   
       @IBOutlet weak var collectionView: UICollectionView!
   
       //...
   } 
   

2. Register the associated nib or the class for your cell in the viewDidLoadmethod and associate the datasource and delegate protocols to the view controller class:

    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
    }
   

3. Implement the methods declared in the UICollectionViewDelegateand UICollectionViewDataSourceprotocols :

    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
    }
   

4. Run your app in the simulator (or on a real device) and.. Et voilà! :)

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

   class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
   
       @IBOutlet weak var collectionView: UICollectionView!
   
       //...
   } 
   

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

    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
    }
   

6. 实现在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
    }
   

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

For more info: https://developer.apple.com/reference/uikit/uicollectionview

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

回答by cristian franco

ok first you must have the IBOutlet of your collection view and implements the methods like this

好的，首先你必须有你的集合视图的 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


    }

ok in the function you add a xib file, next you must create that extend from UICollectionViewCell, and when you finish this you must override the next methods

好的，在添加 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
    }

and this is all, good luck

这就是全部，祝你好运