swift 第八课 CollectView的 添加 footerView 、headerView
collectView 也是 iOS 很常用的瀑布流展示控件了,虽然使用过很多次,一直没有系统的总结过,尤其是在添加header 和footer view 的时候,很常见,写起来总觉得不是很流畅,这里着重备份下,留待备用……
这里贴上最终的成品样子:

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

在铺设下自己创建的类:
再次提示 这个 header 和footer 一定要分开继承,刚刚自己就是在这里 耽搁了大部分的时间

约束完成之后,主要提示下 ,自己耽误这么长时间,做这个demo 的主要知识点吧:
1.在 storybord 写的view 布局,不用在 vc里面注册( regest 之类的 )了,这个是比较省事的
2.我还没有在storybord 找到 collectcell 的 layout 设置项,所以直接贴上layout 代码了,(如果真的有这个设置,希望找到后在回来修改……)
我果然还是习惯撸代码,语言不是我强项……唉,不懂的时候,再偷偷看注释吧
collectCell 类:
class CollectionViewCell: UICollectionViewCell {
/**
demo 特别简单 ,这里只加载了一个按钮
*/
@IBOutlet weak var textButton: UIButton!
}
collect header and footer
import UIKit
class CollectionHeader: UICollectionReusableView {
/**
好久不用代理了,觉得 这么写会比较简单触发点击事件……
*/
var headerButtonClick:((UIButton)->Void)?
@IBAction func didHeadButtonClick(_ sender: UIButton) {
if (self.headerButtonClick != nil) {
self.headerButtonClick!(sender)
}
}
}
import UIKit
class CollectionFooter: UICollectionReusableView {
var footerButtonClick:((UIButton)->Void)?
@IBAction func didFooterButtonClick(_ sender: UIButton) {
if self.footerButtonClick != nil {
self.footerButtonClick!(sender )
}
}
}
view controller 类
import UIKit
class ViewController: UIViewController , UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout {
@IBOutlet weak var myCollectionView: UICollectionView!
lazy var collectArr : Array<String> = {
var arr = Array<String>()
for i in ...{
var str = String(format:"%c",putchar( + i))
arr.append(str)
}
return arr
}()
/**
flow layout
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
return CGSize.init(width: self.view.frame.size.width/-, height: )
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets{
return UIEdgeInsets.init(top: , left: , bottom: , right: )
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize{
return CGSize(width:self.view.frame.size.width,height:)
}
/**
data source
*/
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.collectArr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectCell", for: indexPath) as! CollectionViewCell
cell.textButton.setTitle(self.collectArr[indexPath.item], for: .normal)
return cell
}
/**
delegate
*/
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
collectionView .deselectItem(at: indexPath, animated: true)
}
/**
重要的事情 说三遍,这已经这篇博客第三遍 提到 footer 和header 要分开继承,自己就是在这里耽搁了许久
在就是 这里好多的关键字要对应好
*/
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView{
var reusableView :UICollectionReusableView?
if kind == UICollectionElementKindSectionFooter {
let footer :CollectionFooter = collectionView.dequeueReusableSupplementaryView(ofKind:UICollectionElementKindSectionFooter, withReuseIdentifier: "footerView", for: indexPath) as! CollectionFooter
footer.footerButtonClick = { ( btn: UIButton ) in
print("footer view 按钮被点击")
}
reusableView = footer
} else if kind == UICollectionElementKindSectionHeader {
let header :CollectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", for: indexPath) as! CollectionHeader
header.headerButtonClick = { (btn :UIButton) in
print("header view 按钮被点击")
}
reusableView = header
}
return reusableView!
}
/**
view controller 系统的方法
*/
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
终于写完了,有补充的积极给我留言……
swift 第八课 CollectView的 添加 footerView 、headerView的更多相关文章
- NeHe OpenGL教程 第三十八课:资源文件
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
- 【C语言探索之旅】 第二部分第八课:动态分配
内容简介 1.课程大纲 2.第二部分第八课: 动态分配 3.第二部分第九课预告: 实战“悬挂小人”游戏 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言 ...
- [译]Quartz.NET 框架 教程(中文版)2.2.x 之第八课 调度监听器
第八课 调度监听器 调度监听器和触发监听器和触发监听器.作业任务监听器非常相似,只是调度监听器在调度器内接收通知事件,而不需要关联具体的触发器或作业任务事件. 跟调度监听器相关的事件,添加作业任务/触 ...
- BeagleBone Black第八课板:建立Eclipse编程环境
BBB第八课板:建立Eclipse编程环境 最近建立了一个新的编程环境.感觉很方便,给大家分享.除了先前BBB董事会远程桌面直接写shell脚本或C外部程序,经Debain 7.5根据该制度还试图用编 ...
- Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板
原文:Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
- NeHe OpenGL教程 第四十八课:轨迹球
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Kali Linux Web 渗透测试视频教程— 第八课 nessus
Kali Linux Web 渗透测试视频教程— 第八课 nessus 文/玄魂 视频课程地址:http://edu.51cto.com/course/course_id-1887.html 目录 n ...
- NeHe OpenGL教程 第二十八课:贝塞尔曲面
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
随机推荐
- vimrc config and NERDTree
nmap <C-N> :tabnext<CR> 下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloo ...
- 模块讲解---time模块,datetime模块,random模块,hashlib模块和hmac模块,typing模块,requests模块,re模块
目录 1. 包 2. time模块 1. 优先掌握 2. 了解 3. datetime模块 1. 优先掌握 4. random模块 1. 优先掌握 2. 了解 5. hashlib模块 ...
- Turbo编码
在做项目时,观察到师兄代码中的Turbo编码过程,不是很理解,把实现过程分享出来,原理则参考引用链接: 以512长原始数据为例,按照LTE标准的1/3码率对其编码,编码后的数据为(1548,512), ...
- fckeditor实现ctrl+v粘贴word图片并上传
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
- cmake 学习-cmakelists.txt
#设置库的路径,电脑里有qt4以及qt5,使用qt5时 设置qt5的环境变量(路径). set(CMAKE_PREFIX_PATH $ENV{QTDIR}) #设定工程名称 Project(prona ...
- Echarts-树状图(源码 含flare.json)
刚刚发现官网实例里边的数据其实在:https://www.echartsjs.com/data/asset/data/flare.json 源码: html: <!DOCTYPE html> ...
- java单例问题
之前看资料,有人根据对象的创建时间将单例的实现分为懒汉式和饿汉式: 懒汉式: public class Singleton { private volatile static Singleton in ...
- mlflow ui 启动报错No such file or directory: 'gunicorn': 'gunicorn'
1.mlflow ui 启动报错,信息如下: [root@localhost mlflow]# mlflow ui /usr/local/python3/lib/python3./importlib/ ...
- 安装 PostgreSQL 时丢失 libintl-8.dll 解决方案
发表于 2013 年 11 月 13 日 修订于 2018 年 05 月 05 日 PostgreSQL 比 MySQL 有更多的高级特性,而且微信支付的数据库也是基于 PostgreSQL ...
- js闭包小实验
js闭包小实验 一.总结 一句话总结: 闭包中引用闭包外的变量会使他们常驻内存 function foo() { var i=0; return function () { console.log(i ...