[[Image:iphone_ios6_competed_collectionview_app.png|A CollectionView example with a supplementary view header]]
Figure 49-12
The previous chapter (An Overview of iOS 6 Collection Views and Flow Layout) covered a considerable amount of ground in terms of the theory behind collection views in iOS 6. This chapter has put much of this theory into practice through the implementation of an example application that uses a collection view to display a gallery of images.
== Implementing the Supplementary View Protocol Methods ==
In order for the supplementary header view to work, a data source method needs to be implemented. When the collection view is ready to display a supplementary view it will call the viewForSupplementaryElementOfKind: method of the data source and expect, in return, a configured object ready to be displayed. Passed through as an argument to this method is a value indicating whether this is a header or footer which can be checked by the code to return the appropriate object. Note also that supplementary views also use a dequeuing mechanism similar to cells. For this example, implement the viewForSupplementaryElementOfKind: as follows:
<pre>
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
MySupplementaryView *header = nil;
if ([kind isEqual:UICollectionElementKindSectionHeader])
{
header = [collectionView dequeueReusableSupplementaryViewOfKind:kind
withReuseIdentifier:@"MyHeader"
forIndexPath:indexPath];
header.headerLabel.text = @"Car Image Gallery";
}
return header;
}
</pre>
Next, select the MyCollectionViewController.h file and import the header file for the new MySupplementaryView class:
<pre>
#import <UIKit/UIKit.h>
#import "MyCollectionViewCell.h"
#import "MySupplementaryView.h"
@interface MyCollectionViewController : UICollectionViewController
<UICollectionViewDataSource, UICollectionViewDelegate>
@property (strong, nonatomic) NSMutableArray *carImages;
@end
</pre>
Compile and run the application once again (Figure 49-12) and note that the header supplementary view is now visible in the collection view.
[[Image:]]
Figure 49-12
== Deleting Collection View Items ==
The last task in this tutorial is to implement functionality to allow items to be removed from the data model and the collection view. This is a two step process, the first step being the removal of the item from the data model (in this instance the carItems array). Having removed the item from the data model, the next step is to remove it from the collection view. This is achieved by passing through an array of index path objects for the items to be removed to the deleteItemsAtIndexPaths: method of the collection view object. For the purposes of this example, we will re-purpose the didSelectItemAtIndexPath: delegate method so that instead of changing the scroll direction it now causes the selected item to be deleted. Select the MyCollectionViewController.m file, locate the didSelectItemAtIndexPath: method and modify it so that it reads as outlined in the following listing:
<pre>
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
int row = [indexPath row];
[_carImages removeObjectAtIndex:row];
NSArray *deletions = @[indexPath];
[self.collectionView deleteItemsAtIndexPaths:deletions];
}
</pre>
Compile and run the application one final time and note that items are deleted from the collection view as they are selected. Note also how the collection view animates the re-arrangement of the remaining cells to fill the gap left as a result of a deletion.
== Summary ==
The previous chapter ([[An Overview of iOS 6 Collection Views and Flow Layout]]) covered a considerable amount of ground in terms of the theory behind collection views in iOS 6. This chapter has put much of this theory into practice through the implementation of an example application that uses a collection view to display a gallery of images.
