iOS 10 tutorial : Working with collection view

iOS 10 tutorial : Working with collection view

Collection view is very good component of IOS . Its similar with table but have some basic difference . Here I will discuss with ios Collection view with easy way 🙂

So let start ,

Part 1 :

Create a project Named Like CollectionViewDemo . Go to Main.Storyboard and add a Navigation controller – for that go to Editor menu of toolbar and select EmbededIn and click Navigation Controller . It will add a Navigation bar of the top of the Story Board . Click that and named the text as Collection Demo or as you like .


Then the UI main part is coming , first choose CollectionView from library and add it to srory board make it full screen and now select a collection row and make its size as 90/90 .

Now drag an Imagview from library and drop it to collection cell , make it fill as cell size . and make it aspect fill . OK?

Part : 2

Create A Cocoa touch file named MyCollectionViewCell .

Now goto main.storyboard and select collection cell and In class file attach MyCollectionViewCell file then identify is as  – collection_cell


Now return to MyCollectionViewCell and drag collection_cell into MyCollectionViewCell and named it as MyCollectionView . Ok?


Part 3 :


Now add some Image file into asset folder

Go to ViewController class and drag CollectionView to ViewController and named it ass MyCollectionView

@IBOutlet weak var MyCollectionView: UICollectionView!

and images listed as array like

var images = [“one”,”two”,”three”,”four”, “five”]

make all class as

// ViewController.swift
// IOSCollectionView
// Created by Arif on 11/24/16.
// Copyright © 2016 Arif. All rights reserved.

class ViewController: UIViewController , UICollectionViewDataSource , UICollectionViewDelegate{
@IBOutlet weak var MyCollectionView: UICollectionView!

var images = ["one","two","three","four", "five"]

override func viewDidLoad() {
self.MyCollectionView.delegate = self
self.MyCollectionView.dataSource = self


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

return images.count

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collection_cell", for: indexPath) as! MyCollectionViewCell
cell.MyImageView.image = UIImage(named: images[indexPath.row])
return cell


func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("selected item is ", indexPath.row)

run it —

Leave a Reply

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