033-UITableViewHeaderFooterView-iOS笔记

学习目标

1.【掌握】静态单元格应用

2.【掌握】动态原型应用

3.【理解】UITableViewHeaderFooterView

一、静态单元格应用

这个案例的目的是了解静态单元格的使用场合及操作方式,在一些情况下使用静态单元格会更加方便和快捷。我们需要了解静态单元格的一些特性及设置方式。案例效果图如下:

033-UITableViewHeaderFooterView-iOS笔记

静态单元格只支持UITableViewController,所以先将之前的viewController删除。拖入UITableViewController,设置Size属性。再选择UITableView并设置属性Content属性为Static Cells

033-UITableViewHeaderFooterView-iOS笔记

Dynamin ProtoTypes:动态单元格,通过代码进行设置

Static Cells:静态单元格,通过界面进行设置,固定的。

设置每一组cell的数量:默认每一组有三个cell,修改每一组cell的数量。

033-UITableViewHeaderFooterView-iOS笔记

设置cell的高度:Cell的高度也就是tableview的row height属性。

033-UITableViewHeaderFooterView-iOS笔记

设置cell的显示样式:这里的样式和代码创建cell的系统提供的样式类似,不过多了一个Custom自定义。

033-UITableViewHeaderFooterView-iOS笔记

设置cell的图片:给Cell设置图片,也就是Cell的image属性赋值。

033-UITableViewHeaderFooterView-iOS笔记

设置cell的文本:

033-UITableViewHeaderFooterView-iOS笔记

完成上面的操作后我们可以添加任意组(sections),设置对应组的行数(rows)。

需要注意的是,当我们删除原有控制器,创建新控制器后需要将新控制器设为初始显示的控制器。也就是勾选Is Initial View Controller,否则启动模拟器看不到界面。如下图所示:

033-UITableViewHeaderFooterView-iOS笔记

二、动态原型应用

上面演示了静态单元格的使用,下面接着演示动态原型的使用,也就是UITableView的Content属性中的Dynamic protoTypes。设置这个属性后,我们可以通过代码根据原型动态创建Cell。下面来看看一个应用管理的案例,案例效果图如下:

033-UITableViewHeaderFooterView-iOS笔记

首先,创建项目,导入素材图片和plist文件。

033-UITableViewHeaderFooterView-iOS笔记

创建模型类,加载plist文件中的数据封装模型,并返回模型数组。

JFApp.h

 JFApp.m

在Main.storyboard中修改size为4.7,拖入一个全屏的UITableView控件,再拖入一个UITableViewCell控件到UITableView中,并拖入Cell的子控件。Cell的高度也就是tableview的rowheight属性,tableview的content属性默认就是Dynamic prototypes(动态原型),所以无需更改。

033-UITableViewHeaderFooterView-iOS笔记

创建Cell封装类,并指定Cell的Class属性为我们创建的封装类JFAppCell。

033-UITableViewHeaderFooterView-iOS笔记指定Class后即可进行属性连线,一般属性连线我们都封装在类扩展(匿名分类,也叫延展)里,而不是.h文件中。

033-UITableViewHeaderFooterView-iOS笔记设置Cell的重用标识符(Identifier),并在类中定义一个模型属性和快速创建Cell的方法并实现。点击下载按钮后,会弹出一个提示,弹出的提示不会跟随tableview滚动,所以需要添加这个提示View到tableview的父视图中。这样就必须访问控制器,所以我们使用代理来完成这个操作,让控制器成为代理对象,替Cell完成点击事件。

033-UITableViewHeaderFooterView-iOS笔记

JFAppCell.h

 JFAppCell.m

在控制器对tableview进行控件连线,然后懒加载模型数组,并实现数据源方法和Cell的代理方法。最终实现我们的需求,具体控制器中的代码如下:

ViewController.m

三、UITableViewHeaderFooterView

UITableViewHeaderFooterView是一个定义列表头部视图、列表尾部视图的类,HeaderFooterView一般是用在列表的头部,显示不同的分组状态信息。我们通过QQ分组来演示自定义HeaderFooterView的方法,下面是完成后的效果图:

033-UITableViewHeaderFooterView-iOS笔记

导入素材和plist文件,从下图可以看出,我们需要创建嵌套模型,也就是每一个组好友和每一个好友都需要封装模型。

033-UITableViewHeaderFooterView-iOS笔记

先封装单个好友模型,是否是vip定义为BOOL类型。

JFFriend.h

 JFFriend.m

然后再封装一组好友的模型,因为好友分组是有收起、展开两种状态的,所以定义一个BOOL类型来存储好友组的状态。

JFFriendGroup.h

JFFriendGroup.m

封装Cell类,这里的Cell是指好友而不是分组。也就是每一个Cell显示一个好友的信息,所以我们定义的模型属性是好友模型而不是好友分组模型。并且这里使用系统提供的Cell样式已经能够满足我们的需求,所以无需再手动创建。具体Cell类代码入下:

JFFriendCell.h

 JFFriendCell.m

封装好模型和Cell后我们就可以在控制器进行调用了,先显示出数据,再根据我们的需求进行修改。我们的QQ列表整个都是tableview,所以不用使用ViewController,直接使用TableviewController。在Main.storyboard中删除原有的ViewController拖入一个TableviewController

033-UITableViewHeaderFooterView-iOS笔记

然后再修改ViewController.h的继承父类为UITableViewController,才能设置新的控制器所属Class为这个类。

设置UITableViewControllerClass属性为ViewController,我们也可以新创建一个类继承自UITableViewController,然后在这里设置Class为我们新创建的那个类。

033-UITableViewHeaderFooterView-iOS笔记在控制器中懒加载数据,实现数据源方法显示出数据。因为我们Main.storyboard中使用的是TableViewController,所以无需手动遵守数据源、代理协议和手动指定数据源对象、代理对象。

ViewController.m

 完成后的效果为:

033-UITableViewHeaderFooterView-iOS笔记

数据已经显示出来了,但是没有进行分组。如果我们使用系统自带的分组样式,是无法满足需求的。比如整个分组头部可以点击,并且带小图标,说明这整个分组头部是一个按钮,并且按钮上还有一个Label用来显示在线人数。

下面开始自定义ViewHeaderFooterView,创建一个类并继承自UITableViewHeaderFooterView类。headerView点击后会展开列表,也就是会刷新tableview,这个操作在headerView中是无法完成的(不能将控制器做参数传递)。所以我们通过代理来完成,让控制器成为headerView的代理对象,并实现对应的代理方法来完成这个需求。

 JFHeaderView.h

 JFHeaderView.m

在控制器中遵守JFHeaderViewDelegate代理协议并实现代理方法,实现单组数据刷新。

ViewController.m

关于重用:

UITableViewHeaderFooterViewUITableViewCell在滑动屏幕时都可以根据标志进行重用,而在不滑动而只进行reloadData等刷新数据操作时,两者有不同表现:UITableViewHeaderFooterView将不能根据标志重用(即系统不会将其放入缓冲区),会创建新的视图代替旧的。UITableViewCell能根据标志重用。所以在自定义UITableViewHeaderFooterView首尾视图时,要注意刷新数据时对视图的处理。

六阿哥

目前评论:2   其中:访客  1   博主  1

  1. avatar 阳光 0
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: