Pages

Wednesday, February 13, 2013

Simple UICollectionView Sample

Here i am giving you an easy sample for UICollectionView. and you can learn how to use the UICollectionView in simple way.

1. First of all drag UICollectionView inside UIView, where you want to show UICollectionView.

2. Now set the property of UICollectionView by clicking show the Size Inspector, 2nd Last tab.
   - Here you can set the Cell Size, as per you required. (lets assume wd: 300, ht: 300)
   - You can set the gap also between cell.

3. Now go for its class file i.e. in  ".h". and add following code also add IBOutlet for the UICollectionView



#import <UIKit/UIKit.h>

@interface ProjectsViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *projectListView;

@end;

4. Now go for its ".m" file and add the following code in viewDidLoad


[self.projectListView registerNib:[UINib nibWithNibName:@"ProjectCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"projectCell"];

5. Now add the following functions, which is necessary for the UICollectionViewDelegate and datasource.


- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section{
    return [projectList count]; // Returns the total object counts
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;
{
    ProjectCollectionViewCell *cell = (ProjectCollectionViewCell *)[cv dequeueReusableCellWithReuseIdentifier:@"projectCell" forIndexPath:indexPath];
    
    NSString *imagePath = [NSString stringWithFormat:@"http://www.xyz.com/foldername/imagename.jpg"];
    
    NSURL *imageURL = [NSURL URLWithString:imagePath];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    cell.projectImage.image = [UIImage imageWithData:imageData];
    
    return cell;
}

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

6. Before you get proceed, You have to take one more action
  - Create Cell class wit the name of  ProjectCollectionViewCell
  - for this Just create new Objective-C Class with Subclass of UICollectionViewCell
  - This will not create any XIB for this. So create a new File as User Interface>Empty
  - Now Go in xib file and drag Collection View Cell in empty space
  - And Drag UIImageView inside Collection View Cell, set the IBOutlet for this UIImage (i have taken projectImage) .
  - Now just click the Collection View Cell and set the Class (in identifier inspector) name as ProjectCollectionViewCell.
  - And Set the Identifier (in attributes Inspector) as projectCell. (can put any name)

Thats it :) Now check every step in step 5.

UICollectionView handles Lazy Loading itself, which handled the image loading at run time. It will just load the image, which is in the screen.

TroubleShooting
1. Some time delegate function numberOfItemsInSection or cellForItemAtIndexPath didn't call.
No worry about this, Just follow the following steps

 - You must added delegates and data source in .h file as

<UICollectionViewDataSource, UICollectionViewDelegate>
 - Now add following code to load it perfectly, where you required

[projectListView reloadData];