怎样在UICollectionView中添加Header和footer

来源：蜘蛛抓取(WebSpider) 时间：2017-02-10 15:59 标签：

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

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

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

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

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

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

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

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

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

：方法）并设置适当的标题和图像。正如你可以从两个if之间的代码我们使用我们之前分配给获得header/footer view标识符。

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


collectView 也是 iOS 很常用的瀑布流展示控件了虽然使用过很多次，一直没有系统的总结过尤其是在添加header 和footer view 的时候，很常见写起来总觉得不是很流畅，这里着重备份下留待备用……

这里贴上最终的成品样子：

刚刚做demo 做了好久，这个控件我也是醉了……，既然做完了写步骤。。。

在铺设下自己创建的类：

再次提示 这个 header 和footer 一定要分开继承，刚刚自己就是在这里 耽搁了大部分的时间

约束完成之后主要提示下 ，自己耽误这么长时间做这个demo 嘚主要知识点吧：

我要回帖

 

随机推荐