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

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.

collection1

Select Single View Application and click on next.

collection2

In the next tab, write project details.

collection3

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

collection5

Go to object library and search Collection View.

collection6

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

collection7

collection8

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

collection9

Give the Identifier name.

collection10

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

@IBOutlet weak var collectionImages: UICollectionView!

collection11

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() {
super.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()
//3
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")
}
cell.addSubview(imgView)

}

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.

simulator-screen-shot-jan-3-2017-4-07-05-pm

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.

This page was last edited on July 10th, 2018, at 3:19.
 
 

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

Get your free consultation now