自定义等高 Cell

Posted 2020-12-28 ch520

1、介绍

• 1.1 代码自定义 cell（使用 frame）

  • 创建一个继承自 UITableViewCell 的子类，比如 BookCell1。
    • 在 initWithStyle:reuseIdentifier: 方法中。
      • 添加子控件。
      • 设置子控件的初始化属性（比如文字颜色、字体）。
    • 在 layoutSubviews 方法中设置子控件的 frame。
    • 需要提供一个模型属性，重写模型的 set 方法，在这个方法中设置模型数据到子控件。
  • 在控制器中
    • 利用 registerClass... 方法注册 BookCell1 类。
    • 利用重用标识找到 cell（如果没有注册类，就需要手动创建 cell）。
    • 给 cell 传递模型数据。
    • 也可以将创建获得 cell 的代码封装起来（比如 cellWithTableView: 方法）。

• 1.2 代码自定义 cell（使用 autolayout）

  • 创建一个继承自 UITableViewCell 的子类，比如 BookCell1。
    • 在 initWithStyle:reuseIdentifier: 方法中。
      • 添加子控件。
      • 添加子控件的约束（建议使用 Masonry）。
      • 设置子控件的初始化属性（比如文字颜色、字体）。
      • 需要提供一个模型属性，重写模型的 set 方法，在这个方法中设置模型数据到子控件。
  • 在控制器中
    • 利用 registerClass... 方法注册 BookCell1 类。
    • 利用重用标识找到 cell（如果没有注册类，就需要手动创建 cell）。
    • 给 cell 传递模型数据。
    • 也可以将创建获得 cell 的代码封装起来（比如 cellWithTableView: 方法）。

2、代码创建 cell - frame

• 2.1 BookCell1.h

@class BookModel;

@interface BookCell1 : UITableViewCell

// 定义 Cell 的数据模型
@property (nonatomic, retain)BookModel *book;

@end

• 2.2 BookCell1.m

#import "BookCell1.h"
#import "BookModel.h"

@interface BookCell1()

// 创建自定义 Cell 视图包含的内容
@property(nonatomic, retain)UIImageView *iconView;
@property(nonatomic, retain)UILabel *titleLabel;
@property(nonatomic, retain)UILabel *detailLabel;
@property(nonatomic, retain)UILabel *priceLabel;

@end

@implementation BookCell1

// 重写初 Cell 始化方法，创建自定义 Cell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        // 创建子视图
        // 创建 iconView 视图，并添加到自定义 Cell 上
        self.iconView = [[UIImageView alloc] init];
        self.iconView.layer.borderColor = [[UIColor greenColor] CGColor];
        self.iconView.layer.borderWidth = 2;
        [self.contentView addSubview:self.iconView];

        // 创建 titleLabel 视图
        self.titleLabel = [[UILabel alloc] init];
        self.titleLabel.font = [UIFont boldSystemFontOfSize:14];
        self.titleLabel.textColor = [UIColor redColor];
        [self.contentView addSubview:self.titleLabel];

        // 创建 detailLabel 视图
        self.detailLabel = [[UILabel alloc] init];
        self.detailLabel.font = [UIFont systemFontOfSize:12];
        [self.contentView addSubview:self.detailLabel];

        // 创建 priceLabel 视图
        self.priceLabel = [[UILabel alloc] init];
        self.priceLabel.font = [UIFont systemFontOfSize:12];
        [self.contentView addSubview:self.priceLabel];
    }
    return self;
}

// 布局子视图
- (void)layoutSubviews {
    [super layoutSubviews];

    // 布局子视图
    self.iconView.frame = CGRectMake(10, 10, 60, 60);
    self.titleLabel.frame = CGRectMake(90, 5, 200, 25);
    self.detailLabel.frame = CGRectMake(90, 30, 200, 25);
    self.priceLabel.frame = CGRectMake(90, 55, 200, 25);
}

// 设置显示的数据
- (void)setBook:(BookModel *)book {

    _book = book;

    // 设置数据，设置 cell 视图上显示的内容 内容
    self.iconView.image = [UIImage imageNamed:book.icon];
    self.titleLabel.text = book.title;
    self.detailLabel.text = book.detail;
    self.priceLabel.text = book.price;
}

@end

• 2.3 ViewController.m

// 使用自定义 Cell 创建，UITableViewDataSource 协议方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    // 使用自定义的 Cell 定义
    BookCell1 *cell = [tableView dequeueReusableCellWithIdentifier:@"testIdentifier"];

    if (cell == nil) {
        // 使用自定义的 Cell 创建
        cell = [[BookCell1 alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testIdentifier"];
    }
    BookModel *bookModel = [self.myDataArray objectAtIndex:indexPath.row];
    cell.book = bookModel;

    return cell;
}

3、代码注册 cell - frame

• 在 tableView 创建时，从 ios7 开始多了一种创建 cell 的方式（注册），让 tableView 注册一种 cell，需要设置复用标志。
• 用注册方式创建 cell，如果 tableView 已经注册了某一种 cell，从复用队列里查找，如果找不到，
• 系统会自动通过注册的 cell 类来创建 cell 对象。

• 3.1 自定义 Cell 部分同上。

• BookCell1.h
• BookCell1.m

• 3.2 ViewController.m

// 注册 cell
[myTableView registerClass:[BookCell1 class] forCellReuseIdentifier:@"testIdentifier"];

// 使用注册的 Cell 创建，UITableViewDataSource 协议方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    BookCell1 *cell = [tableView dequeueReusableCellWithIdentifier:@"testIdentifier" forIndexPath:indexPath];                   
    BookModel *bookModel = [self.myDataArray objectAtIndex:indexPath.row];

    cell.book = bookModel;

    return cell;
}

