iOS边练边学--自定义等高的cell
一、storyboard自定义cell
<1>创建一个继承自UITableViewCell的子类,比如ChaosDealCell
<2>在storyboard中
<2.1>往cell里面增加需要用到的子控件
<2.2>设置cell的重用标识
<2.3>设置cell的class为ChaosDealCell
<3>在控制器中
<3.1>利用重用标识找到cell并且给cell传递模型数据
<4>在ChaosDealCell中
<4.1>将storyboard中的子控件连线到类扩展中
<4.2>需要提供一个模型属性,重写模型的set方法,在这个方法中设置模型数据到子控件上
二、Xib自定义cell
<1>创建一个继承自UITableViewCell的子类,比如ChaosDealCell
<2>创建一个xib文件(文件名建议跟cell的类名一样),比如ChaosDealCell.xib
<2.1>拖拽一个UITableViewCell出来
<2.2>修改cell的class为ChaosDealCell,,设置cell的重用标识
<2.3>往cell中添加需要用到的子控件
<3>在控制器中,别忘了给cell传递模型数数据
<方法一:>利用registerNib...方法注册xib文件
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 4 // [self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([ChaosDealCell class]) bundle:nil] forCellReuseIdentifier:@"deal"]; 5 // 分成两步写 6 // 1.加载Nib 7 UINib *nib = [UINib nibWithNibName:NSStringFromClass([ChaosDealCell class]) bundle:[NSBundle mainBundle]]; 8 // 注册cell 9 [self.tableView registerNib:nib forCellReuseIdentifier:@"deal"]; 10 }
<方法二:>利用重用标识找到cell(如果没有注册xib文件,就需要手动加载xib文件)
1 // 告诉tableView返回什么样的cell 2 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 3 { 4 // 获取对应行的数据 5 // ChaosDeals *deal = self.deals[indexPath.row]; 6 7 // 根据tableView从缓存池中拿cell 8 ChaosDealCell *cell = [tableView dequeueReusableCellWithIdentifier:@"deal"]; 9 if (cell == nil) { 10 cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([ChaosDealCell class]) owner:nil options:nil] lastObject]; 11 } 12 cell.deal = self.deals[indexPath.row]; 13 return cell; 14 }
<4>在ChaosDealCell中
<4.1>将xib中的子控件连线到类扩展中
<4.2>需要提供一个模型属性,重写模型的set方法,在这个方法中设置模型数据到子控件上
<4.3>也可以将创建获得cell的代码封装起来(比如cellWithTableView:方法)
1 + (instancetype)cellWithTableView:(UITableView *)tableView 2 { 3 ChaosDealCell *cell = [tableView dequeueReusableCellWithIdentifier:@"deal"]; 4 if (cell == nil) { 5 cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([ChaosDealCell class]) owner:nil options:nil] lastObject]; 6 } 7 return cell; 8 }
三、代码自定义cell(使用frame)
<1>创建一个集成自UITableViewCell的子类,比如ChaosDealCell
<1.1>在initWithStyle:reuseIdentifier:方法中
*添加子控件
*设置子空间的初始化属性(比如文字颜色、字体)
<1.2>在layoutSubviews方法中设置子控件的frame
<1.3>需要提供一个模型属性,重写模型的set方法,在这个方法中设置模型数据到子控件
<2>在控制器中
<2.1>利用registerClass...方法注册ChaosDealCell类
<2.2>利用重用标识找到cell(如果没有注册类,就需要手动创建cell)
<2.3>给cell传递模型数据
<2.4>也可以将创建获得cell的代码封装起来(比如cellWithTableView:方法)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 #import "XMGDealCell.h" 2 #import "XMGDeal.h" 3 4 @interface XMGDealCell() 5 @property (weak, nonatomic) UIImageView *iconView; 6 @property (weak, nonatomic) UILabel *titleLabel; 7 @property (weak, nonatomic) UILabel *priceLabel; 8 @property (weak, nonatomic) UILabel *buyCountLabel; 9 @end 10 11 @implementation XMGDealCell 12 13 + (instancetype)cellWithTableView:(UITableView *)tableView 14 { 15 static NSString *ID = @"deal"; 16 // 创建cell 17 XMGDealCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; 18 // if (cell == nil) { 19 // cell = [[XMGDealCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID]; 20 // } 21 return cell; 22 } 23 24 // 1.在initWithStyle:reuseIdentifier:方法中添加子控件 25 26 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 27 { 28 if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) { 29 UIImageView *iconView = [[UIImageView alloc] init]; 30 [self.contentView addSubview:iconView]; 31 self.iconView = iconView; 32 33 UILabel *titleLabel = [[UILabel alloc] init]; 34 [self.contentView addSubview:titleLabel]; 35 self.titleLabel = titleLabel; 36 37 UILabel *priceLabel = [[UILabel alloc] init]; 38 priceLabel.textColor = [UIColor orangeColor]; 39 [self.contentView addSubview:priceLabel]; 40 self.priceLabel = priceLabel; 41 42 UILabel *buyCountLabel = [[UILabel alloc] init]; 43 buyCountLabel.textAlignment = NSTextAlignmentRight; 44 buyCountLabel.font = [UIFont systemFontOfSize:14]; 45 buyCountLabel.textColor = [UIColor lightGrayColor]; 46 [self.contentView addSubview:buyCountLabel]; 47 self.buyCountLabel = buyCountLabel; 48 } 49 return self; 50 } 51 52 // 2.在layoutSubviews方法中设置子控件的frame 53 - (void)layoutSubviews 54 { 55 [super layoutSubviews]; 56 57 CGFloat contentH = self.contentView.frame.size.height; 58 CGFloat contentW = self.contentView.frame.size.width; 59 CGFloat margin = 10; 60 61 CGFloat iconX = margin; 62 CGFloat iconY = margin; 63 CGFloat iconW = 100; 64 CGFloat iconH = contentH - 2 * iconY; 65 self.iconView.frame = CGRectMake(iconX, iconY, iconW, iconH); 66 67 // titleLabel 68 CGFloat titleX = CGRectGetMaxX(self.iconView.frame) + margin; 69 CGFloat titleY = iconY; 70 CGFloat titleW = contentW - titleX - margin; 71 CGFloat titleH = 21; 72 self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH); 73 // CGRectMake(titleX, titleY, titleW, titleH); 74 75 // priceLabel 76 CGFloat priceX = titleX; 77 CGFloat priceH = 21; 78 CGFloat priceY = contentH - margin - priceH; 79 CGFloat priceW = 70; 80 self.priceLabel.frame = CGRectMake(priceX, priceY, priceW, priceH); 81 82 // buyCountLabel 83 CGFloat buyCountH = priceH; 84 CGFloat buyCountY = priceY; 85 CGFloat buyCountX = CGRectGetMaxX(self.priceLabel.frame) + margin; 86 CGFloat buyCountW = contentW - buyCountX - margin; 87 self.buyCountLabel.frame = CGRectMake(buyCountX, buyCountY, buyCountW, buyCountH); 88 } 89 90 // 3.重写模型的set方法 91 - (void)setDeal:(XMGDeal *)deal 92 { 93 _deal = deal; 94 95 // 设置数据 96 self.iconView.image = [UIImage imageNamed:deal.icon]; 97 self.titleLabel.text = deal.title; 98 self.priceLabel.text = [NSString stringWithFormat:@"¥%@", deal.price]; 99 self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已购买", deal.buyCount]; 100 } 101 102 @end
四、代码自定义cell(使用autolayout)
<1>创建一个集成自UITableViewCell的子类,比如ChaosDealCell
<1.1>在initWithStyle:reuseIdentifier:方法中
*添加子控件
*添加子控件的约束(建议使用Masonry)
*设置子空间的初始化属性(比如文字颜色、字体)
<1.2>在layoutSubviews方法中设置子控件的frame
<1.3>需要提供一个模型属性,重写模型的set方法,在这个方法中设置模型数据到子控件
<2>在控制器中
<2.1>利用registerClass...方法注册ChaosDealCell类
<2.2>利用重用标识找到cell(如果没有注册类,就需要手动创建cell)
<2.3>给cell传递模型数据
<2.4>也可以将创建获得cell的代码封装起来(比如cellWithTableView:方法)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 // 1.在initWithStyle:reuseIdentifier:方法中添加子控件 2 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 3 { 4 if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) { 5 CGFloat margin = 10; 6 7 UIImageView *iconView = [[UIImageView alloc] init]; 8 [self.contentView addSubview:iconView]; 9 self.iconView = iconView; 10 [iconView makeConstraints:^(MASConstraintMaker *make) { 11 make.width.equalTo(100); 12 make.left.top.offset(margin); 13 make.bottom.offset(-margin); 14 }]; 15 16 UILabel *titleLabel = [[UILabel alloc] init]; 17 [self.contentView addSubview:titleLabel]; 18 self.titleLabel = titleLabel; 19 [titleLabel makeConstraints:^(MASConstraintMaker *make) { 20 make.top.equalTo(iconView); 21 make.left.equalTo(iconView.right).offset(margin); 22 make.right.offset(-margin); 23 }]; 24 25 UILabel *priceLabel = [[UILabel alloc] init]; 26 priceLabel.textColor = [UIColor orangeColor]; 27 [self.contentView addSubview:priceLabel]; 28 self.priceLabel = priceLabel; 29 [priceLabel makeConstraints:^(MASConstraintMaker *make) { 30 make.left.equalTo(titleLabel); 31 make.bottom.equalTo(iconView); 32 make.width.equalTo(70); 33 }]; 34 35 UILabel *buyCountLabel = [[UILabel alloc] init]; 36 buyCountLabel.textAlignment = NSTextAlignmentRight; 37 buyCountLabel.font = [UIFont systemFontOfSize:14]; 38 buyCountLabel.textColor = [UIColor lightGrayColor]; 39 [self.contentView addSubview:buyCountLabel]; 40 self.buyCountLabel = buyCountLabel; 41 [buyCountLabel makeConstraints:^(MASConstraintMaker *make) { 42 make.bottom.equalTo(priceLabel); 43 make.right.equalTo(titleLabel); 44 make.left.equalTo(priceLabel.right).offset(margin); 45 }]; 46 } 47 return self; 48 }
练习效果图