??到Storyboard中，選擇collection view controller中的"Collection View"。在Attributes inspector中，選擇"Section Header"和"Section Footer",一旦選中你就會在屏幕中看到下面的的顯示：
?
??最重要的是，我們必須為header和footer view指定一個標識符。這個標示符將會被用于代碼識別圖片名稱。在Atteributes inspector中設置header view的identifier為“HeaderView”,同樣的把footer view的identifier設置為“FooterView”。
接下來為Header View 和Footer View添加新類
?在默認情況下，header和footer view和UICollectionResuable類相關聯。為了在header view中顯示我們需要的內容，我們必須創建一個新的繼承自UICollectionResuableView的類，我們可以命名為MyHeaderViewh和MyFooterView。
?
設置好相關Outlet
?
#import "MyHeaderView.h"
#import "MyFooterView.h"
// 定義 Header View Size
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
? ? return CGSizeMake(0, 40);
}
?
// 定義 Footer View Size
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
? return CGSizeMake(0, 40);
}
// 為collection view添加頁眉或頁腳
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
?? ?
? ? UICollectionReusableView *reusableview = nil;
?? ?
? ? if (kind == UICollectionElementKindSectionHeader){
?? ? ? ?
? ? ? ? MyHeadView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
?? ? ? ?
? ? ? ? NSString *title = [[NSString alloc] initWithFormat:@"Recipe Group Header #%ld",indexPath.section +1];
?? ? ? ?
? ? ? ? headerView.headerTitle.text = title;
? ? ? ? headerView.headerImageView.backgroundColor = [UIColor grayColor];
?? ? ? ?
? ? ? ? reusableview = headerView;
?? ? ? ?
? ? }
? ? else if (kind == UICollectionElementKindSectionFooter){
?? ? ? ?
? ? ? ? MyFooterView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
?? ? ? ?
? ? ? ? NSString *title = [[NSString alloc] initWithFormat:@"Recipe Group Footer #%ld",indexPath.section +1];
?? ? ? ?
? ? ? ? footerview.footerTitle.text = title;
? ? ? ? footerview.footerImageView.backgroundColor = [UIColor greenColor];
?? ? ? ?
? ? ? ? reusableview = footerview;
?? ? ? ?
? ? }
?? ?
? ? return reusableview;
?? ?
}
?
// 一下是完整代碼
#import "PhotoCollectionViewController.h"
#import "MyHeadView.h"
#import "MyFooterView.h"
?
@interface PhotoCollectionViewController ()
?
@property (nonatomic, strong) NSMutableArray *dataArray;
?
@end
?
@implementation PhotoCollectionViewController
?
static NSString * const reuseIdentifier = @"Cell";
static NSString * const headerIdentifier = @"HeaderView";
static NSString * const footerIdentifier = @"FooterView";
?
- (void)viewDidLoad {
? ? [super viewDidLoad];
?? ?
? ? // Uncomment the following line to preserve selection between presentations
? ? // self.clearsSelectionOnViewWillAppear = NO;
?? ?
? ? self.collectionView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.3];
?? ?
? ? // Register cell classes
? ? [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];
?? ?
? ? NSMutableArray *array1? = [[NSMutableArray alloc]initWithObjects:@"image1.png",@"image2.png",@"image3.png",@"image4.png", nil];
? ? NSMutableArray *array2? = [[NSMutableArray alloc]initWithObjects:@"image4.png",@"image3.png",@"image2.png", nil];
? ? NSMutableArray *array3? = [[NSMutableArray alloc]initWithObjects:@"image1.png",@"image2.png", nil];
? ? NSMutableArray *array4? = [[NSMutableArray alloc]initWithObjects:@"image1.png", nil];
?? ?
? ? _dataArray = [NSMutableArray arrayWithObjects:array1,array2,array3,array4, nil];
?? ?
?? ?
? ? // Do any additional setup after loading the view.
}
?
- (void)didReceiveMemoryWarning {
? ? [super didReceiveMemoryWarning];
? ? // Dispose of any resources that can be recreated.
}
?
/*
#pragma mark - Navigation
?
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
? ? // Get the new view controller using [segue destinationViewController].
? ? // Pass the selected object to the new view controller.
}
*/
?
#pragma mark <UICollectionViewDataSource>
?
// 返回collection view里區section的個數
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
? ? return [_dataArray count];
}
?
// 返回指定區section包含的Items
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
? ? return [[_dataArray objectAtIndex:section] count];
}
?
#pragma mark <UICollectionViewDelegate>
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
? ? //重用cell
? ? PhotoCollectionViewCell *myCell = [collectionView
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dequeueReusableCellWithReuseIdentifier:@"photoCell"
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? forIndexPath:indexPath];
?? ?
? ? myCell.backgroundColor = [UIColor yellowColor];
?? ?
?? ?
? ? UIImage *image = [UIImage imageNamed:[[_dataArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row] ];
? ? myCell.phontImageView.image = image;
? ? return myCell;
}
?
// 定義每個UICollectionViewCell 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
? ? return CGSizeMake((self.view.frame.size.width-40)/3.0, (self.view.frame.size.width-40)/3.0);
}
?
// 定義每個Section 的 margin
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
? ? return UIEdgeInsetsMake(20, 10, 5, 10);
}
?
// 每個section中不同的行之間的行間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
? ? return 10.0;
}
?
// 定義每個Section 的 margin
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
? ? return 10.0;
}
?
// indexPath處的item被選擇時觸發
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
? ? NSLog(@"%ld",indexPath.row);
}
?
// 定義 Header View Size
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
? ? return CGSizeMake(0, 40);
}
?
// 定義 Footer View Size
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
? return CGSizeMake(0, 40);
}
?
// 為collection view添加頁眉或頁腳
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
?? ?
? ? UICollectionReusableView *reusableview = nil;
?? ?
? ? if (kind == UICollectionElementKindSectionHeader){
?? ? ? ?
? ? ? ? MyHeadView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
?? ? ? ?
? ? ? ? NSString *title = [[NSString alloc] initWithFormat:@"Recipe Group Header #%ld",indexPath.section +1];
?? ? ? ?
? ? ? ? headerView.headerTitle.text = title;
? ? ? ? headerView.headerImageView.backgroundColor = [UIColor grayColor];
?? ? ? ?
? ? ? ? reusableview = headerView;
?? ? ? ?
? ? }
? ? else if (kind == UICollectionElementKindSectionFooter){
?? ? ? ?
? ? ? ? MyFooterView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
?? ? ? ?
? ? ? ? NSString *title = [[NSString alloc] initWithFormat:@"Recipe Group Footer #%ld",indexPath.section +1];
?? ? ? ?
? ? ? ? footerview.footerTitle.text = title;
? ? ? ? footerview.footerImageView.backgroundColor = [UIColor greenColor];
?? ? ? ?
? ? ? ? reusableview = footerview;
?? ? ? ?
? ? }
?? ?
? ? return reusableview;
?? ?
}運行效果
)