4、代码创建 cell - autolayout

• 第三方框架 Masonry Github 网址

• 4.1 XMGDeal.h

@interface XMGDeal : NSObject

@property (strong, nonatomic) NSString *buyCount;
@property (strong, nonatomic) NSString *price;
@property (strong, nonatomic) NSString *title;
@property (strong, nonatomic) NSString *icon;

+ (instancetype)dealWithDict:(NSDictionary *)dict;

@end

• 4.2 XMGDeal.m

@implementation XMGDeal

+ (instancetype)dealWithDict:(NSDictionary *)dict {

    XMGDeal *deal = [[self alloc] init];

    // KVC - Key Value Coding
    [deal setValuesForKeysWithDictionary:dict];

    return deal;
}

@end

• 4.3 XMGDealCell.h

@class XMGDeal;

@interface XMGDealCell : UITableViewCell

/** 模型数据 */
@property (nonatomic, strong) XMGDeal *deal;

+ (instancetype)cellWithTableView:(UITableView *)tableView;

@end

• 4.4 XMGDealCell.m

#define MAS_SHORTHAND
#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

@interface XMGDealCell()

@property (weak, nonatomic) UIImageView *iconView;
@property (weak, nonatomic) UILabel *titleLabel;
@property (weak, nonatomic) UILabel *priceLabel;
@property (weak, nonatomic) UILabel *buyCountLabel;

@end

@implementation XMGDealCell

+ (instancetype)cellWithTableView:(UITableView *)tableView {

    static NSString *ID = @"deal";

    // 创建cell
    XMGDealCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    if (cell == nil) {
        cell = [[XMGDealCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    return cell;
}

// 1.在 initWithStyle:reuseIdentifier: 方法中添加子控件
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        UIImageView *iconView = [[UIImageView alloc] init];
        [self.contentView addSubview:iconView];
        self.iconView = iconView;

        UILabel *titleLabel = [[UILabel alloc] init];
        [self.contentView addSubview:titleLabel];
        self.titleLabel = titleLabel;

        UILabel *priceLabel = [[UILabel alloc] init];
        priceLabel.textColor = [UIColor orangeColor];
        [self.contentView addSubview:priceLabel];
        self.priceLabel = priceLabel;

        UILabel *buyCountLabel = [[UILabel alloc] init];
        buyCountLabel.textAlignment = NSTextAlignmentRight;
        buyCountLabel.font = [UIFont systemFontOfSize:14];
        buyCountLabel.textColor = [UIColor lightGrayColor];
        [self.contentView addSubview:buyCountLabel];
        self.buyCountLabel = buyCountLabel;
    }
    return self;
}

// 2.在 layoutSubviews 方法中设置子控件的 约束
- (void)layoutSubviews {

    [super layoutSubviews];

    CGFloat margin = 10;

    [self.iconView makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(100);
        make.left.top.offset(margin);
        make.bottom.offset(-margin);
    }];

    [self.titleLabel makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.iconView);
        make.left.equalTo(self.iconView.right).offset(margin);
        make.right.offset(-margin);
    }];

    [self.priceLabel makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.titleLabel);
        make.bottom.equalTo(self.iconView);
        make.width.equalTo(70);
    }];

    [self.buyCountLabel makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.priceLabel);
        make.right.equalTo(self.titleLabel);
        make.left.equalTo(self.priceLabel.right).offset(margin);
    }];
}

// 3.重写模型的 set 方法
- (void)setDeal:(XMGDeal *)deal {

    _deal = deal;

    // 设置数据
    self.iconView.image = [UIImage imageNamed:deal.icon];
    self.titleLabel.text = deal.title;
    self.priceLabel.text = [NSString stringWithFormat:@"￥%@", deal.price];
    self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已购买", deal.buyCount];
}

@end

• 4.5 XMGDealsViewController.m

@interface XMGDealsViewController ()

/** 所有的团购数据 */
@property (nonatomic, strong) NSArray *deals;

@end

@implementation XMGDealsViewController

- (NSArray *)deals {

    if (_deals == nil) {

        // 加载plist中的字典数组
        NSString *path = [[NSBundle mainBundle] pathForResource:@"deals.plist" ofType:nil];
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

        // 字典数组 -> 模型数组
        NSMutableArray *dealArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            XMGDeal *deal = [XMGDeal dealWithDict:dict];
            [dealArray addObject:deal];
        }

        _deals = dealArray;
    }
    return _deals;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    //    [self.tableView registerClass:[XMGDealCell class] forCellReuseIdentifier:@"deal"];
}

#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.deals.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    //创建cell
    XMGDealCell *cell = [XMGDealCell cellWithTableView:tableView];

    // 取出模型数据
    cell.deal = self.deals[indexPath.row];

    return cell;
}

@end