iOS Tutorial UICollectionView

iOS UICollectionView Tutorial

knowventBanner

Since the release of iOS 6 UICollectionView have been taking the weight off of UITableViews. Some speculate that UICollectionView might just replace the need for the UITableView. I can certainly entertain that notion. Regardless of the UICollectionView’s place in the iOS world you will see that using a UICollectionView is no more complicated then a UITableView’s implementation.

UICollectionView Tutorial Delegate Protocols

The base UICollectionViewController class inherits from UIViewController and adheres to two protocols: <UICollectionViewDelegate> and <UICollectionViewDataSource>. The <UICollectionViewDelegate> protocol method are all optional and are used to select/deselect/highlight/un-highlight views in the collection. The <UICollectionViewDataSource> configures the collection view with the view count and the cellForItemAtIndexPath configuration for each collection item.


UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return itemCount;
}

Just like the UIViewTableView implementation you need to define how many views will need to be rendered in the UICollectionView using collectionView:numberOfItemsInSection method.

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell* cell = nil;

    cell = [collectionView dequeueReusableCellWithReuseIdentifier:ITDBasicViewReusableIdentifier
                                                     forIndexPath:indexPath];


    ((ITDBasicCollectionViewCell*)cell).txtTitle.text = [NSString stringWithFormat:@"%i", indexPath.row + 1];
    return cell;
}

With the cellForItemAtIndexPath method you will define your view. Here, I am just setting the view’s label text to the index number.

Implementing these two methods is the only hard requirement to getting the UICollectionView running.


Managing the UICollectionViewLayout

The UICollectionView has a UICollectionViewFlowLayout that manages and organizes items into a grid. The UICollectionViewFlowLayout has the following properties for configuration:

  • scrollDirection: Sets the scroll direction of the grid.
  • minimumLineSpacing: Sets the minimum spacing between collection lines/rows
  • minimumInteritemSpacing: Sets the minimum spacing between items in the same row.
  • itemSize: Sets the height and width of the item.
  • sectionInset: Sets the margin for each section within the collection view.
  • headerReferenceSize: Sets the default size for each section’s header.
  • footerReferenceSize: Sets the default size for each section’s footer.

Examples of Changing the UICollectionViewFlowLayout properties

itemSize

UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
//CHANGE WIDTH
flowLayout.itemSize = CGSizeMake(value, flowLayout.itemSize.height);
//CHANGE HEIGHT
flowLayout.itemSize = CGSizeMake(flowLayout.itemSize.width, value);

minimumLineSpacing

UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
flowLayout.minimumLineSpacing = value;

minimumInteritemSpacing

UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
flowLayout.minimumInteritemSpacing = value;

sectionInset

UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
flowLayout.sectionInset = UIEdgeInsetsMake(value, value, value, value);

scrollDirection

UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
flowLayout.scrollDirection = newDirection;

Applying the UICollectionView UICollectionViewFlowLayout Changes

These layout changes can be applied in series simply apply setting each property as needed:

- (IBAction)sdrLineSpacing_Changed:(id)sender {
    UISlider *sdr = (UISlider*)sender;
    float value = sdr.value;


    self.lblViewSpacing.text = [NSString stringWithFormat:@"%i", (int)value];

    UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
    flowLayout.minimumLineSpacing = value;

}

The alternative and perhaps the preferred method is batching the UICollectionView Layout change via performBatchUpdates:completion: method. This method accepts a block to execute the change and a completion block to execute after the updates have been applied.

This gives the UICollectionView the ability to execute the insert/updates/deletes, perform animations while limited the computations needed.

This is what the above action looks like when utilizing the performBatchUpdates method:

- (IBAction)sdrItemSpacing_Changed:(id)sender {
    UISlider *sdr = (UISlider*)sender;
    float value = sdr.value;

    self.lblItemSpacing.text = [NSString stringWithFormat:@"%i", (int)value];

    [self.parentCollectionView performBatchUpdates:^{

        UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*) self.parentCollectionView.collectionViewLayout;
        flowLayout.minimumInteritemSpacing = value;

    } completion:nil];
}

Feel free to download the full source for this tutorial.

Let me know if this helped you out.

Posted in iOS, Mobile and tagged , , , .