??到Storyboard中，選擇collection view controller中的"Collection View"。在Attributes inspector中，選擇"Section Header"和"Section Footer",一旦選中你就會(huì)在屏幕中看到下面的的顯示：

?

??最重要的是，我們必須為header和footer view指定一個(gè)標(biāo)識(shí)符。這個(gè)標(biāo)示符將會(huì)被用于代碼識(shí)別圖片名稱。在Atteributes inspector中設(shè)置header view的identifier為“HeaderView”,同樣的把footer view的identifier設(shè)置為“FooterView”。

接下來為Header View 和Footer View添加新類

?在默認(rèn)情況下，header和footer view和UICollectionResuable類相關(guān)聯(lián)。為了在header view中顯示我們需要的內(nèi)容，我們必須創(chuàng)建一個(gè)新的繼承自UICollectionResuableView的類，我們可以命名為MyHeaderViewh和MyFooterView。

?

設(shè)置好相關(guān)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里區(qū)section的個(gè)數(shù)

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

? ? return [_dataArray count];

}

?

// 返回指定區(qū)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;

}

?

// 定義每個(gè)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);

}

?

// 定義每個(gè)Section 的 margin

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

? ? return UIEdgeInsetsMake(20, 10, 5, 10);

}

?

// 每個(gè)section中不同的行之間的行間距

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

{

? ? return 10.0;

}

?

// 定義每個(gè)Section 的 margin

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section

{

? ? return 10.0;

}

?

// indexPath處的item被選擇時(shí)觸發(fā)

- (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;

?? ?

}運(yùn)行效果

轉(zhuǎn)載于:https://www.cnblogs.com/joesen/p/4452850.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的StroyBoard中UICollectionView中添加Header和footer的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。