it-swarm.com.de

So laden Sie eine benutzerdefinierte Zelle (xib) in die UICollectionView-Zelle mit swift

Ich habe mit Swift ein kleines Beispielprojekt erstellt. Ich habe eine "MyCustomView" als xib erstellt, die Label, Button und ImageView enthält, wie im folgenden Code gezeigt:

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

Anbei das Bild von xib als Referenz. Screenshot

In StoryBoard -> ViewController wurde UIViewCollection hinzugefügt, wie in der folgenden Abbildung gezeigt. In dieser Ansichtssammlung muss diese orangefarbene Zelle meine benutzerdefinierte xib enthalten, damit sie zur Laufzeit geladen werden kann.

Wie erreiche ich das?

enter image description here

Neuer modifizierter Code, wie von Sandeep vorgeschlagen

// 1 UIKit importieren

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 UIKit importieren

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

}
31
sia

sia,

Folgendes können Sie tun:

  1. Ändern Sie Ihre MyCustomView -Klassen so, dass sie eine Unterklasse von UICollectionViewCell und nicht von UIView sind.

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

  3. Ich konnte ernsthaft nicht verstehen, wie Sie Ihren Setter und Getter für mytitleLabelText und myCustomImage verwenden. Wenn es keinen Sinn macht, sollten Sie es auch loswerden.

  4. Schließlich haben Sie nur noch IBOutlets in MyCustomView.

  5. Ändern Sie für eine bessere Codierungspraxis den Namen von MyCustomView in MyCustomCell (optional).

  6. Gehen Sie zu Ihrer xib, wählen Sie die xib aus und legen Sie ihre Klasse als MyCustomView fest.

enter image description here

  1. Ändern Sie auf dem gleichen Bildschirm den Dateieigentümer in IhrenView-Controller, der collectionView hostet

enter image description here

  1. In ViewDidLoad Ihres viewControllers registrieren Sie Ihre Schreibfeder.
self.collectionView.registerNib(UINib(nibName: "your_xib_name", bundle: nil), forCellWithReuseIdentifier: "your_reusable_identifier")
  1. In 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. Um die Größe der Zelle zu steuern, können Sie entweder den Delegaten von collectionView überschreiben oder einfach zu Ihrer collectionView wechseln. Wählen Sie die collectionCell darin aus und ziehen Sie sie, um sie an Ihre Dimension anzupassen. :) Das ist es :)

Fröhliches Codieren. Durchsuchen Sie die Tutorials zum besseren Verständnis. Kann nicht alle Delegierten erklären, da ich am Ende hier einen Blog schreibe.

Fröhliches Codieren

82

Für Swift 4.0

in viewDidLoad:

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

in cellForItemAt indexPath:

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

Und vergessen Sie nicht, die Kennung für Ihre benutzerdefinierte Zelle im Abschnitt xib festzulegen.

13
Raj Aryan

Einzeiliger Ansatz, wenn Sie mehrere Zellen registrieren müssen.

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

Anweisungen zur Verwendung

  1. Benennen Sie Ihre Zellenkennung mit "YourcellName" + "Identifier", ZB: CustomCellIdentifier, wenn Ihr Zellenname CustomCell ist.

  2. CustomCell.register(for: collectionView)

1
Bhuvan Bhatt

Für Swift 4.2 in viewDidLoad

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

in cellForItemAt indexPath:

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

Und natürlich, wie @Raj Aryan sagte: Vergessen Sie nicht, die Kennung für Ihre benutzerdefinierte Zelle im Abschnitt xib festzulegen.

0
Ben Shabat