How to implement UICollectionView tutorial

UIKit UICollectionView

05 May 2023 . 2 min read       @gurjitpt


UITableView is used to display lists of data, but UICollectionView is used to present complex and customized data. According to the requirements of your app, you may create a simple scrolling grid or an advanced custom layout using UICollectionViewController.


This article will teach you the fundamental building pieces for displaying collection views. In this article, we won't get too theoretical; instead, you can visit the official website to learn more about UICollectionViewController.


Getting Started

Let's begin by starting a new project. Go to the main storyboard after creating the project and remove the default view controller.


Click the delete button after selecting default view controller.


Generic placeholder image

Next, drag the collection view controller from the objects library into the storyboard.



Generic placeholder image


To set up navigation to the controller, choose the collection view controller and go to Editor -> Embed In -> Navigation controller.



Generic placeholder image

To set up a view controller as a root view controller, choose controller and mark Initial view controller in the Attributes inspector.



Generic placeholder image

Set the reusable view identifier to FlickrImageCell in the Attributes inspector after selecting a single cell.



Generic placeholder image

Let's create a new subclass to provide the UICollectionViewController more capabilities.

Go to File -> New -> File. Choose iOS -> Source -> Cocoa Touch Class and create class for subclass of UICollectionViewController and click Next.



Generic placeholder image

Add the class FlickrViewController to the collection view controller in the identity inspector.



Generic placeholder image

Let's create subclass of UICollectionViewCell for FlickrImageCell. Go to File ▸ New ▸ File. Choose iOS ▸ Source ▸ Cocoa Touch Class and create class for subclass of UICollectionViewCell and click Next.



Generic placeholder image

In the identity inspector add class FlickrImageViewCell to collection view cell.



Generic placeholder image

Congratulation🎉 you have successfully created collection view controller to display data. Now it's time to hit an API and fetch data from Flickr API.

Don’t hesitate to contact me if you have any questions or queries. Follow me on twitter @gurjitpt for any updates.

Thanks!


Related articles:


Share this article


Generic placeholder image

WRITTEN BY

Gurjit Singh

I’m Computer Science graduate and an iOS Engineer who writes about Swift and iOS development. Follow me on twitter @gurjitpt for more updates.


Next Posts

How to use enum in Swift Empty space for void

Enumerations (enum) enables you to write code in a type safe way. Enum is very useful while defining common type of values. You don't have to provide...

Mar 7, 2023 . 2 min read     Swift Enum

Read More »

Optional unwrapping syntax in Swift 5.7 Empty space for void

Optional unwrapping is one of the most used patterns in iOS development. Swift 5.7 introduces new features included a new way to unwrap optional values...

Jun 14, 2022 . 2 min read     Optional unwrapping

Read More »

Property observers in Swift Empty space for void

It's a common pattern or technique in various programming languages when we want to perform some action when a value is changed. Property ...

May 24, 2021 . 2 min read     Property Observers

Read More »