iOS: Collection View Controller
Up till now, we have talked about CollectionView, a kind of content view where an item is represented by a UICollectionViewCell and used to display a group of objects. We have used CollectionViews to construct iOS applications. We will handle the collectionview using CollectionViewController in this phase of the tutorial.
One way to define the CollectionViewController is as a ViewController with a focus on CollectionView management. It is a UICollectionViewController instance, derived from the UIViewController class.
class UICollectionViewController : UIViewController
The CollectionView controller can only manage the CollectionView; similar to TableViewController, we are unable to add any new UIViews to it. The storyboard has an integrated collectionview with at least one collectionview cell (item) provided by the CollectionViewController. On the other hand, the CollectionViewController can contain any number of elements. The collectionView property of the class allows us to access the collectionview in the UICollectionViewController subclass.
To manage the CollectionView’s data and user interactions, the CollectionViewController implements the UICollectionViewDelegate and UICollectionViewDataSource protocols. The CollectionViewController reloads the collection view data just before the CollectionView appears for the first time. Additionally, each time the view is displayed, the current selection is cleared. To alter this behavior, though, just set the clearsSelectionOnViewWillAppear property’s value to false.
Adding CollectionViewController to the interface
In XCode, create a new Single View iOS application. In XCode, the following files will be automatically produced.
In order to add the Collection View Controller, search for it in the object library, and drag the result into the storyboard, we must first delete the current View Controller from the storyboard.
As a result, a Collection View Controller with a collection view cell will be created in the storyboard.
In order to bind the UICollectionViewController subclass to the Collection View Controller in the storyboard, we also need to construct it in our project.
Press Command + n and choose “Cocoa Touch Class” to create a new class file.
This will cause the window seen in the next image to open. Type the class name and choose UICollectioViewController as the parent class from the dropdown menu.
This will open the window that can be seen in the following picture. Input the class name and select UICollectioViewController from the drop-down menu to be the parent class.
CollectionViewController Components
The Collection View Controller has a number of distinct parts that are displayed on the screen.
- CollectionView: An integrated collection view with a collection view cell is provided by the Collection View Controller. The UICollectionViewController subclass’s collectionView property can be used to access this collectionview. It is a subclass of UICollectionView, which is derived from UIView.
- CollectionViewCell: The Collection View Cell shows the Collection View Controller’s real content. We can add the custom subviews to the UIView content view that it includes. It is a UICollectionViewCell class instance.
- NavigationBar: The navigation controllers’ integrated ViewControllers display the Navigation Bar at the top of the screen. It has things for the title and bar buttons. It is an example of the class UINavigationBar.
UICollectionViewController Properties
The properties listed below are present in the UICollectionViewController.
| SN | Property | Description |
|---|---|---|
| 1 | var collectionView: UICollectionView! | It represents the collection view object managed by the View Controller. |
| 2 | var collectionViewLayout: UICollectionViewLayout | It represents the layout object used to initialize the collection view controller. |
| 3 | var clearsSelectionOnViewWillAppear: Bool | It is a boolean value indicating whether the selection should be cleared when the view is about to appear on the screen. |
| 4 | var installsStandardGestureForInteractiveMovement: Bool | A Boolean value indicating whether the collection view controller installs a standard gesture recognizer to drive the reordering process. |
| 5 | var useLayoutToLayoutNavigationTransitions: Bool | A Boolean that indicates whether the collection view controller coordinates with a navigation controller for transitions. |
Example
In this example, we will make a basic Collection View Controller and give each collectionview cell a different color.
Interface Builder
In this case, we will use the object library to look for the collection view controller and then drag the finding onto the storyboard. With the collectionview prototype cell, this will generate a CollectionViewController in the storyboard.
We will now construct a MyCollectionViewController subclass of UICollectionViewController.
MyCollectionViewController.swift
import UIKit
private let reuseIdentifier = "cell"
class MyCollectionViewController: UICollectionViewController {
var colorArr = Array<UIColor>()
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Register cell classes
self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
colorArr = [UIColor.red,UIColor.black,UIColor.yellow,UIColor.blue,UIColor.gray,UIColor.green,UIColor.brown,UIColor.cyan,UIColor.darkGray]
// Do any additional setup after loading the view.
}
override func numberOfSections(in collectionView: UICollectionView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 3
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of items
return colorArr.count
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
// Configure the cell
cell.contentView.backgroundColor = colorArr[indexPath.row]
return cell
}
}
Output
