Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load custom cell ( xib) in UICollectionView cell using swift

Tags:

ios

swift

xib

ipad

I have created a small sample project using Swift. I have created an "MyCustomView" as xib which contains label, button and imageView as shown in below code:

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

Attached the image of xib for the reference. Screenshot

In StoryBoard -> ViewController added UIViewCollection which as shown in the below image. In this viewcollection, I need that orange color cell to contain my custom xib to be loaded at runtime.

How do I achieve this?

enter image description here

New Modified code as suggested by 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         }     }  } 
like image 544
sia Avatar asked May 19 '16 06:05

sia


People also ask

How do I add a section title in UICollectionView?

There are no section headers in the UICollectionView. So for your first task, you'll add a new section header using the search text as the section title. To display this section header, you'll use UICollectionReusableView .


2 Answers

Here is what you can do,

  1. Change your MyCustomView class to be a subclass of UICollectionViewCell and not UIView.

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

  3. I seriously could not understand how are you using your setter and getter for mytitleLabelText and myCustomImage. If its of no use get rid of it as well.

  4. Finally you will be left with just IBOutlets in MyCustomView.

  5. For better coding practice change the name from MyCustomView to MyCustomCell (optional)

  6. Go to your xib, select the xib and set its class as MyCustomView.

enter image description here

  1. In the same screen change file owner to yourView controller hosting collectionView

enter image description here

  1. In ViewDidLoad of your viewController register your nib.
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. Finally in order to control the size of cell either override the delegate of collectionView or simply go to your collectionView select the collectionCell in it and drag it to match your dimension :) Thats it :)

Happy coding. Search tutorials for better understanding. I can't explain all delegates as I'll end up writing a blog here.

Happy coding

like image 107
Sandeep Bhandari Avatar answered Oct 09 '22 07:10

Sandeep Bhandari


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

And dont forget to set identifier for your custom cell in xib section.

like image 32
Raj Aryan Avatar answered Oct 09 '22 07:10

Raj Aryan