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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 } } |
Code analysis
- Line 3:
UICollectionViewDelegateandUICollectionViewDataSourceProtocols have been implemented - Line 18:
collectionView(_:numberOfItemsInSection:)says number of items in the collection - Line 22:
collectionView(_:cellForItemAt:)method is used to create the cell
When 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
|
1 2 3 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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
How to change the number of Items in the section
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
How to add section headers
Add the Collection Reusable View to UICollection View Controller
Enable the Section Header by selecting the Collection View controller
