文档章节

怎样在UICollectionView中添加Header和footer

人生天地间
 人生天地间
发布于 2014/04/12 23:40
字数 1700
阅读 77279
收藏 14

           在前面我们已经学过,每个collection view都必须有数据源为其提供内容。它的责任是为collection views完成以下的事情:

  • 控制collection view的section数目

  • 每个section中的item的个数

  • 为特定的数据项提供cell view

         显然,简单的Recipe app,我们在前面的教程中包含了其中一个部分,在这里我们将继续讲讲collection view并且告诉你如何利用不同的section组织items,你将会学到怎样为collection view添加header视图和footer视图。

       如果你没有看过前面的教程,建议你去看一看前面的教程,或者你可以到这里下载here


 Split Recipes into Two Sections in UICollectionView

          在这个简单的程序中,RecipeCollectionViewController是集合视图的数据源对象,为了把视图分成两个部分,我们需要有一些变化,接下来我们完成:

           起先,recipeImages数组是存储所有recipes的名称,因为我们想把recipes分成两组,我们要修改我们的代码,并使用签到数组来存储不同的recipe,也许你还不明白啥是嵌入的数组,下面的图片会让你明白的。第一组包含主要的图像,而另一个为drink和dessert。顶级数组(即recipeImages)包含两个数组,每个数组部分的特定区域包含特定的data items。

Nested Array Explained

           让我们开始编写代码,在RecipeCollectionViewController.m中初始化"recipeImages"数组,并在viewDidload方法中写下面的方法:

        - (void)viewDidLoad

    {

              [super viewDidLoad];

            //Initialize recipe image array

           NSArray *mainDishImages = [NSArray arrryWithObjects:@"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 = [NSArray arrayWithObjects:@"angry_birds_cake.jpg"@"creme_brelee.jpg"@"green_tea.jpg"@"starbucks_coffee.jpg"@"white_chocolate_donut.jpg"nil];

      recipeImages = [NSArray arrayWithObjects:mainDishImages,drinkDesserImages,nil];

    }

          上面的代码将recipes images分成两组。接下来,修改"numberOfIntemsInSecion:"方法来返回,每个secions中的items数目:

        - (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSecion:(NSInteger)section

   {

             return [[recipeImages objectAtIndex:sectin]count];

   }

              接下来我们按照下面的方法修改"cellForItemAtIndexPath:"方法

       - (UICollectionVIewCell *)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

              static NSString *identifier = @"Cell";

              RecipeViewCell *cell = (RecipeViewCell *)[collectionView dequeueReuseIdentifier:identifier forIndexPath:indexPath];

             UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];

             recipeImageView.image = [UIImage imagedNamed:[recipeImages[indexPath.section] objectAtIndex:indexPath.row]];

             cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"photo-frame-2.png"]];

                  return cell;

}

        你可以和以前的代码比较以下,你就会知道只有一样是唯一的变化。我们首先检索该数组的section number然后从section中获取具体的items。

         最后,怎样给collection view实现两个section,这个可以通过方法调用下面的方法来完成即:在RecipeCollectionViewController.m中的numberOfSectionsInCollectionView方法,在collectin View中返回section中的数量。

  - (NSInteger)numberOfSectionsInCollectionVIew:(UICollectionView *)collectionView

{

    return [recipeImages count];

}

现在运行你的app,你会在屏幕上看到下面的显示

Recipe App with Two Sections

Tweak the Margin of Your Content using Section Insets

 (利用Section Insets)

   程序是完成了,但是你是否觉得看起来并不怎么顺眼呢?图像的第一部分的最后一行和第二部分的第一样靠的太近。我们可以使用插入图到内容周围的空间中来改变一些格局,通过下图你可以比较直观 的看到影响:

Add margin using section insets

    你可以利用UIEdgeInsetsMake来完成插入:

               insert = UIEdgeInsetsMake(top,left,botton,right);

    在我们的Recipe app中我们只能在两个section之间添加空间。在RecipeCollectionViewController.m文件中的ViewDidLoad方法中,添加下面的方法:

          UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout *)self.collectionViewFlowLayout;

          collectionViewLayout.sectionInset = UIEdegeInsetsMake(20,0,0,0);

 上面的代码实现了在collection view中创建和添加插入。现在我们运行程序,你将会看到下面的 图像显示,我们在两个section之间增加了一些空间。

      

