CollectionView

CollectionView is an object that presents the ordered collection of data items in the customizable layouts. It shows the data in the form of a grid layout. A collectionview is an instance of the UICollectionView class, which inherits the UIScrollView, which will be covered later in this tutorial.

When we add the collectionview to the application interface, it is the responsibility of the iOS application to manage the data associated with the collectionview. CollectionView object works similar to the tableview since it gets the data from the DataSource object, which conforms to the UICollectionViewDataSource protocol.

The data associated with the collection view is treated as the individual items which can be grouped into the sections to be represented into a grid layout on the iPhone screen. The UICollectionView is used in most of the iOS applications, where we want the data to be horizontally scrollable.

For example, in an eCommerce application like Flipkart, the products are shown using UICollectionVIew. The very basic UI that can be developed using the collecitionview is a calculator where the individual buttons are treated as the individual collectionview items that can be managed using the delegate and DataSource methods defined in UICollectionViewDelegate and UICollectionViewDataSource protocols.

The UICollectionView presents the data on the screen, as shown in the below image.

iOS CollectionView

Adding CollectionView to the interface builder

1. Search for the CollectionView in the object library and drag the result to the storyboard.

2. Create the connection outlet of the collectionview in the ViewController.

3. Implement the UICollectionViewDataSource and UICollectionViewDelegate protocols in the ViewController and assign the delegate and datasource object to the self.

4. Define the delegate and datasource methods for collection view to draw the collection view layout.

UICollectionViewCell

It is similar to UITableViewCell in the tableview. The CollectionView presents the data in the form of ordered collection of items. An item is the smallest unit of data that can be presented using the UICollectionView object. The CollectionView presents the item using a cell, which is an instance of UICollectionViewCell. The datasource method configures the UICollectionView cell using a reusable identifier. A cell is configured using CollectionViewCell, as given below.

Supplementary Views

A CollectionView can also present the data using the supplementary views as well. The supplementary views are the section headers and footers that are configured using the UICollectionViewDelegate methods. Support for supplementary views can be defined by the collection view layout object. The collection view layout object also defines the placement of those views.

CollectionView Delegate methods

CollectionView Delegate methods handle the selection, deselection, highlighting the items in the collectionview. All the methods of this protocol are optional. The following table contains the most used CollectionView delegate methods.

SNMethodDescription
1func collectionView(UICollectionView, shouldSelectItemAt: IndexPath) -> BoolThis method asks the delegate to select the item at an indexpath.
2func collectionView(UICollectionView, didSelectItemAt: IndexPath)This method tells the delegate to select the item at an indexpath. This method is executed when the item at an indexpath in then collectionview is selected.
3func collectionView(UICollectionView, shouldDeselectItemAt: IndexPath) -> BoolThis method asks the delegate to deselect the item at an indexpath.
4func collectionView(UICollectionView, didDeselectItemAt: IndexPath)This method is executed when the item at an indexpath in the collectionview is deselected.
5func collectionView(UICollectionView, shouldBeginMultipleSelectionInteractionAt: IndexPath) -> BoolIt asks the delegate whether the multiple items can be selected using the two-finger pan gesture in the collection view.
6func collectionView(UICollectionView, didBeginMultipleSelectionInteractionAt: IndexPath)This method is executed when the multiple items are selected using the two-finger pan gesture.
7func collectionView(UICollectionView, shouldHighlightItemAt: IndexPath) -> BoolIt asks then delegate whether to highlight the item during tracking.
8func collectionView(UICollectionView, didHighlightItemAt: IndexPath)This method is executed when the item is highlighted in the collectionview at some indexpath.

CollectionView DataSource Methods

The CollectionView Datasource adopts to the UICollectionViewDatasource protocol. The collection view datasource object is responsible for providing the data that is required by the collectionview. It is like the collectionview application's data model. It passes the data to the collectionview that is to be displayed.

The following table contains the methods declared in UICollectionViewDataSource protocol.

