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补充视图显示在集合视图中了。

原文地址:https://www.cnblogs.com/tuncaysanli/p/2821861.html