Recipe Collection View with Insets


      添加头部和底部视图

             现在我们进一步调整应用程序,让其更酷。让我们来给应用程序添加头部和底部视图,我们利用UICollectionViewFlowLayout来实现这一点。这里的header和footer视图可以被称为流布局的补充。在默认情况下,这些视图是在流布局中禁用的。但可以通过下面几件事情来配置header和footer视图:

  1.   为了尽量保持简单,所以我们可以选择storyboard来实现(当然这不是必须的,你同样可以使用代码来实现这一点)

  2. 实现 UICollectionViewDataSource协议的 collectionView:viewForSupplementaryElementOfKind 方法,并通过这个方法来实现补充试图在collection view中显示。


       在Storyboard中设计Header和Footer

       首先download the header/footer background images并且添加到Xcode工程中。

         到Storyboard中,选择collection view controller中的"Collection View"。在Attributes inspector中,选择"Section Header"和"Section Footer",一旦选中你就会在屏幕中看到下面的的显示:

Storyboard Enables Section Header and Footer

       在header和footer之间默认为空,我们会用storyboard来设计视图。header view是专门用来显示一个部分的标题,而底部视图只显示静态横幅图片。利用storyboard,从对象库中拖出image view并在其上面添加一个标签。设置字体颜色为白色,底部视图只需添加一个image view。如图:

Design header and footer views

   选中footer view中的image view,在Attributes inspector中命名背景图片为"footer_banner.png"

Add Footer View Background

       最重要的是,我们必须为header和footer view指定一个标识符。这个标示符将会被用于代码识别图片名称。在Atteributes inspector中设置header view的identifier为“HeaderView”,同样的把footer view的identifier设置为“FooterView”。

      

Collection Reusable View Header Identifier


为Header View添加新类

    在默认情况下,header和footer view和UICollectionResuable类相关联。为了在header view中显示我们需要的背景和标题,我们必须创建一个新的继承自UICollectionResuableView的类,我们可以命名为RecipeCollectionHeaderView。

Add Collection Header View Class

  在storyboard的Identifier inspector中的sustom class设置为“RecipeCollectionHeaderView”。按住Ctrl键,单机header中的image view,并拖向RecipeCollectionHeaderView.h中插入一个Outlet 变量。命名变量为"backgroundImage"。重复同样的步骤对UILabel实现,然后命名为"title"。

   

Establish connection with RecipeCollectionHeaderVeiw

     实现viewForSupplementaryElementOfKind方法

            如果你尝试运行应用程序,你可能不会看到header和footer,这是因为我们还没有实现"viewFOrSupplementaryElementOfKind:"方法。选择“RecipeCollectionViewController”,并添加import语句。

              #import "RecipeCollectionHeaderView.h"

 下面就是实现viewforSupplementaryElementOfKind方法的代码:

    - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

      UICollectionReusableView *reusableview = nil;

     if (kind == UICollectionElementKindSectionHeader){

         RecipeCollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

         NSString *title = [[NSString alloc] initWithFormat:@"Recipe Group #%i",indexPath.section +1];

         headerView.title.text = title;

         UIImage *headerImage = [UIImage imageNamed:@"header_banner.png"];

         headerView.backgroundImage.image = headerImage;

         reusableView = headerView;

  }

        if (kind == UICollectionElementKindSectionFooter){

    UICollectionReusableView *footerview = [collectionView dequeueResuableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView" forIndexPath:indexPath];

       reusableview = footerview;

}

   return reusableview;

   

}

上面的代码告诉它页眉/页脚视图应该在每个部分中使用collect view。我们首先确定该集合视图要求header或footer view。这可以通过使用一种变量来完成。对于头来看,我们出列header view(使用dequeueReusableSupplementaryViewOfKind :方法),并设置适当的标题和图像。正如你可以从两个if之间的代码,我们使用我们之前分配给获得header/footer view标识符。

 现在运行代码,我们可以看到运行的结果:

   

