iOS回顾笔记(08) -- 自定义Cell的类型和创建步骤总结
项目中我们常见的自定义 cell 主要分为两种
-
等高 cell:
如应用列表、功能列表

-
非等高 cell:
如微博列表、QQ 聊天页面

下面对这两类 cell 的创建方式简单记录各步骤。
等高 Cell
等高 cell 通常有三种创建方式:
- storyboard 自定义 cell
- xib 自定义 cell
- 代码创建 cell(使用 frame 计算 / 使用 Autolayout 布局)
下面分别记录每种创建步骤:
1.storyboard 自定义 cell
-
1. 创建一个继承自 UITableViewCell 的子类,比如 XYDealCell
-
2. 在 storyboard 中
-
往 cell 里面增加需要用到的子控件
-
设置 cell 的重用标识
-
设置 cell 的 class 为 XYDealCell

-
3. 在控制器中
- 利用重用标识找到 cell
- 给 cell 传递模型数据
-
4. 在 XYDealCell 中
- 将 storyboard 中的子控件连线到类扩展中

- 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件上
2.xib 自定义 cell
- 1. 创建一个继承自 UITableViewCell 的子类,比如 XYDealCell
- 2. 创建一个 xib 文件(文件名建议跟 cell 的类名一样),比如 XYDealCell.xib
- 拖拽一个 UITableViewCell 出来
- 修改 cell 的 class 为 XYDealCell
- 设置 cell 的重用标识
- 往 cell 中添加需要用到的子控件
- 3. 在控制器中
- 利用 registerNib... 方法注册 xib 文件
- 利用重用标识找到 cell(如果没有注册 xib 文件,就需要手动去加载 xib 文件)
- 给 cell 传递模型数据
- 4. 在 XYDealCell 中
- 将 xib 中的子控件连线到类扩展中
- 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件上
- 也可以将创建获得 cell 的代码封装起来(比如 cellWithTableView: 方法)
3. 代码自定义 cell(使用 frame)
- 1. 创建一个继承自 UITableViewCell 的子类,比如 XYDealCell
- 在 initWithStyle:reuseIdentifier: 方法中
- 添加子控件
- 设置子控件的初始化属性(比如文字颜色、字体)
- 在 layoutSubviews 方法中设置子控件的 frame
- 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件
- 2. 在控制器中
- 利用 registerClass... 方法注册 XYDealCell 类
- 利用重用标识找到 cell(如果没有注册类,就需要手动创建 cell)
- 给 cell 传递模型数据
- 也可以将创建获得 cell 的代码封装起来(比如 cellWithTableView: 方法)
4. 代码自定义 cell(使用 autolayout)
- 1. 创建一个继承自 UITableViewCell 的子类,比如 XYDealCell
- 在 initWithStyle:reuseIdentifier: 方法中
- 添加子控件
- 添加子控件的约束(建议使用
- Masonry
)
- 设置子控件的初始化属性(比如文字颜色、字体)
- 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件
- 2. 在控制器中
- 利用 registerClass... 方法注册 XYDealCell 类
- 利用重用标识找到 cell(如果没有注册类,就需要手动创建 cell)
- 给 cell 传递模型数据
- 也可以将创建获得 cell 的代码封装起来(比如 cellWithTableView: 方法)
非等高 cell
- xib 自定义 cell(重点)
- 在模型中增加一个 cellHeight 属性,用来存放对应 cell 的高度
- 在 cell 的模型属性 set 方法中调用 [self layoutIfNeed] 方法强制布局,然后计算出模型的 cellheight 属性值
- 在控制器中实现 tableView:estimatedHeightForRowAtIndexPath: 方法,返回一个估计高度,比如 200
- 在控制器中实现 tableView:heightForRowAtIndexPath: 方法,返回 cell 的真实高度(模型中的 cellHeight 属性)
- storyboard 自定义 cell
- 代码自定义 cell(frame)
- 代码自定义 cell(Autolayout)
非等高 Cell 的几个小重点知识
1. tableview 返回行高的方法
- /**
- * 精确返回每行cell的高度,此方法会真实计算对应高度值,并会一次性算出所有行高
- */
- - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
- {
- return 100;
- }
- /**
- * 估测返回每行cell的高度,添加此方法可以修改调用顺序,不进行一次性精确计算,先返回cell,在根据每行的展示计算对应真实高度,用到哪个算哪个,提高性能
- */
- - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
- {
- return 200;
- }
如果直接调用计算行高方法
- - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
程序的调用顺序是
- 调用
- heightForRowAtIndexPath
返回所有行高
- 调用
- cellForRowAtIndexPath
返回对应行
如果先调用估算高度方法
- - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath;
程序的调用顺序是
- 调用
- estimatedHeightForRowAtIndexPath
返回所有行高
- 调用
- cellForRowAtIndexPath
返回对应行
- 调用
- cellForRowAtIndexPath
返回对应的真实行高
所以使用估算行高的方法可提高效率。
2. 强制布局方法 : [cell layoutIfNeeded];
-
当 cell 调用 setModel 方法后,虽已赋值,但 cell 尚未展示。所以系统不会根据约束进行布局。所以此时无法得到 cell 真实的 frame 等数值。
-
[cell layoutIfNeeded] 就是在给 cell 赋值之后调用,强制进行布局,可得到 cell 真实的 frame 值
3. UILabel 限制最大高度 : preferredMaxLayoutWidth
- UILabel 在自动布局时比较特殊。系统会自动根据内容计算它的宽高,所以只需设置位置约束就行
- 为防止系统自动计算 Label 高度时候,按照完全包裹内容,所以需要在 Label 创建完之后明确设置 Label 的自动布局最大宽度,如下方法:
- - (void)awakeFromNib
- {
- // 设置自己的昵称Label的最大自动布局的宽度为 cell 的宽度减去 20
- self.nameLabel.preferredMaxLayoutWidth = self.bounds.size.width - 20;
- }
小结
- 项目中 cell 类型常见有两种:等高 cell 和 非等高 cell
- 等高 cell 自定义,由于不用关心高度计算问题、推荐使用 Xib、StoryBoard。
- 非等高 cell 自定义,推荐使用 Xib。
来源: http://www.cnblogs.com/xiaoyouPrince/p/6599070.html