SNMethodDescription
1func collectionView(UICollectionView, numberOfItemsInSection: Int) -> IntThis method returns an integer representing the number of items in section to be displayed in the collectionview. It is the count of the array of data associated with the collectionview.
2func numberOfSections(in: UICollectionView) -> IntThis method returns an integer representing the number of sections to be displayed in the collectionview.
3func collectionView(UICollectionView, cellForItemAt: IndexPath) -> UICollectionViewCellThis method returns the instance of UICollectionViewCell which is configured to display the actual content. This method is not optional and to be defined if the view controller is conforming UICollectionViewDataSource protocol.
4func collectionView(UICollectionView, viewForSupplementaryElementOfKind: String, at: IndexPath) -> UICollectionReusableViewThis method asks the data source object to provide a supplementary view to display in the collection view.
5func collectionView(UICollectionView, canMoveItemAt: IndexPath) -> BoolIt asks the datasource object whether the specified item can be moved to another location in the collectionview.
6func collectionView(UICollectionView, moveItemAt: IndexPath, to: IndexPath)This method moves the specified item to the specified indexpath.
7func indexTitles(for: UICollectionView) -> [String]?This method returns the array of the string containing the titles of the indices.
8func collectionView(UICollectionView, indexPathForIndexTitle: String, at: Int) -> IndexPathIt asks the data source object to return the index path of a collection view item that corresponds to one of the index entries.

Example 1

In this example, we will present a grid of items on the screen using a collection view.

Interface Builder (main.storyboard)

To add the collectionview to the storyboard of the project, search for then collectionview in the object library and drag the result to the interface builder. This will add the collectionview to the interface. Now, define the auto-layout rules for the collection view to govern its size and positioning on the different screen devices. The actual content of the CollectionView is shown by the collectionview cell. We must define the attributes for the cell in the attribute inspector of the Xcode. In this example, we add the label to the collectionview cell and set the text for the label in the data source method on the cell object.

The attributes given to the collectionview cell are shown in the following image.

iOS CollectionView

The attributes given to the collection view is shown in the following image.

iOS CollectionView

The interface builder created for the project is shown below.

iOS CollectionView

ViewController.swift

MyCollectionViewCell.swift

Output:

iOS CollectionView

CollectionView Demo Project

This project shows how the collection view is going to be used in iOS applications. This application simulates an ECommerce application which shows multiple products on a view controller scene. Clicking on a product navigates us to another screen, which shows the detailed view of the specific product.

In this application, we will use two view controllers, and we will embed the view controllers into the navigation controller, which provides navigation through the view controllers. We advise you to have the basic knowledge of Navigation controllers, which are covered in this tutorial.

Interface Builder (main.storyboard)

We will use a collectionview in this project to show a grid-like scene in the application. To add a collection view, search for it in the object library and drag the result to the storyboard.

iOS CollectionView

Configure the cell

Now, we need to configure the prototype cell which will show the actual item on the screen. The prototype cell will contain the image view to display the product image and the label to display the name of the image. Add the imageview and the label to the collectionview cell and assign the class DemoCollectionViewCell.swift to the cell to create the connection outlets of imageview and label respectively.

iOS CollectionView

Add the navigation controller

To embed the ViewController to a navigation controller, we will select the view controller and click on editor and choose the option embed in as shown in the following image.

iOS CollectionView

When we embed our View Controllers to the navigation controller, there is a navigation bar that will be displayed on all the view controllers by default. We can set that title of the navigation bar. We will study more about navigation controllers when we discuss Navigation Interface in this tutorial. The following image shows the navigation controller and the view controller for which we have set the navigation bar title as Products.

iOS CollectionView

Adding ImageDetailViewController

To the interface Builder, we need a ViewController, which can show the details about the products. For this purpose, we will add ViewController to the interface builder and assign the class ImageDetailViewController to this ViewController.

To the imageDetailViewController, we will add the ImageView and the label to the ViewController. We will also embed this view controller to our navigation controller and set the navigation bar title to Product Details.

iOS CollectionView

The ImageDetailViewController will be displayed when an item is selected in the CollectionView. We will write the following code in the datasource method of collectionview to navigate to this view controller.

When a navigation controller pushes to some view controller in the storyboard, there is a back button enabled on that view controller, which navigates backward in the storyboard.

The interface builder built in the demo project is shown in the following image.

iOS CollectionView

ViewController.swift

ImageDetailViewController

DemoCollectionViewCell.swift

Output:

iOS CollectionView
Next TopicScrollView




Latest Courses