【UI】自定义cell的步骤

一、自定义Cell的实现方式

1.1 使用xib自定义Cell

      当每个Cell中的内容是固定的，控件个数、位置、尺寸等都一样的时候可以使用xib的方式来自定义cell

1.2 通过手写代码的方式实现

      当每个Cell的结构不一样，每个Cell中的控件的个数、样式都不一样的时候使用手写代码的方式来自定义cell

二、xib方式实现自定义Cell的步骤

1.创建一个SteveZTGCell.xib文件

2.在xib中拖一个UITableViewCell,设置高度为80, 宽度为屏幕宽度

3.向UITableViewCell中添加控件

   拖一个UIImageView到Cell中,设置里面的图片框的大小为80 *60。X = 10, y = 10

   拖一个标题Label、拖一个价格Label、拖一个已购买人数Label

   注意:向Cell中拖控件,默认就放在了ContentView中。

4.新建一个自定义的UITableViewCell类与xib中的这个Cell相关联

   新建一个SteveZTGCell类继承自UITableViewCell

   通过拖线的方式将Cell中的子控件拖线到SteveZTGCell的的属于性上,方便将来使用

5.  改造数据源方法:cellForRowAtIndex中的创建cell的代码,通过加载xib的方式来创建cell。

5.1. 通过 xib 创建 cell

      UITableViewCell *cell = [[[ NSBundle mainBundle ] loadNibNamed :@" SteveZTGCell " owner:nil options:nil ] lastObject ] ;

5.2. 重用 xib 中的 Cell

      设置 xib 中的 cell 的 identifier 。这个 identifier, 就是将来的重用 ID

6. 设置cell中的子控件的数据

6.1> 在外部访问不到cell中的子控件的内容。

6.2> 解决办法:把模型数据传递给cell对象,由cell对象内部自己来解析模型数据,并把数据设置到对应的子控件中

6.3> 在自定义Cell的类中创建一个模型类型的属性,重写该属性的set方法，在set方法中将数据赋值给控件。

7.  统一设置 tableView 的 rowHeight

8. 至此完成数据列表的显示，运行查看结果

三、使用xib封装一个view的步骤

1.新建一个xib文件描述一个view的内部结构(假设叫做 HMTgCell.xib)

2.新建一个自定义的类

(自定义类需要继承自系统自带的view,继承自哪个类, 取决于xib根对象的Class)

3.新建类的类名最好跟xib的文件名保持一致(比如类名就叫做 HMTgCell)

4.将xib中的控件和 自定义类的.m文件进行连线

5.提供一个类方法返回一个创建好的自定义view(屏蔽从xib加载的过程)

6.提供一个模型属性让外界传递模型数据

重写模型属性的 setter 方法 , 在这里将模型数据展示到对应的子控件上面

四、通过代码自定义cell（cell 高度不一致）

1.新建一个继承自UITableViewCell的类

2.重写initWithStyle:reuseIdentifier:方法

  添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中)

  进行子控件一次性的属性设置(有些属性只需要设置一次,比如字体\固定的图片)

3.提供2个模型

  数据模型:存放文字数据\图片数据

  frame模型:存放数据模型\所有子控件的frame\cell的高度

4.cell拥有一个frame模型(不要直接拥有数据模型)

5.重写frame模型属性的setter方法:在这个方法中设置子控件的显示数据和frame

6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)