In this tutorial I am going to create CollectionView with 3 Sections in Swift Programming language. This code can be used to develop your iOS application
(1) First create single view application in XCODE and drag and drop the UIViewController from Object Library into the default ViewController which you find in Main.storyboard file
(2) Select the rectangle inside the Collection View. In Attribute Inspector, you can name the Identifier as “cell”
(3) Now you can add the following code to ViewController.swift
import UIKit class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { @IBOutlet weak var collectionView: UICollectionView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. collectionView.dataSource = self collectionView.delegate = self } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 20 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as UICollectionViewCell cell.backgroundColor = UIColor.darkGray return cell } }
UICollectionViewDelegate
and UICollectionViewDataSource
Protocols have been implementedcollectionView(_:numberOfItemsInSection:)
says number of items in the collectioncollectionView(_:cellForItemAt:)
method is used to create the cellWhen you run the above code you can have the following screen in your simulator. We have not created sections so far
(4) You can add following method to define 3 sections
func numberOfSections(in collectionView: UICollectionView) -> Int { return 3 }
(5) To change the the colors of each section I am going to modify the following method
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as UICollectionViewCell cell.backgroundColor = UIColor.darkGray if indexPath.section == 0 { cell.backgroundColor = UIColor.darkGray }else if indexPath.section == 1 { cell.backgroundColor = UIColor.green }else if indexPath.section == 2 { cell.backgroundColor = UIColor.blue } return cell }
Finally you can have the following screen with 3 sections
Now we have done the basic code to make the Collection View with section. In this example you have the same number of items in each section. If you want to change the number of items for each section you can use the following code
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { var item : Int = 0 if section == 0 { item = 5 } if section == 1 { item = 10 } if section == 2 { item = 20 } return item }
Now you can have the following screen with different number of items
Add the Collection Reusable View to UICollection View Controller
Enable the Section Header by selecting the Collection View controller