How to build a UICollectionView Controller in Swift?

In this tutorial, we will check out the basics of UICollectionViewController component and also learn the ins and outs of UICollectionView (introduced in iOS 6). Before that, let’s begin with some introductory part.

While learning Swift app development, you might have heard about UICollectionViewController while some of you don’t know. Let’s shed some light, UICollectionView Control is tableview kind of Control that introduced in iOS 6 to create a Grid-Like layout.

It works same like tableview, as tableview displays data in a single column layout, Collectionview displays data in a customizable layout. There are three components of collection views such as:

• Cells – It shows a single item. We can instantiate collection view cell same as tableview cell.
• Supplementary views: – Basically, it is an option and used to make header or footer view of sections.
• Decorative views: – It is same as supplementary view, but not used to display any data. It just used to decorate view enhancing UI.

Let’s start code in XCODE

Step 1:

Create project with “SOCollectionViewDemo” name

Step 2:

Get UICollectionViewController and set as a RootViewController

Step 3:

Assign ViewController.swift to storyboard as per given below.

Step 4:

Add “collectionCell” Identifier for UICollectionViewCell, which will be used in CollectionView’s Delegate “cellForItemAtIndexPath”

Step 5:

Now, integrate Delegate and DataSource in app, Datasource and Delegate return information about the number of items in the collection view shows selection, data populating.

	//MARK: UICollectionViewDataSource
	
	override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    	return 1
	}
	
	override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    	return 10
	}
	
	override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    	let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath)
    	configureCell(cell, forItemAtIndexPath: indexPath)
    	return cell
	}
	
	func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
    	cell.backgroundColor = UIColor.blackColor()
    	//3
    	let imgView = UIImageView(frame: CGRectMake(0, 0, layout.itemSize.width, layout.itemSize.height))
    	imgView.contentMode = .ScaleAspectFit
    	imgView.image = UIImage(named: "img1.jpg")
    	cell.addSubview(imgView)
    	
	}
	
	override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    	let view =  collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView
    	return view
	}
 
	//MARK: UICollectionViewDelegate
	override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    	
	}
	
	override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
    	
	}

Step 6:

UICollectionViewFlowLayout Delegate should be used to manage a layout of CollectionViewCell, also we can manage top, left, bottom, right margin and size of UICollectionViewCell.

For that, we declare global variable of UICollectionViewFlowlayout

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

and then manage height, width, and margin of UICollectionViewCell from viewDidLoad

	override func viewDidLoad() {
    	super.viewDidLoad()
    	// Do any additional setup after loading the view, typically from a nib.
    	
    	layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
    	layout.itemSize = CGSize(width: 90, height: 90)
    	self.collectionView?.collectionViewLayout = layout
	}

This will also manage by delegate too

func collectionView(collectionView: UICollectionView,
                    	layout collectionViewLayout: UICollectionViewLayout,
                           	insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    	return UIEdgeInsetsMake(20, 10, 10, 10); //UIEdgeInsetsMake(topMargin, left, bottom, right);
	}

 

UICollectionViewFlowlayout will be managed by its Delegate too.

	//MARK:- UICollectionViewDelegateFlowLayout
   func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    	return self.collectionViewLayout.collectionViewContentSize()
	}
	
	func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) ->
    	CGFloat {
        	Return 30.0
	}

	func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    	return 30.0
	}

If we do not use delegate of UICollectionViewFlowlayout then it will get default setting of height, width, and margin from “Size Inspector”

 

At this point, you’ve now got a complete working example of UICollectionViewController. Hope, you got a complete idea of the fundamental steps of creating UICollectionViewController in Swift. Maybe, it would be cool to tap GitHub to see the demo project developed by one of our iPhone developers at Space-O Technologies – reliable iPhone App Development company.