在UIView中使用CollectionView和xib文件

时间:2016-12-16 19:46:28

标签: ios swift uiview uicollectionview collectionview

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

我尝试使用这种方式,但它比UICollectionView需要花费大量时间和难以管理

enter image description here

2 个答案:

答案 0 :(得分:32)

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

  1. 首先,创建一个继承自UICollectionViewCell的新类。选择是否要包含xib以轻松设计单元格: enter image description here

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

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

  4. enter image description here

    1. 通过在父类之后声明目标视图控制器,使目标视图控制器符合UICollectionViewDelegateUICollectionViewDataSource协议:

      class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
      
          @IBOutlet weak var collectionView: UICollectionView!
      
          //...
      } 
      
    2. 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
       }
      
    3. 实现UICollectionViewDelegateUICollectionViewDataSource协议中声明的方法:

       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. 在模拟器中(或在真实设备上)运行您的应用程序,然后......évoilà! :)

    5. enter image description here

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

答案 1 :(得分: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
    }

这就是全部,祝你好运