Wednesday, March 6, 2013

UICollection View in iOS 6 Tutorial


Today we are going to learn of the new feature added by Apple guys in iOS 6.



So stay with me, and do it step by step by .. don't forget to drop me a message or comment.

Note : This Application Developed Using : iOS 6

PHASE - I (Create New Project)

So, Let's Fire Xcode!!

Go to File --> New --> Project

Now we can see a Window for selecting our application templet 

So make sure you select Application in iOS option on your Left hand side.
then select Single View Application as shown in below picture and Go for Next..



In the Next Window we need to put Our Project Details this way

Product Name : CollectionViewDemo
Organization Name :RDCWorld
Company Identifier : com.rdcworld

Class Prefix :  (leave it blank for now)

Devices : iPhone

Note : Don't forget to Make Tick mark on "Use Automatic Reference Counting" option.



Go to Next --> Create.

Now you can see Xcode default dashboard with our newly created project .


PHASE - II (Design UI)

We need to add  UICollectionView and UICollectionViewCell on our screen to get it work.

UICollectionView : for showing our data (image, text etc) in a grid form
UICollectionViewCell : for design particular cell on Collection view


So, Just open ViewController.xib file you can see default blank layout
1. let's drag UICollectionView from Object library and fill it on layout as shown in picture




2. now we need to create a Layout for our CollectionView cell, so we are going to add one XIB file.

File Menu --> New --> File

Select View templet in "User Interface" option under iOS (see popup window screen shot), go next



select device family : we are creating for iPhone.



Given it name as "MyCell" and go for create.



Good!! now you can see default blank layout, just delete it (select it and press delete button) and drag UICollectionViewCell from object library



now go the Size Inspector and change width=100 and hight =100



now select Attribute Inspector and change Background color and then drag UILabel on it as below image



select UILabel --> in Attribute Inspector --> scroll down and change its Tag = 100 (because we need to get it in ViewController.m file)

this time our project structure is look like 



PHASE - III (Create IBOutlets and IBAction )

We are going to create IBOutlet for UICollectionView .
So just open ViewController.xib

Okay, Now select Assistant Editor on Top Right side



You can see our ViewController.xib (Left side) + ViewController.h (Right side) opened together.

Select UICollectionView --> Right Click on it 

Click on "New Referencing outlet" option and drag cursor to ViewController.h(right side) file, when your cursor is between @interface and @end you can see like this.



Now you will get Popup Window 

just put Name : "myCollectionView" and click on Connect.



Done!! now back to Standard Editor



PHASE - III (Hook Up Delegate and Datasource)

We need to mentioned that we are going to implement UICollectionView's Datasource and Delegate protocols,
so do it now, later we will define in our ViewController.h file too.

1. sélect ViewController.xib file.
2. select UICollection

On top right corner (below to Organizer tab) select Connection Inspector

Click on DataSource and drag it to the File owner as shown in below screen shot



Now do the same for Delegate (Drag delegate to the file owner)

Note : you can achieve same by adding below two lines in viewDidLoad method of your ViewController.m file 

myCollectionView.dataSource = self;
myCollectionView.delegate=self;

Great!! You are on the way!!

PHASE - IV (Writing Code)

Now Save app, and open ViewController.h file 

1. add UICollectionView's protocols <UICollectionViewDataSource, UICollectionViewDelegate> to @interface 

@interface ViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate>

2. define mutable array with property, name as "contentArray"

@property (nonatomic, retain) NSMutableArray *contentArray;

So Finally our ViewController.h file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.h
//  CollectionViewDemo
//
//  Created by RDC on 3/6/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate>

@property (weak, nonatomic) IBOutlet UICollectionView *myCollectionView;

@property (nonatomic, retain) NSMutableArray *contentArray;

@end
-----------------------------------------------------------------------------------------------------------------------------------------


Now come to ViewController.m file , open it

1. add synthesize (for all declared variable in header file with @property) just below to @implementation

@synthesize myCollectionView;
@synthesize contentArray;

2. in viewDidLoad method

2.1 Initialize our content array and put the data into it.

    contentArray = [[NSMutableArray alloc] init];
    for (int i=0; i<100; i++) {
        [contentArray addObject:[NSString stringWithFormat:@"Cell %d",i]];
    }

