How to Add Custom Layouts Using Collection View to Display Content in Stylish Way

ios collection view tutorial

You have used the iOS photos app, right?

Then you must remember that the app has a stylish way to present photos in a nice grid view.

The collection view makes it possible. It basically allows to add own custom layouts and layout transitions. In fact, you’re not just limited to grid and stacks, the UICollectionView is extremely customizable for iPhone app development. You can use collection view to make circle layouts, pulse news style layouts, cover-flow style layout and many more.

The exciting part is, if you’re already familiar with iOS Table View, then you’ll learn UICollectionVIew in no time. And even if you’re not really familiar with iOS Table view, you can check our iOS Table view tutorial.

In today’s iOS app tutorial, we’ll go through basics of using collection view and develop a simple app to demonstrate the implementation process.

Let’s Get Started

Create a new project under file menu.


Select Single View Application and click on next.


In the next tab, write project details.


Once you create a new project, go to Main.Storyboard.


Go to object library and search Collection View.


Now drag and drop UICollectionView in ViewController and set it by Autolayout so it will be compatible for all the screen size in iPhone.



Now select a Cell in UICollectionView and go to Attributes Inspector.


Give the Identifier name.


Now set outlet of UICollectionView, Data source, and Delegate of collection view.

@IBOutlet weak var collectionImages: UICollectionView!


Now we go to ViewController.swift and create object for UICollectionViewFlowLayout.

let layoutCell: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

Now set margin and cell size in ViewDidLoad()

override func viewDidLoad() {

layoutCell.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
layoutCell.itemSize = CGSize(width: 90, height: 90)
self.collectionImages?.collectionViewLayout = layoutCell

Now define DataSource and Delegate of UICollectionView.

//MARK: UICollectionViewDataSource

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 101

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath)
configureCell(cell, forItemAtIndexPath: indexPath)

return cell

func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
cell.backgroundColor = UIColor.blackColor()
let imgView = UIImageView(frame: CGRectMake(0, 0, layoutCell.itemSize.width, layoutCell.itemSize.height))
imgView.contentMode = .ScaleAspectFit
if forItemAtIndexPath.row%3 == 0 {
imgView.image = UIImage(named: "3")
} else if forItemAtIndexPath.row%2 == 0 {
imgView.image = UIImage(named: "2")
} else {
imgView.image = UIImage(named: "1")


func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "Cell", forIndexPath: indexPath) as UICollectionReusableView
return view

//MARK: UICollectionViewDelegate

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {


func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {


And done!

Let’s see the output.


Now that you’ve a complete understanding of collection view, go ahead and implement it. And if you’re newbie developer or an entrepreneur with a app idea in mind, do discuss the idea with experts, or hire iPhone app development company to build your app in the correct way.

Grab a free copy of UICollectionView Demo from Github.

Also Read:

This page was last edited on May 25th, 2020, at 6:48.

Author Bio

Hitesh Trivedi

Hitesh Trivedi

Designation: iOS Team Lead

Hitesh Trivedi is an iOS Team Lead at Space-O Technologies. He has over 9 years of experience in iOS app development. He has guided to develop over 100 iPhone apps with unique features and functionalities. He has special expertise in Swift and Objective-C.


Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Your Free Quote