自定义 tableView 的 cell

- 自定义等高的 cell

一、storyboard 自定义 cell

1.创建一个继承自 UITableViewCell 的子类,比如 YJWGoodsCell


2.在 storyboard 中:
  • 设置 cell 的重用标识


  • 设置 cell 的 class 为 YJWGoodsCell


  • 往 cell 里面增加需要用到的子控件

3.在控制器中:

  • 通过懒加载加载数据
-(NSArray *)goodsArray{

    if (_goodsArray == nil) {
        NSString *path = [[NSBundle mainBundle]pathForResource:@"deals" ofType:@".plist"];
        NSArray *dicArray = [NSArray arrayWithContentsOfFile:path];
        
        NSMutableArray *array = [[NSMutableArray alloc]init];
        for (NSDictionary *dic in dicArray) {
            YJWGoodsModel *goods = [YJWGoodsModel goodWithDict:dic];
            [array addObject:goods];
        }
        _goodsArray = array;
    }
    
    return _goodsArray;
}
  • 利用重用标识符找到 cell
  • 给 cell 传递模型数据
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        static NSString *reUseId = @"cell";
        YJWGoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:reUseId];
    
        cell.goods = self.goodsArray[indexPath.row];
    
        return cell;
}

4.在 YJWGoodsModel 中:

  • 设置模型,并提供一个通过字典创建模型的方法
/** title   */
@property(nonatomic,strong) NSString *title;
/** icon   */
@property(nonatomic,strong) NSString *icon;
/** price   */
@property(nonatomic,strong) NSString *price;
/** count   */
@property(nonatomic,strong) NSString *buyCount;
+(instancetype)goodWithDict:(NSDictionary *)dict;
  • 在模型中的具体实现
#import "YJWGoodsModel.h"

@implementation YJWGoodsModel

+(instancetype)goodWithDict:(NSDictionary *)dict
{    
    YJWGoodsModel *good = [[self alloc]init];
    [good setValuesForKeysWithDictionary:dict];
    
    return good;
}

@end

5.在 YJWGoodsCell 中:

  • 将 storyboard 中的子控件连线到类扩展中
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *title;
@property (weak, nonatomic) IBOutlet UILabel *price;
@property (weak, nonatomic) IBOutlet UILabel *count;
  • 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件上
@property(strong,nonatomic)YJWGoodsModel *goods;
-(void)setGoods:(YJWGoodsModel *)goods{
    _goods = goods;
    
    self.iconView.image = [UIImage imageNamed:goods.icon];
    self.title.text = goods.title;
    self.price.text = [NSString stringWithFormat:@"¥ %@",goods.price];
    self.count.text = [NSString stringWithFormat:@"%@人已购买",goods.buyCount];
}

二、xib 自定义 cell

1.创建一个继承自 UITableViewCell 的子类,比如 YJWGoodsCell
2.创建一个 xib 文件(文件名建议跟 cell 的类名一样),比如 YJWGoodsCell.xib

  • 拖拽一个 UITableViewCell 出来
  • 修改 cell 的 class 为 YJWGoodsCell
  • 设置 cell 的重用标识符


  • 往 cell 中添加需要用到的子控件

3.在控制器中

  • 利用 registerNib... 方法注册 xib 文件
UINib *nib = [UINib nibWithNibName:@"YJWGoodsCell" bundle:nil];
    [self.myTableView registerNib:nib forCellReuseIdentifier:@"YJWcell"];
  • 利用重用标识符找到 cell
  • 给 cell 传递模型数据
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        static NSString *reUseId = @"YJWcell";

        YJWGoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:reUseId];      
        cell.goods = self.goodsArray[indexPath.row]; 
   
        return cell;
}

如果没有注册 xib 文件,就需要手动去加载 xib 文件:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        static NSString *reUseId = @"YJWcell";
        YJWGoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:reUseId];

        if (cell == nil) {
        cell = [[NSBundle mainBundle]loadNibNamed:@"YJWGoodsCell" owner:nil options:nil][0];
    }
        cell.goods = self.goodsArray[indexPath.row];

        return cell;
}

4.在 YJWGoodsCell 中

  • 将 xib 中的子控件连线到类扩展中
  • 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件上
  • 也可以将创建获得 cell 的代码封装起来

三、1️⃣代码自定义 cell

1.创建一个继承自 UITableViewCell 的子类,比如 YJWGoodsCell

  • 在 initWithStyle:reuseIdentifier:方法中:
    • 添加子控件
    • 设置子控件的初始化属性(比如文字的颜色、字体)
  • 在 layoutSubviews 方法中设置子控件的 frame
    • 这个方法专门用来布局子控件,一般在这里设置子控件的 frame,当控件本身的尺寸发生改变的时候,系统会自动调用这个方法
  • 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件

2.在控制器中

  • 利用 registerClass... 方法注册 YJWGoodsCell 类
  • 利用重用标识符找到 cell (如果没有注册类,就需要手动创建cell)
  • 给 cell 传递模型数据

2️⃣代码自定义 cell

1.创建一个继承自 UITableViewCell 的子类,比如 YJWGoodsCell

  • 在 initWithStyle:reuseIdentifier:方法中:
    • 添加子控件
    • 添加子控件约束(建议使用 masonry)
    • 设置子控件的初始化属性(比如文字的颜色、字体)
  • 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件

2.在控制器中

  • 利用 registerClass... 方法注册 YJWGoodsCell 类
  • 利用重用标识符找到 cell (如果没有注册类,就需要手动创建cell)
  • 给 cell 传递模型数据

- 自定义非等高 cell

一、xib 自定义cell(重要)

  • 在模型中增加一个 cellHeight 属性,用来存放对应 cell 的高度
  • 在 cell 的模型属性 set 方法中调用 [self layoutIfNeeded] 方法强制布局,然后计算出 cellHeight 属性值
  • 在控制器中实现 -tableView: estimatedHeightForRowAtIndexPath: 方法,返回一个估计高度,比如 200【调用此方法后,先执行 tableView:(UITableView *)tableView cellForRowAtIndexPath: 然后再执行 tableView:heightForRowAtIndexPath: 方法,否则执行顺序相反】
  • 在控制器中实现 tableView:heightForRowAtIndexPath: 方法,返回 cell 的真实高度(模型中的 cellHeight 属性)
  • 当 label 中的内容不止一行时,系统计算往往会有些布局上的瑕疵,此时在 cell 中实现如下方法,会有所改善:
-(void)awakeFromNib{
//设置 label 每一行文字的最大宽度
//为了保证计算出来的数值 跟 真正显示出来的效果一致
self.content.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 20;
}

二、storyboard 定义 cell

和用 xib 自定义 cell 类似,内部各控件换个地方而已。

三、代码自定义 cell(frame)

四、代码自定义 cell(Autolayout)

与自定义等高 cell 极其相似。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容