ios - features - xcode ide

Cómo cargar una celda personalizada(xib) en una celda UICollectionView usando swift

Question

He creado un pequeño proyecto de muestra usando Swift. He creado un "MyCustomView" como xib que contiene etiqueta, botón e imageView como se muestra en el siguiente código:

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

Adjuntamos la imagen de xib para la referencia.

En StoryBoard -> ViewController agregó UIViewCollection que se muestra en la siguiente imagen. En esta colección de vistas, necesito que la celda de color naranja contenga mi xib personalizado para ser cargada en tiempo de ejecución.

¿Cómo logro esto?

Nuevo código modificado como lo sugiere Sandeep

// 1 importación 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 UIKit de importación

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

Answer 1

Para Swift 4.0

en viewDidLoad :

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

en cellForItemAt indexPath :

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

Y no olvide establecer el identificador para su celda personalizada en la sección xib.

Answer 2

sia

Esto es lo que puedes hacer,

1. Cambie sus MyCustomView MyCustomView para que sean una subclase de UICollectionViewCell y no UIView.

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

3. Realmente no pude entender cómo estás usando tu setter y getter para mytitleLabelText y myCustomImage. Si no sirve de nada, deshazte de él también.

4. Finalmente, solo te quedarán IBOutlets en MyCustomView.

5. Para una mejor práctica de codificación, cambie el nombre de MyCustomView a MyCustomCell (opcional)

6. Vaya a su xib, seleccione el xib y establezca su clase como MyCustomView.

7. En la misma pantalla, cambie el propietario del archivo a su controlador de hosting.

8. En ViewDidLoad de su viewController registre su plumilla.

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

9. En 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

10. Finalmente, para controlar el tamaño de la celda, anule el delegado de collectionView o simplemente vaya a su collectionView, seleccione la collectionCell en ella y arrástrela para que coincida con su dimensión :) Eso es :)

Feliz codificacion Buscar tutoriales para una mejor comprensión. No puedo explicar a todos los delegados ya que terminaré escribiendo un blog aquí.

Feliz codificacion