怎样在UICollectionView中添加Header和footer

1、cell view怎样在 UICollectionView中添加 Header 和 footer在前面我们已经学过，每个据源为其提供内容。它的责任是为的事情：collection view 都必须有数collection views 完成以下控制 collection view 的 section 数目每个 section 中的 item 的个数为特定的数据项提供显然，简单的 Recipe app，我们在前面的教程中包含了其中一个部分，在这里我们将继续讲讲 collection view 并且告诉你如何利用不同的 section 组织 items，你将会学到怎样为 collection vie

2、w 添加 header 视图和 footer 视图。如果你没有看过前面的教程，建议你去看一看前面的教程，或者你可以到这里下载here。 Split Recipes into TwoSections in UICollectionView在这个简单的程序中，RecipeCollectionViewController是集合视图的数据源对象，为了把视图分成两个部分，我们需要有一些变化，接下来我们完成：起先，recipeImages 数组是存储所有recipes 的名称，因为我们想把recipes 分成两组，我们要修改我们的代码，并使用签到数组来存储不同的recipe，也许你还不明白啥是嵌入的数组，

3、下面的图片会让你明白的。第一组包含主要的图像，而另一个为drink 和 dessert。顶级数组（即 recipeImages）包含两个数组，每个数组部分的特定区域包含特定的dataitems。让我们开始编写代码，在RecipeCollectionViewController.m中初始化 recipeImages 数组，并在 viewDidload 方法中写下面的方法：- (void)viewDidLoadsuper viewDidLoad;/Initialize recipe image arrayNSArray *mainDishImages = NSArrayarrryWithObjec

4、ts:egg_benedict.jpg, full_breakfast.jpg,ham_and_cheese_panini.jpg,ham_and_egg_sandwich.jpg, hamburger.jpg,instant_noodle_with_egg.jpg,japanese_noodle_with_pork.jpg, mushroom_risotto.jpg,noodle_with_bbq_pork.jpg, thai_shrimp_cake.jpg,vegetable_curry.jpg, nil;NSArray *drinkDessertImages = NSArrayarray

5、WithObjects:angry_birds_cake.jpg,creme_brelee.jpg, green_tea.jpg,starbucks_coffee.jpg, white_chocolate_donut.jpg, nil;recipeImages = NSArrayarrayWithObjects:mainDishImages,drinkDesserImages,nil;上面的代码将recipes images 分成两组。接下来，修改 numberOfIntemsInSecion: 方法来返回，每个secions 中的 items 数目：-(NSInteger)collectio

