iOS 6开发---应用集合视图（UICollectionView）-实现补充视图（Supplementary View）

关于集合视图UICollectionView的相关文章：

第三十一部分：应用集合视图（UICollectionView）-使用xib文件创建集合视图单元格 第三十一部分：应用集合视图（UICollectionView）-创建UICollectionViewCell子类单元格 第三十一部分：应用集合视图（UICollectionView）-创建基于Storyboard的集合视图应用程序

本文摘录自《一步一步学习 iOS 6 编程（第四版）》电子书，部分截图省略。

改变滚动方向

默认情况下，集合视图配置的流布局（flow layout）是垂直滚动模式，我们可以通过Attriubtes inspector面板窗口进行调整。

将集合视图的Scroll Direction属性从默认的Vertical 更改为Horizontal，然后再次运行应用程序。现在是水平横向滚动集合视图中的图像。

实现补充视图（Supplementary View）

接下来我们演示实现补充视图，在图像列表上添加一个头部标题。首先，在interface builder，为集合视图添加一个原型头部（prototype header）补充视图。在MainStoryboard.storyboard文件中，选择黑色背景的集合视图控制器场景，这个表示UICollectionView对象。在Attributes inspector面板窗口，Collection View节点下，选择Section Header 复选框。

 

在Section Header启用之后，一个header prototype对象添加到Storyboard画布中。和原型单元格一样，头部也可以使用对象库中的其他视图对象。例如，我们在原型头部中添加一个Label标签对象，随便调整一下Label标签的宽度，以便容纳更多的文本信息。同时，利用自动布局（Auto Layout）设置Label标签为水平和垂直居中。默认情况下，标签对象为黑色字体，因此标签文本看不到。这里，我们选择label标签，在Attributes inspector面板窗口，设置Color属性为白色，设置完成之后，场景如下图所示。

然后，我们在项目中添加一个新类，作为header视图指定类。选择File > New > File…菜单项，添加一个新的Objective-C 类，命名为PhotoSupplementaryView，作为UICollectionReusableView的子类。

在Storyboard中选择header，然后在Identity inspector 面板窗口，设置Class属性为前面添加的PhotoSupplementaryView类。和单元格一样，补充视图（Supplementary View）也是可重用的。因此选择Attributes inspector面板窗口，设置Identifier属性为PhotoHeader。

在header区域显示的文本将在视图控制器的数据源方法中设置。我们需要建立Label标签的输出口，显示Assistant Editor窗口，同时还需要打开PhotoSupplementaryView.h头文件。可以通过编辑器上部的文件导航栏选择打开这个文件。

然后建立header中label标签到MySupplementView类的输出口连接，命名为headerLabel。 #import <UIKit/UIKit.h> @interface PhotoSupplementaryView : UICollectionReusableView @property (strong, nonatomic) IBOutlet UILabel *headerLabel; @end

实现补充视图协议方法

接下来还需要实现补充视图的数据源方法，当集合视图显示补充视图（supplementary view）时，它会调用数据源的viewForSupplementaryElementOfKind：方法，并期望返回一个用于显示的对象。这个方法的一个传入参数，可标示这是一个header或者footer。另外，补充视图也使用了类似于单元格的出列机制（dequeue mechanism）。 先打开PhotoCollectionViewController.h文件，引入补充视图的头文件： #import “PhotoSupplementaryView.h”

然后打开PhotoCollectionViewController.m文件，添加viewForSupplementaryElementOfKind：方法的实现代码： - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ PhotoSupplementaryView *header = nil; if([kind isEqual:UICollectionElementKindSectionHeader]){ header = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"PhotoHeader" forIndexPath:indexPath]; header.headerLabel.text = @"爱车和美女"; } return header; }

再次编译运行应用程序，这次发现header补充视图显示在集合视图中了。