iOS Swift Tutorial : UICollectionView Pinterest Layout

Shrikar Archak / December 21, 2014

5 min read

iOS Swift Tutorial : UICollectionView Pinterest Layout

Agenda

In this iOS Swift tutorial we will learn how to build a pinterest layout using UICollectionView.

  • Introduction to UICollectionView
    • UICollectionViewDataSource
    • UICollectionViewDelegate
    • UICollectionViewFlowLayout
  • Example : Pinterest like layout

Introduction to UICollectionView

Collection View is a way to present a collection of data objects/items in a flexible layout. If you ever want to represent items in rows and columns you have found what you were looking for. UICollectionView provides the infrastructure / api’s for implementing these simple grid layouts or any other custom layouts for your app.

Like UITableView , collection views are data oriented objects and manage the visual presentation of the data driven views.

UICollectionViewDataSource

Like UITableView we need to implement the data source protocol which in collectionView’s context is UICollectionViewDataSource. The data source manages the content of the collection view and create the views needed to present the content.

UICollectionViewDelegate

This delegate objects allows us to intercept messages from the collection view and customize the view’s behaviour.

UICollectionViewFlowLayout

UICollectionViewLayout is the interface and UICollectionViewFlowLayout is a concrete object which implements UICollectionViewLayout. UICollectionViewFlowLayout organizes the items into grids from one row or column to next depending on the scroll direction.

Pinterest layout using UICollectionView

  • First Create a single view application
  • Delete all the contents from the storyboard
  • Drag a CollectionViewController from the Object Library. Change the background color to #E9E9E9.
    iOS Swift Tutorial : UICollectionView Pinterest Layout
  • Select the Attributes inspector with the CollectionViewController selected and then make it as the initialView Controller
    iOS Swift Tutorial : UICollectionView Pinterest Layout
  • Edit the UICollectionViewCell to contain an imageView and a label

    iOS Swift Tutorial : UICollectionView Pinterest Layout
  • Download an image from pinterest and add it to your image assets

  • Select ImageView and set the image to the one which you just added to your project.

  • Select UICollectionViewController > Editor > Embed in Navigation Controller. At this point this is how your layout should look like

    iOS Swift Tutorial : UICollectionView Pinterest Layout

Now lets create a new file LayoutController which subclasses UICollectionViewController .

//
//  LayoutController.swift
//  PinterestLayout
//
//  Created by Shrikar Archak on 12/21/14.
//  Copyright (c) 2014 Shrikar Archak. All rights reserved.
//

import UIKit

let reuseIdentifier = "collCell"

class LayoutController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
    let sectionInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
    let titles = \["Sand Harbor, Lake Tahoe - California","Beautiful View of Manhattan skyline.","Watcher in the Fog","Great Smoky Mountains National Park, Tennessee","Most beautiful place"\]
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: UICollectionViewDataSource

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
        return 50
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as CollectionViewCell
        cell.title.text = self.titles\[indexPath.row % 5\]
        let curr = indexPath.row % 5  + 1
        let imgName = "pin\\(curr).jpg"
        cell.pinImage.image = UIImage(named: imgName)

        return cell
    }

    func collectionView(collectionView: UICollectionView!,
        layout collectionViewLayout: UICollectionViewLayout!,
        sizeForItemAtIndexPath indexPath: NSIndexPath!) -> CGSize {
            return CGSize(width: 170, height: 300)
    }

    func collectionView(collectionView: UICollectionView!,
        layout collectionViewLayout: UICollectionViewLayout!,
        insetForSectionAtIndex section: Int) -> UIEdgeInsets {
            return sectionInsets
    }

}

Also create a new file called CollectionViewCell which subclasses UICollectionViewCell.

//
//  CollectionViewCell.swift
//  PinterestLayout
//
//  Created by Shrikar Archak on 12/21/14.
//  Copyright (c) 2014 Shrikar Archak. All rights reserved.
//

import UIKit

class CollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var pinImage: UIImageView!
}

At this point open the main storyboard and select the UICollectionViewController and set the class name to LayoutController

iOS Swift Tutorial : UICollectionView Pinterest Layout

Also select the collectionView cell and set the class to CollectionViewCell and the cell identifier to collCell.

Built and Run the project.

iOS Swift Tutorial : UICollectionView Pinterest Layout

Change the scroll to horizontal and you should get something like this

iOS Swift Tutorial : UICollectionView Pinterest Layout

Source code on Github UICollectionView Pinterest Please let me know if you have any questions/feedback.

Shrikar Archak

@shrikar84

IndieHacker and Software Developer. Getting started to build in public.Tweet me @shrikar84 for any collaboration opportunity or brainstorming.

#developer#ml-engineer#seo

Subscribe to the newsletter

Get notified when new content or topic is released.

You won't receive any spam! ✌️