UICollectionView is one of the powerful feature that apple adopted for iOS SDK to customize the view in grid manner. Prior to iOS 6, to achieving this we have to use third party framework stuff like AQGridView. UICollectionView is similar to UITableView in concept because they use the almost same protocol reference like datasource and delegates. As per the apple documentation, the UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. 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.
When adding a collection view to your user interface, your app’s main job is to manage the data associated with that collection view. The collection view gets its data from the data source object, which is an object that conforms to the UICollectionViewDataSource protocol and is provided by your app. Data in the collection view is organized into individual items, which can then be grouped into sections for presentation. An item is the smallest unit of data you want to present. For example, in a photos app, an item might be a single image. The collection view presents items onscreen using a cell, which is an instance of the UICollectionViewCell class that your data source configures and provides.
Create a new project in Xcode using single window application template and name it as TableViewMultiSelection. Before proceeding further we need to add a navigation controller to the AppDelegate and make ViewController as its root view. We can do this either by adding UINavigationController and its root view in AppDelegate.m file or by using nib file of ViewController class. I am not digging into the details of the navigation code because it is quite common in all applications. Now open the MainStoryboard.storyboard file and add UICollectionView outlet, UIImageView outlets as follows.
Open ViewController.h file and register this class with UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate protocols as per the following code.
@property (strong, nonatomic) IBOutlet UICollectionView *collectuinView;
@end
Another important advantage of UICollectionView is its layout object called UICollectionViewLayout. The main objective of this object is to lookup the frame and visual state of items in the collection view. The UICollectionViewDelegateFlowLayout protocol defines methods that let you coordinate with UICollectionViewFlowLayout object to implement a grid-based layout. The methods of this protocol define the size of items and the spacing between items in the grid. Before we proceed further, we need to register a class for use in creating new collection view cells. To do that add the following line of code in viewDidLoad method of ViewController.m file.
Same as in UITableView, we also have numberOfItemsInSection, numberOfSectionsInCollectionView data source methods in UICollectionView. In this project we are creating UICollectionView with 1 section, 30 cells.
{
return 30;
}
– (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView
{
return 1;
}
The data for each cell will be defined by the cellForItemAtIndexPath method as follows.
{
static NSString *CellIdentifier = @"GradientCell";
UICollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row)/255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1];
return cell;
}
At this stage, we need to clearly return the size and permissible area for displaying each item in collection view. This can be done by adding the following code.
{
return CGSizeMake(100, 100);
}
– (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 5, 5, 5);
}
The following methods describe the touch events for the collection view. We can enable or disable the touches using shouldSelectItemAtIndexPath delegate method.
{
UICollectionViewCell *cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
}
– (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
Now build and run the code, you will see the collection view with different back ground colour for each cell. After tapping any cell, observe that cell background color will becomes white.
