web-dev-qa-db-ja.com

xibファイルを使用したUIViewでのCollectionViewの使用

私はこれをやっています、CollectionViewを使用したいのですが、プロトタイプセルを見たことがなく、この場合のCollectionViewの使用方法がわかりません、誰かが私を助けることができますか？

私はこのように使用しようとしますが、UICollectionViewよりも時間がかかり、管理が難しいです

enter image description here

iosswiftuiviewuicollectionviewcollectionview
14
Thanh Hải

UICollectionViewを使用する主な方法は、ロジックをプログラムで管理することです。

  1. 最初に、UICollectionViewCellを継承する新しいクラスを作成します。セルを簡単に設計するためにxibを含めるかどうかを選択します。 enter image description here

  2. Interface Builderを使用して、またはプログラムでセルを設計します。

  3. 内部にcollection viewを持つxib（またはストーリーボード）を含むメインView Controllerを作成し、Interface Builderを介して関連するクラスにリンクします。または、UIViewControllerにプログラムでコレクションビューを追加することもできます

enter image description here

  1. 対象のView ControllerをUICollectionViewDelegateおよびUICollectionViewDataSourceプロトコルに準拠させるには、fatherクラスの後に宣言します。

    class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    //...
}

  2. viewDidLoadメソッドでセルに関連付けられたnibまたはクラスを登録し、データソースとデリゲートプロトコルをView Controllerクラスに関連付けます。

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

  4. シミュレーター（または実際のデバイス）でアプリを実行します。 :)

enter image description here

詳細情報： https://developer.Apple.com/reference/uikit/uicollectionview

33
Nicola Giancecchi

まず、コレクションビューの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
    }

そしてこれがすべて、幸運です

1
cristian franco