How to create Collection View Controller in Objective C ?

Collection View Controller in Objective-C

In previous tutorial we learned about Table View Controller. Now, in this tutorial, we are creating an app of Collection View showing apple devices images. Real-time example : ‘Photos’ App in iPhone/iPad.

Follow below steps to create Collection View project using Objective-C Language:

Step 1: Launch Xcode and create new project by clicking on Single View Application template under iOS tab as shown in below image and click Next  button.

Step 2: Enter product name as CollectionViewDemo and select Language as Objective-C then again click on Next button as shown in below image. Later click on Create button to create project on the next pop-up window.

Step 3: On your project, just go to main.storyboard file available in the project navigator, in storyboard canvas, select the View Controller so that it is highlighted in blue colour and hit delete button to remove the  controller.

Step 4: Further, search Collection View Controller in Object Library on the right-bottom side. Drag and drop that controller by pressing Ctrl button and place it onto the storyboard.

Also make sure that you have checked “Is Initial View Controller” from Attributes Inspector to give initial entry point to the controller. 

Step 5: Creating Class for CollectionViewController

Now, you need to make a class for Collection View Controller. To create new class, select Xcode File -> New -> File… menu option. 

select the Cocoa Touch Class and click on Next. 

After clicking on Next, enter class name as CollectionViewController and make sure its subclass is UICollectionViewController as said earlier too, click on Next and create button. 

Also, associate the class with the your Collection View Controller. By selecting Table View Controller from main.storyboard and select ‘Identity Inspector’ from right hand side as mentioned below. 

Now, there is no need of ViewController class files i.e. ViewController.h & ViewController.m showing in project Navigator. Hence you can delete both the files.

Step 6: Coding for Collection View Controller

Select CollectionViewController.h file & add following protocols just after the subclass as mentioned in below image:

1. UICollectionViewDataSource
2. UICollectionViewDelegate

Next, select CollectionViewController.m file, there you will find below mandatory methods to build Table:

1. numberOfSectionsInCollectionView()
2. numberOfItemsInSection()
3. cellForItemAtIndexPath()

In 1st method, you need to return 1 because we are taking only one section in our case.

In 2nd method, you need to return number of Items in one section which you want to display in each cell.

In 3rd method, you need to return cell and further call array (contains number of images) to display using indexPath.row property.

Step 7: Creating Model to represent 

You need to declare an array in .h file & define it in viewDidLoad() method which is defined in .m file.

In our case, we declared array name “deviceImages” using NSArray class containing apple device images in block of interface as mentioned in below screenshot.

NSArray *deviceImages;

Thereafter, download/import images by simply drag & drop to our project into Assets.xcassets folder shown in Project Navigator.

And gave definition in viewDidLoad() method within the block of  implementation.

deviceImages = @[@"iPhone",@"iPad",@"iPod",@"iMac",@"iWatch", @"iTV"];

Step 8: Code for protocol method mentioned below:

In numberOfItemsInSection() method, you only need to return “deviceImages.count” which means returning number of items present in our array.

Step 9: Setting Up identifier of cell & its cell.

Most importantly, set name of reuseidentifier of cell named as “Cell” shown in identifier option under Attribute Inspector on left side by selecting cell in Collection View Controller from Storyboard.

Array will be called and assign it to cell.textLabel.text to display in TableView.

Setting Up Identifier name to cell in below image. 

Select Collection View to set cell’s width & height from Size Inspector as shown in below image. 

Step 10: Setting Up Image View to cell with all its constraints.

To show image in cell, you need to set Image View object into the cell by drag & drop method.

By selecting image view, add Constraints from Pin button, pin from left, right, top & bottom and make sure uncheck “Constrain to Margins” and the click on Add 4 Constraints as shown in image. 

Step 11: Associate cell Class to its cell

Next, to set property for Image View, need to create new class for cell named “CollectionViewCell” and its subclass should be UICollectionViewCell. After creating this, associate this class with cell as shown in image.

Step 12: Declaring property for Image Views

Click on “Assistant Editor” shown at top right side to show two views - storyboard & code. Now, by pressing Ctrl button on image view, drag & drop to CollectionViewController.h file as shown in below image. (Make sure Image View is selected while setting up its property). 

CollectionViewCell.h file will look like as below: 

Now, import CollectionViewCell.h file in CollectionViewController.h file using below code:

#import “CollectionViewCell.h”

Step 13: Code for another protocol method mentioned below:

Also change the datatype of cell variable from UICollectionViewCell to CollectionViewCell defined in cellForItemAtIndexPath() method and then call array to display images in cell using below line in this same method.

cell.deviceImg.image = [UIImage imageNamed: deviceImages[indexPath.row]];

Here is the complete code of CollectionViewController.m file in below mentioned image. 

Step 14: Finally, Run the Simulator

You are Ready with your CollectionView. Just Run the program & will be seen below result in simulator.

In above result, there is some clashing the cells with Top-Layout View (same as in previous tutorial of Table View Controller). To remove this you can embed Navigation Controller (same procedure needs to follow ), first select your existing controller i.e. Collection View Controller then follow below steps.

For this just go to Xcode Menu Bar ‘Editor’ -> Embed In -> choose ‘Navigation Controller’. That’s it

Again Run the project, here is the result with the Navigation Controller.

Here, we have successfully build 'Collection View Controller' showing apple device images in cells.

Enjoy! Have Fun 😇👍🏻

Click below link to watch its video.
Video Link: https://www.youtube.com/watch?v=d1Xh7kadAA4&t=25s