Recipe App with Header and Footer


© 著作权归作者所有

共有 人打赏支持
人生天地间
粉丝 12
博文 46
码字总数 42083
作品 0
常州
程序员
加载中

评论(7)

海燕_zero
海燕_zero
怎么使用纯代码添加?54
兔失志
屌屌屌屌
我叫喂喂别让我换名
我叫喂喂别让我换名

引用来自“sixcc”的评论

section 多的话会有bug,title会重叠,请问是怎么解决的
做项目的时候collectionViewcell也会重叠,不过原因和上文中的demo没关系
人生天地间
人生天地间

引用来自“sixcc”的评论

section 多的话会有bug,title会重叠,请问是怎么解决的
这个暂时我还木有遇到过诶~
s
sixcc
section 多的话会有bug,title会重叠,请问是怎么解决的
人生天地间
人生天地间

引用来自“zhiyou30_1”的评论

求 demo 929106065@qq。com
你可以到这里下载 https://dl.dropbox.com/u/2857188/CollectionViewGroupDemo.zip
zhiyou30_1
zhiyou30_1
求 demo 929106065@qq。com
iOS CollectionView 的那些事

UICollectionView是开发中用的比较多的一个控件,本文记录UICollectionView在开发中常用的方法总结,包括使用实现Grid布局、添加Header/Footer、自定义layout布局、UICollectionView的其它方...

aron1992
08/17
0
0
iOS UICollectionView、UICollectionViewCell和Header、Footer

准备工作:创建UICollectionView ①UICollectionViewFlowLayout UICollectionViewFlowLayout是系统提供给我们一个封装好的布局设置类,其中有一些布局属性我们可以进行设置: ②UICollectio...

JoshSone
2016/11/10
340
0
UICollectionView简介

一、集合视图概述 UICollectionView也称集合视图,是一种新的数据展示方式,简单地可以理解为多列的UITableView。例如:iBooks的书架效果、购物网站的商品展示效果等等。 UICollectionView与...

黑伞将军
2015/09/14
311
0
第三方库之-MJRefresh

MJRefresh类的关系图 ***研究了一下框架, 总体的结构大概是这样的, mjheader和mjfooter都继承自一个基类, 这个基类继承自UIView, mjheader和mjfooter又都有自己的子类, 子类来实现具体的方法...

hell03W
2016/03/29
229
1
UICollectionViewController的使用

分享一下collectionviewcontroller的用法,不足之处请大家补充 1.init生成controller时需要生成相应的layout,否则报错 (instancetype)init { //创建一个流式布局对象 UICollectionViewFlow...

鄙人浪淘沙
2016/08/29
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——中介者模式

1. 认识中介者模式 1. 定义:用一个中介对象来封装一系列的对象交互行为,中介者使得各对象不需要显式的互相引用,从而使其松散耦合,独立的改变他们之间的交互。 2. 结构: Mediator:中介者...

江左煤郎
12分钟前
0
0
深入理解Plasma(1):Plasma 框架

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章作为开篇,主要目的是理解 Plasma 框架。 Plasma 作为以太坊的二层扩容...

HiBlock
20分钟前
0
0
Java 8 日期 示例

Java 8 推出了全新的日期时间API。Java处理日期、日历和时间的方式一直为社区所诟病,将 java.util.Date设定为可变类型,以及SimpleDateFormat的非线程安全使其应用非常受限。Java也意识到需...

阿刚ABC
45分钟前
1
0
RxJava操作符lift 笔记

在内部,每个Rx operator都做3件事: 它订阅源并观察值。 它根据操作员的目的转换观察到的序列。 它通过调用onNext,onError和onCompleted将修改后的序列推送到自己的订阅者。 compose运算符...

woshixin
47分钟前
1
0
lnmp+coreseek实现站内全文检索(安装篇)

软件安装包 安装环境 系统环境 centos7.2 1核2G 软件环境 coreseek-3.2.14 lnmp1.5 安装mmseg 更新依赖包和安装编译环境 yum -y install m4 autoconf automake libtoolyum -y install gcc g...

毛毛雨rain
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部