6、nView:(UICollectionView*)collectionViewnumberOfItemsInSecion:(NSInteger)sectionreturn recipeImagesobjectAtIndex:sectincount;接下来我们按照下面的方法修改cellForItemAtIndexPath: 方法(UICollectionVIewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPathstatic NSString *

7、identifier = Cell;RecipeViewCell *cell = (RecipeViewCell*)collectionView dequeueReuseIdentifier:identifier forIndexPath:indexPath;UIImageView *recipeImageView =(UIImageView *)cell viewWithTag:100; recipeImageView.image = UIImageimagedNamed:recipeImagesindexPath.sectionobjectAtIndex:indexPath.row;cel

8、l.backgroundView = UIImageView allocinitWithImage:UIImageimageNamed:photo-frame-2.png;return cell;你可以和以前的代码比较以下，你就会知道只有一样是唯一的变化。我们首先检索该数组的section number 然后从 section 中获取具体的items。最后，怎样给collection view 实现两个section,这个可以通过方法调用下面的方法来完成即：在RecipeCollectionViewController.m中的numberOfSectionsInCollectionView方法

9、，在 collectin View 中返回 section 中的数量。-(NSInteger)numberOfSectionsInCollectionVIew:(UICollectionView *)collectionViewreturn recipeImages count;现在运行你的app，你会在屏幕上看到下面的显示Tweak theMargin of Your Content using Section Insets（利用 Section Insets）程序是完成了，但是你是否觉得看起来并不怎么顺眼呢？图像的第一部分的最后一行和第二部分的第一样靠的太近。我们可以使用插入图到内容周围的

10、空间中来改变一些格局，通过下图你可以比较直观 的看到影响： 你可以利用 UIEdgeInsetsMake 来完成插入：insert =UIEdgeInsetsMake(top,left,botton,right);在我们的 Recipe app 中我们只能在两个section 之间添加空间。在 RecipeCollectionViewController.m文件中的ViewDidLoad 方法中，添加下面的方法：UICollectionViewFlowLayout*collectionViewLayout = (UICollectionViewFlowLayout*)self.collecti

11、onViewFlowLayout;collectionViewLayout.sectionInset =UIEdegeInsetsMake(20,0,0,0);上面的代码实现了在collection view中创建和添加插入。现在我们运行程序，你将会看到下面的图像显示，我们在两个 section 之间增加了一些空间。添加头部和底部视图现在我们进一步调整应用程序，让其更酷。让我们来给应用程序添加头部和底部视图 ,我们利用 UICollectionViewFlowLayout 来实现这一点。这里的 header和 footer 视图可以被称为流布局的补充。在默认情况下，这些视图是在流布局中禁用的。

12、但可以通过下面几件事情来配置 header 和 footer 视图：为了尽量保持简单，所以我们可以选择storyboard 来实现(当然这不是必须的，你同样可以使用代码来实现这一点)实现UICollectionViewDataSource协议的collectionView:viewForSupplementaryElementOfKind并通过这个方法来实现补充试图在collection view在 Storyboard 中设计 Header 和 Footer方法，中显示。首先 download the header/footer background images 并且添加到 Xcode 工

13、程中。到 Storyboard 中，选择 collection view controller中的Collection View 。在 Attributes inspector 中，选择 SectionHeader和Section Footer, 一旦选中你就会在屏幕中看到下面的的显示：在 header和 footer 之间默认为空， 我们会用 storyboard来设计视图。 header view 是专门用来显示一个部分的标题，而底部视图只显示静态横幅图片。利用storyboard ，从对象库中拖出 image view 并在其上面添加一个标签。设置字体颜色为白色，底部视图只需添加一个im

14、age view 。如图：选中 footer view 中的 image view ，在 Attributes inspector 中命名背景图片为 footer_banner.png最重要的是，我们必须为header 和 footer view 指定一个标识符。这个标示符将会被用于代码识别图片名称。在 Atteributes inspector 中设置 header view 的 identifier 为“HeaderView ”,同样的把 footer view 的 identifier 设置为 “FooterView ”。为 Header View 添加新类在默认情况下， header

15、和 footer view 和UICollectionResuable 类相关联。为了在header view 中显示我们需要的背景和标题，我们必须创建一个新的继承自UICollectionResuableView的类，我们可以命名为RecipeCollectionHeaderView 。在 storyboard 的 Identifier inspector 中的 sustom class设置为 “RecipeCollectionHeaderView ”。按住 Ctrl 键，单机 header中的 image view, 并拖向 RecipeCollectionHeaderView.h 中插入

16、一个 Outlet 变量。命名变量为 backgroundImage 。重复同样的步骤对 UILabel 实现，然后命名为 title 。实现 viewForSupplementaryElementOfKind方法如果你尝试运行应用程序，你可能不会看到header 和 footer ，这是因为我们还没有实现viewFOrSupplementaryElementOfKind:方法。选择“RecipeCollectionViewController ” ,并添加 import 语句。#import RecipeCollectionHeaderView.h下面就是实现viewforSupplemen

17、taryElementOfKind方法的代码：(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPathUICollectionReusableView *reusableview = nil;if (kind = UICollectionElementKindSectionHeader) RecipeCollectionHe

18、aderView *headerView =collectionViewdequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:HeaderViewforIndexPath:indexPath;NSString *title = NSString alloc initWithFormat:Recipe Group #%i,indexPath.section +1;UIImage *headerImage = UIImageif (kind = UICollectionElementKindSectionFooter) UICollectionReusableView *footerview = collectionViewdequeueResuableSupplementaryViewOfKind:UICollectionElem entKindSectionFooter withReuseIdentifier:FooterView forIndexPath:i