How to create collectionview without storyboard

Since ios5 introduce storyboard is new way to implement the ui interface for the ios. In ios6 new collection view introduce. Today i will show you how to develop collection view without storyboard. UICollectionView is similar to UITableView.

Very similar to table views, collection views brings together a set of cells. Each cell is represented by the UICollectionViewCell class. UICollectionView is a UIkit component which will allow you to develop a grid type of view. Simple and common example of UICollectionView is in photos app where user will allow to scroll number of cell in horizontal or vertical. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.

Let's dive into the real world to achieve this. First create a new project with Empty Application based template(see Figure:1).

Figure : 1

For example i setup my project configuration as below:

• Product name: KTCollectionView
• Bundle identifier: com.krunal.collectionview
• Devices: iPhone

Now add a view controller  with .xib selected in the project. This is the controller where we are developing the our collection view. To build the collection view first add the UICollectionViewDelegate and UICollectionViewDataSource protocols: 

@interface KTViewController: UIViewController<UICollectionViewDelegate, UICollectionViewDataSource>

 Then, drag the collection view in the .xib, and declare the property for collection view.

@property (nonatomic, strong) IBOutlet UICollectionView *collectionView;

Then connect the UICollectionView object in the nib to the outlet. Now connect the UICollectionView object to the datasource and delegate. Select the collection view and go to the Size Inspector and change the cell size 100 x 100 in nib file. (See Figure: 2)

Figure: 2

Now, we will create the custom cell for collection view. For that create a new file of UICollectionViewCell as a selected type. Create .xib also for the new custom cell. Now drag the collection view cell in the UICollectionViewCell's nib file. 

Make the cell size as 100 x 100 in the nib file. After that add an UILabel in the collection view cell.(see Figure: 3) Create a Label property in the .h file and connect in the nib file.

Figure: 3

Now back to the view controller, and update the viewDidLoad method with these lines:

[self.collectionView registerNib:[UINib nibWithNibName:@"KTCell" bundle:nil] forCellWithReuseIdentifier:@"CELL"];

With the view defined, jump over to the implementation of the UICollectionViewDelegate and UICollectionViewDataSource,the numberOfSectionsInCollectionView: andnumberOfItemsInSection: delegate methods. This tells the collection view how many sections are included in the view and how many items are in each section, respectively.

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {                                                                            return 1;                                                                      }

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 100;

}

For example i set the  numberOfSectionsInCollectionView: as value 1, so my collection view have 1 section and for numberOfItemsInSection: as  value 100, so my collection view have 100 cells. Now we need to create one more delegate method  that returns the cells to the collection view as they’re needed. This is the collectionView:cellForItemAtIndexPath method, which is very similar to UITableView's tableView:cellForRowAtIndexPath: method. Add this to the view controller:

- (KTCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    KTCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];

    cell.cellLabel.text = [NSString stringWithFormat:@"cell %i",indexPath.row + 1];

    return cell;



}

I just add the label to display the cell no, you can customize by adding image, multiple label, textview such control for cell. For that you need to add that control to the xib of the cell. Now, we implement the UICollectionViewDelegate method for select the number of cell.

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

   KTCell *cell = (KTCell*)[collectionView cellForItemAtIndexPath:indexPath];

   NSArray *views = [cell.contentView subviews];

   UILabel *label = [views objectAtIndex:0];

   NSLog(@"Select %@",label.text);

}

Now, build and run the code you will get your collectionview ready. You will get below output (See Figure: 4)

Figure: 4

You can grab the code from here.

Ref:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/Reference/Reference.html