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

  • 相关阅读:
    MQTT TLS 加密传输
    python多进程并发redis
    各种消息队列的特点
    mqtt异步publish方法
    Numpy API Analysis
    Karma install steps for unit test of Angular JS app
    reinstall bower command
    Simulate getter in JavaScript by valueOf and toString method
    How to: Raise and Consume Events
    获取对象的类型信息 (JavaScript)
  • 原文地址:https://www.cnblogs.com/tuncaysanli/p/2821861.html
Copyright © 2020-2023  润新知