web-dev-qa-db-fra.com

Comment charger une cellule personnalisée (xib) dans une cellule UICollectionView en utilisant swift

J'ai créé un petit exemple de projet utilisant Swift. J'ai créé un "MyCustomView" en tant que xib qui contient label, button et imageView comme indiqué dans le code ci-dessous:

import UIKit

@IBDesignable class MyCustomView: UIView {

    @IBOutlet weak var lblName: UILabel!
    @IBOutlet weak var btnClick: UIButton!
    @IBOutlet weak var myImageView: UIImageView!

    var view:UIView!

    @IBInspectable
    var mytitleLabelText: String? {
        get {
            return lblName.text
        }
        set(mytitleLabelText) {
            lblName.text = mytitleLabelText
        }
    }

    @IBInspectable
    var myCustomImage:UIImage? {
        get {
            return myImageView.image
        }
        set(myCustomImage) {
            myImageView.image = myCustomImage
        }
    }


    override init(frame : CGRect)
    {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }


    func xibSetup()
    {
        view = loadViewFromNib()
        view.frame = self.bounds

        // not sure about this ?
        view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
        addSubview(view)
    }


    func loadViewFromNib() -> UIView {

        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: "MyCustomView", bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

        return view
    }
}

Attaché l'image de xib pour la référence. Screenshot

Dans StoryBoard -> ViewController a ajouté UIViewCollection qui, comme indiqué dans l'image ci-dessous. Dans cette collection de vues, j'ai besoin que cette cellule de couleur orange contienne mon xib personnalisé pour être chargé au moment de l'exécution.

Comment puis-je y arriver?

enter image description here

Nouveau code modifié suggéré par Sandeep

// 1 import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.collectionView.register(UINib(nibName: "MyCustomView", bundle: nil), forCellWithReuseIdentifier: "myCell")

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

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

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

        cell.lblName.text = "MyNewName"
        return cell
    }
}

// 2 import UIKit

@IBDesignable class MyCustomView: UICollectionViewCell {

    @IBOutlet weak var lblName: UILabel!
    @IBOutlet weak var btnClick: UIButton!
    @IBOutlet weak var myImageView: UIImageView!

    var view:UIView!

    @IBInspectable
    var mytitleLabelText: String? {
        get {
            return lblName.text
        }
        set(mytitleLabelText) {
            lblName.text = mytitleLabelText
        }
    }

    @IBInspectable
    var myCustomImage:UIImage? {
        get {
            return myImageView.image
        }
        set(myCustomImage) {
            myImageView.image = myCustomImage
        }
    }

}
iosswiftipadxib
31
sia

sia,

Voici ce que vous pouvez faire,

  1. Changez votre MyCustomView calss en sous-classe de UICollectionViewCell et non en UIView.

  2. Supprimer override init(frame : CGRect), required init?(coder aDecoder: NSCoder), func xibSetup(), func loadViewFromNib() -> UIView de MyCustomView

  3. Je ne pouvais vraiment pas comprendre comment utilisez-vous votre setter et getter pour mytitleLabelText et myCustomImage. Si cela ne sert à rien, éliminez-le également.

  4. Enfin, il ne vous restera plus que des IBOutlets dans MyCustomView.

  5. Pour une meilleure pratique de codage, changez le nom de MyCustomView en MyCustomCell (facultatif).

  6. Allez sur votre xib, sélectionnez le xib et définissez sa classe comme MyCustomView.

enter image description here

  1. Dans le même écran, changez le propriétaire du fichier en yourView, hébergeant la collection, viewView

enter image description here

  1. Dans ViewDidLoad de votre viewController, enregistrez votre nib.
self.collectionView.registerNib(UINib(nibName: "your_xib_name", bundle: nil), forCellWithReuseIdentifier: "your_reusable_identifier")
  1. Dans cellForItemAtIndexPath,
let cell : MyCustomView = collectionView.dequeueReusableCellWithReuseIdentifier("your_reusable_identifier", forIndexPath: indexPath) as! MyCustomView
cell.lblName.text = "bla bla" //access your Cell's IBOutlets
return cell
  1. Enfin, pour contrôler la taille de la cellule, remplacez le délégué de collectionView ou allez simplement dans votre collectionView, sélectionnez la collectionCell qu'il contient et faites-le glisser pour correspondre à votre dimension :) Thats it :)

Bonne codage. Rechercher des tutoriels pour une meilleure compréhension. Je ne peux pas expliquer tous les délégués car je finirai par écrire un blog ici.

Code heureux

82
Sandeep Bhandari

Pour Swift 4.0

dans viewDidLoad:

//custom collectionViewCell
mainCollectionView.register(UINib(nibName: "your_customcell_name", bundle: nil), forCellWithReuseIdentifier: "your_customcell_identifier")

dans cellForItemAt indexPath:

let cell : <your_customcell_name> = mainCollectionView.dequeueReusableCell(withReuseIdentifier: "your_customcell_identifier", for: indexPath) as! <your_customcell_name>

Et n'oubliez pas de définir l'identifiant de votre cellule personnalisée dans la section xib.

13
Raj Aryan

Une approche en ligne si vous devez enregistrer plusieurs cellules.

extension UICollectionViewCell {

    static func register(for collectionView: UICollectionView)  {
        let cellName = String(describing: self)
        let cellIdentifier = cellName + "Identifier"
        let cellNib = UINib(nibName: String(describing: self), bundle: nil)
        collectionView.register(cellNib, forCellWithReuseIdentifier: cellIdentifier)
    }
}

étapes sur la façon d'utiliser

  1. Nommez votre identifiant de cellule comme "YourcellName" + "Identifier", Par exemple: CustomCellIdentifier si votre nom de cellule est CustomCell.

  2. CustomCell.register(for: collectionView)

1
Bhuvan Bhatt

Pour Swift 4.2 dans viewDidLoad

 self.collectionView.register(UINib(nibName: "your_xib_name", bundle: nil), forCellWithReuseIdentifier: "your_reusable_identifier")

dans cellForItemAt indexPath:

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "your_reusable_identifier", for: indexPath) as! MyCustomView

Et bien sûr, comme @Raj Aryan l'a dit: n'oubliez pas de définir l'identifiant de votre cellule personnalisée dans la section xib.

0
Ben Shabat