iOS开发 - 第02篇 - UI进阶 - 03 - TableView Cell
2016-05-14 20:28
537 查看
实现:团购界面程序
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/f352e7b9d605bf10e0391a9b2889f04f)
源代码下载地址:点击打开链接
可用UITableViewController来代替UIViewController,默认实现上述两种方法,避免崩溃。
修改:将HMViewController继承自UITableViewController,并修改关联类:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/3ae12538fdd428eb037e062836e0bf1f)
注:此时不需要将TableView加入到self.view中(self.view = self.tableView)。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/0ad53c2c7d5e393ee6268fc06e7b8228)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/06de8b065cbfcb7a9bc65ae5778299db)
注:每个Cell有图片、标题、详细、还有多少人购买的小标签,因此不能使用系统默认提供的Cell样式,需要自定义
2> 将HMViewController继承自UITableViewController;
在storyboard中删除原来的ViewController,增加TableViewController,设置关联HMViewController;
3> 懒加载模型数组;
4> 实现数据源方法;
5> 调整行高,设置状态栏;
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/ab03a686646be85afdefb014fcd9fa7f)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/4ed19ab33af1edf1c4cdb522caec07c0)
注:默认的表格样式通常不能满足正常的开发需要
解决方法 —— 自定义Cell
1> XIB(团购)
2> 纯代码(微博)
3> StoryBoard
1. 新建HMTgCell.xib
2. 拽一个需要自定义的控件(如UITableViewCell),摆放其他子控件
3. 新建一个类
* 类名要与XIB的名字保持一致,继承自UITableViewCell
* 继承自的子类要与XIB中的根节点的类型一致
4. 要连线之前,需要将XIB的根节点类名修改为刚刚新建的类名,关联类
5. 连线(私有扩展),注意:添加的属性不能和基类UITableViewCell自带的重名
6.
在XIB的属性面板,指定可重用标示符(单元格循环引用)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/8eebdc54983c7c2da61facc328d7c28c)
7. 注:数据源方法明细实现修改
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/6ae8e8bb9470a95c645c4e3af452e2e9)
2> 代码重构(MVC) --- 重要
注1:必须在XIB属性面板,指定可重用标识符!!!否则每次都会重新加载XIB视图;
注2:上述在单元格实现明细中,视图控制器需要知道单元格内部实现细节,解决方法:在XIB视图添加一个模型,通过模型来传递数据!
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/9699d09722fc3946f717195991a7489f)
注3:在XIB关联类中添加一个类方法,快速创建Cell
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/17a531b5725c282c7668ee1efbdda5f1)
此时,在视图控制器中的单元格实现细节可修改为:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/9b31b503e84b49ed348345b85209b7be)
3> 在XIB视图关联类中,利用模板自动生成的其他两个方法说明
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/98d789d19df03734d3b3f47fd926a3a2)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/78ea58857090ff77709c2694e6480121)
1> XIB自定义视图
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/215eb456e43e8f222bcd37f706cae2d3)
注:由一个UIButton和UIView(包含UILabel和转圈控件,放在一个UIView下面,方便隐藏,注意要设置UIView的Color为clearColor透明)组成,且要是转圈控件转动,需要check右边动画。
2> 设置TableView的footerView
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/c39ee00f5773a90bf9b4ad0346a1091d)
3> 在XIB对应的View中添加按钮响应事件
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/d6d7835615a83243c0b01fc1b3739921)
注意:延时一般放在ViewController中(网络加载数据),修改为
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/a358f8720f9528bbb5e35003f5093083)
4> 由于要加载数据,需要交给控制器处理,因此需要设置代理
注1:协议方法的命名及传入参数;
注2:XIB对应View添加一个weak的代理属性;
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/90ebfb140acf7462954adb5191415d9b)
注3:在View中通知代理,代理实现协议的方法(添加判断代理是否实现,这里未添加);
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/e3bff791f9b4c42b08a1708bce134e16)
注4:在ViewController中设置View的代理,并实现协议;
注5:代理属性设置为weak的原因;
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/9ccf5f5a2125e6f627b0770f287b6094)
代理如果使用强引用,就会和控制器产生循环引用,造成控制器和子视图都无法释放,造成内存泄露!
5> footerView代理实现(注意要将模型数组改成NSMutableArray)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/440c9e11506ce917e7d85b5b9a5cb6f7)
6> 添加XIB对应View的类方法快速创建View
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/8db4081ec178b288219120326e56ed83)
其实就是一个View,再添加一个高度为1,背景颜色灰色的View,再设置为TableView的headView。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/8b76596f7a2623e11a6f946bf5739314)
--------------------------------------------------------------------------
补:代理模式理解
代理模式:是父控件(视图控制器)监听子控件的事件,当子控件发生某些事情时,通知父控件工作!
1> footView => controller 去工作,使用代理
2> controller => footView 去工作,直接调用footView的方法即可
源代码下载地址:点击打开链接
1、UITableViewController简单介绍
问题:若直接在UIViewController中增加UITableView控件,且设置数据源代理dataSource,则必须实现dataSource协议的两个方法(每组的行数&单元格明细),否则程序运行崩溃。可用UITableViewController来代替UIViewController,默认实现上述两种方法,避免崩溃。
修改:将HMViewController继承自UITableViewController,并修改关联类:
注:此时不需要将TableView加入到self.view中(self.view = self.tableView)。
2、TableView应用 - 团购
注:每个Cell有图片、标题、详细、还有多少人购买的小标签,因此不能使用系统默认提供的Cell样式,需要自定义
2.1 初步思路分析
1> 建立团购模型(注:利用代码块快速生成模型必须实现的三个方法);2> 将HMViewController继承自UITableViewController;
在storyboard中删除原来的ViewController,增加TableViewController,设置关联HMViewController;
3> 懒加载模型数组;
4> 实现数据源方法;
5> 调整行高,设置状态栏;
2.2 上述步骤问题分析
注:默认的表格样式通常不能满足正常的开发需要
解决方法 —— 自定义Cell
1> XIB(团购)
2> 纯代码(微博)
3> StoryBoard
2.3 XIB自定义Cell
1> XIB的定义步骤1. 新建HMTgCell.xib
2. 拽一个需要自定义的控件(如UITableViewCell),摆放其他子控件
3. 新建一个类
* 类名要与XIB的名字保持一致,继承自UITableViewCell
* 继承自的子类要与XIB中的根节点的类型一致
4. 要连线之前,需要将XIB的根节点类名修改为刚刚新建的类名,关联类
5. 连线(私有扩展),注意:添加的属性不能和基类UITableViewCell自带的重名
6.
在XIB的属性面板,指定可重用标示符(单元格循环引用)
7. 注:数据源方法明细实现修改
2> 代码重构(MVC) --- 重要
注1:必须在XIB属性面板,指定可重用标识符!!!否则每次都会重新加载XIB视图;
注2:上述在单元格实现明细中,视图控制器需要知道单元格内部实现细节,解决方法:在XIB视图添加一个模型,通过模型来传递数据!
注3:在XIB关联类中添加一个类方法,快速创建Cell
此时,在视图控制器中的单元格实现细节可修改为:
3> 在XIB视图关联类中,利用模板自动生成的其他两个方法说明
2.4 关于代码文件的分类 --- MVC模式
2.5 设置tableFooterView
注:也是自定义一个XIB,再设置为TableView的footerView,关联一个派生自UIView的类即可。1> XIB自定义视图
注:由一个UIButton和UIView(包含UILabel和转圈控件,放在一个UIView下面,方便隐藏,注意要设置UIView的Color为clearColor透明)组成,且要是转圈控件转动,需要check右边动画。
2> 设置TableView的footerView
3> 在XIB对应的View中添加按钮响应事件
注意:延时一般放在ViewController中(网络加载数据),修改为
4> 由于要加载数据,需要交给控制器处理,因此需要设置代理
注1:协议方法的命名及传入参数;
注2:XIB对应View添加一个weak的代理属性;
注3:在View中通知代理,代理实现协议的方法(添加判断代理是否实现,这里未添加);
注4:在ViewController中设置View的代理,并实现协议;
注5:代理属性设置为weak的原因;
代理如果使用强引用,就会和控制器产生循环引用,造成控制器和子视图都无法释放,造成内存泄露!
5> footerView代理实现(注意要将模型数组改成NSMutableArray)
6> 添加XIB对应View的类方法快速创建View
2.6 顶部视图分隔线(headView)
其实就是一个View,再添加一个高度为1,背景颜色灰色的View,再设置为TableView的headView。
2.7 单元格选中颜色设置
--------------------------------------------------------------------------
补:代理模式理解
代理模式:是父控件(视图控制器)监听子控件的事件,当子控件发生某些事情时,通知父控件工作!
1> footView => controller 去工作,使用代理
2> controller => footView 去工作,直接调用footView的方法即可
相关文章推荐
- mysql5.7下的timestampn Error : Invalid default value for 'timestamp'
- 115. Distinct Subsequences dp算法
- 斐波那契数列(Fibonacci sequence)的前200项
- 使用bat对UiAutomator程序进行快速调试
- 使用NGUI模仿制作“切水果”
- ios开发UI系列之使用AutoLayout的几个经典的布局技巧
- 优先队列priority queue
- iOS-UIAlertController的另类使用
- Hdu oj 1159 Common Subsequence(dp)
- MyGUI 总结1
- iOS-通过UISwitch控制摇一摇
- request_region
- UGUI定制彩色字体
- 几种UITableview自定义Cell的办法
- 【前端UI框架】EasyUI
- iOS-UIScrollView与UISegmentedControl的交互
- 单向队列queue的使用
- 347. Top K Frequent Elements
- Java:String、StringBuffer和StringBuilder的区别
- deque的用法