2.2 get the UICollectionViewCell's Nib file (.xib file) here

UINib *cellNib = [UINib nibWithNibName:@"MyCell" bundle:nil];
    [myCollectionView registerNib:cellNib forCellWithReuseIdentifier:@"cvCell"];

2.3 create FlowLayout for collection view with its item size

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setItemSize:CGSizeMake(100, 100)];

2.4 add scroll direction (in this we want as Horizontal scroll)

[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

2.5 add FlowLayout to our Main collectionView

[myCollectionView setCollectionViewLayout:flowLayout];


3. Now Heart of the Application : we need to implement UICollectionView's Datasource & Delegate method
Note : we have already declared these protocols in header file and Hooked up with Layout.

Here we have some optional and mandatory methods, I will mention
at the end of file but before @end add these methods

// DataSource - optional method
- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
    return 1;
}

// DataSource - mandatory methods
-(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [contentArray count];
}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    
    NSString *cellData = [contentArray objectAtIndex:indexPath.row];    
    static NSString *cellIdentifier = @"cvCell";    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];    
    UILabel *titleLabel = (UILabel *)[cell viewWithTag:100];    
    [titleLabel setText:cellData];    
    return cell;    
}

// Delegate - optional method
-(void) collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    NSString *cellData = [contentArray objectAtIndex:indexPath.row];
    
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:[NSString stringWithFormat:@"You have selected %@ item",cellData] delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
    [alert show];
    
}

So Finally our ViewController.m file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.m
//  CollectionViewDemo
//
//  Created by RDC on 3/6/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

@synthesize myCollectionView;
@synthesize contentArray;

#pragma mark - ViewController's Life Cycle methods

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //initialize array and put data on it
    contentArray = [[NSMutableArray alloc] init];
    for (int i=0; i<100; i++) {
        [contentArray addObject:[NSString stringWithFormat:@"Cell %d",i]];
    }
    
    //get the cell nib we have created
    UINib *cellNib = [UINib nibWithNibName:@"MyCell" bundle:nil];
    [myCollectionView registerNib:cellNib forCellWithReuseIdentifier:@"cvCell"];
    
    //create flow layout
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setItemSize:CGSizeMake(100, 100)];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
    
    //add flow layout to our collection view
    [myCollectionView setCollectionViewLayout:flowLayout];
    
    //optional : if you didn't hook up Datasource and delegate with File owner, you can use this
    //myCollectionView.dataSource = self;
    //myCollectionView.delegate=self;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    
}

#pragma mark - UICollectionView DataSource methods


// DataSource - optional method
- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
    return 1;
}

// DataSource - mandatory methods
-(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [contentArray count];
}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    NSString *cellData = [contentArray objectAtIndex:indexPath.row];
    static NSString *cellIdentifier = @"cvCell";    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];    
    UILabel *titleLabel = (UILabel *)[cell viewWithTag:100];    
    [titleLabel setText:cellData];    
    return cell;    
}

#pragma mark - UICollectionView Delegate method

// Delegate - optional method
-(void) collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    NSString *cellData = [contentArray objectAtIndex:indexPath.row];
    
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:[NSString stringWithFormat:@"You have selected %@ item",cellData] delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
    [alert show];
    
}

@end
-----------------------------------------------------------------------------------------------------------------------------------------


Make sure your AppDelegate file code should be default 

Finally our AppDelegate.h file look like 

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  AppDelegate.h
//  CollectionViewDemo
//
//  Created by RDC on 3/6/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) ViewController *viewController;

@end
-----------------------------------------------------------------------------------------------------------------------------------------


Finally our AppDelegate.m file look like 

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  AppDelegate.m
//  CollectionViewDemo
//
//  Created by RDC on 3/6/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import "AppDelegate.h"

#import "ViewController.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    return YES;
}

//for now leave rest all empty methods..

@end
-----------------------------------------------------------------------------------------------------------------------------------------


Okay wrap it up this application. let's Run it.

Here is the output 




Cheers!! we did it. It was so simple because Apple did everything for us.
we just made it alive.

You can find complete project source code zip file here : CollectionViewDemo.zip (73.94 KB)


I Would love to here your thoughts !! 

No comments:

Post a Comment