step 1: Put CollectionView on ViewController and give constraints.
step 2: Create cocoatouch class UICollectionviewcell with .xib file.
step 3: Define the cell in ViewController. Like,
@IBOutlet var collection_View: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
self.collection_View.register(UINib(nibName: "collection_cell", bundle: nil), forCellWithReuseIdentifier: "collection_cell")
// Do any additional setup after loading the view, typically from a nib.
}
step 4: Give UICollectionviewDataSource and UICollectionviewDelegate. Like,
class ViewController: UIViewController, UICollectionViewDataSource,UICollectionViewDelegate
step 5: Put the following code on given Datasource method. Like,
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 25
}
step 6: Put the following code on given Datasource method. Like,
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell : collection_cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collection_cell", for: indexPath) as! collection_cell
cell.update_Data(strValue: "\(indexPath.item)")
return cell
}
(Note: "update_Data" is function, it is define in "collection_cell" class. Like,)
class collection_cell: UICollectionViewCell {
@IBOutlet var lbl_cell_value: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
func update_Data(strValue : String) {
lbl_cell_value.text = strValue
}
}
step 7: Give the size of particular section. Like,
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// let height = collectionView.frame.size.height
// let width = collectionView.frame.size.width
let width = (UIScreen.main.bounds.size.width-10)/3
return CGSize(width: CGFloat(width), height: CGFloat(width))
}
step 8: Create header and footer for UICollectionView...
Create UICollectionReusableView file with .xib. And put UILabel on the xib with proper constraints.
In viewcontroller, register header and footer collectionReusableview. Like,
Create UICollectionReusableView file with .xib. And put UILabel on the xib with proper constraints.
In viewcontroller, register header and footer collectionReusableview. Like,
class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
@IBOutlet var clView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.clView.register(UINib(nibName: "HeaderCollectionReusableView", bundle: Bundle.main), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "HeaderCollectionReusableView")
self.clView.register(UINib(nibName: "FooterCollectionReusableView", bundle: Bundle.main), forSupplementaryViewOfKind:UICollectionElementKindSectionFooter, withReuseIdentifier: "FooterCollectionReusableView")
}
step 9: put UICollectionViewDelegateFlowLayout method and put following code in that method. Like,
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if kind == UICollectionElementKindSectionHeader {
let header : HeaderCollectionReusableView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "HeaderCollectionReusableView", for: indexPath) as! HeaderCollectionReusableView
return header
}else if kind == UICollectionElementKindSectionFooter {
let header : FooterCollectionReusableView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "FooterCollectionReusableView", for: indexPath) as! FooterCollectionReusableView
return header
}
return UICollectionReusableView()
}
Thank you...
