Collection View iOS Tutorial
The Collection View provides a flexible way to present content to the user. Similar to a table view, a collection view gets data from custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. In this tutorial we will display a number of colored cells in a collection view. This tutorial is made with Xcode 10 and built for iOS 12.
Open Xcode and create a new Single View App.
For product name, use IOSCollectionViewControllerTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.
Go to the storyboard. Remove the View Controller from the Storyboard and drag a Collection ViewController to the Scene. Select the Collection ViewController and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.
Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".
The storyboard will look like this.
Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.
The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController
A grid of cells will be displayed containing a red or blue color. To determine which color the cell will be, a property of type boolean will be declared in the CollectionViewController class. Go to CollectionViewController.swift file and enter the following line.
With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.
override func numberOfSections(in collectionView: UICollectionView) -> Int { // 1 return 1 } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 2 return 100 } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) // Configure the cell // 3 cell.backgroundColor = cellColor ? UIColor.red : UIColor.blue cellColor = !cellColor return cell }
By default the CollectionView only has 1 section.
There will be 100 cells created in the Collection View
If the cellColor Boolean is true, the cellcolor is red, otherwise the cellcolor is blue.
Build and Run the project.
You can download the source code of the IOSCollectionViewControllerTutorial at the ioscreator repository on Github
