UI基础 - UITableView 02：单元格定制 | 自适应高度

■ 单元格定制

1. 系统的 UITableViewCell 通常不能满足自身的 UI 设计效果，那么一般有两条路可走

要么是修改系统自身的 cell

要么是使用 UITableViewCell 的子类

2. 代码示例：实现单元格定制

方式一：在控制器中当 cell 创建时直接修改

// - ViewController

#import "ViewController.h"
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>// 接受协议

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];

    self.navigationItem.title = @"cell定制";
    
    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0,self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
    tableView.separatorColor = [UIColor blueColor];
    tableView.dataSource = self;
    tableView.delegate = self;
    [self.view addSubview:tableView];
}

#pragma mark - <UITableViewDataSource>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    switch (section) {
        case 0:return 3;
        case 1:return 5;
        case 2:return 8;
    }
    return 0;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 3;
}

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

    static NSString * cellIndentifier = @"cell";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];

    // cell 定制：cell 初始化一定要在创建时进行
    if (!cell) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentifier];

        // 右按钮
        UIButton *rightBT = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        rightBT.frame = CGRectMake(220, 10, 100, 30);
        [rightBT setTitle:@"right" forState:UIControlStateNormal];
        [cell.contentView addSubview:rightBT];

        // 左标提
        UILabel *leftLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 30)];
        leftLabel.tag = 103;// 赋值使用
        leftLabel.backgroundColor = [UIColor redColor];
        [cell.contentView addSubview:leftLabel];
    }
    
    // 左标题赋值
    UILabel *leftLab = (UILabel*)[cell.contentView viewWithTag:103];// 获取到 Label
    leftLab.text = [NSString stringWithFormat:@"%ld",indexPath.row];// 赋值

    return cell;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{

    return [[NSArray arrayWithObjects:@"-A-",@"-B-",@"-C-",nil] objectAtIndex:section];
}


- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{

    return @[@"A",@"B",@"C"];
}

#pragma mark - <UITableViewDelegate>
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{

    return 10;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    return 50;
}

@end

运行效果

方式二：在控制器中直接修改单元格会使代码冗余且分散！接下来我们使用 UITableViewCell 的子类实现单元格定制，降低代码耦合度，并对其做自适应高度处理

// - MakeCell.h

#import <UIKit/UIKit.h>
#define W_Text  [UIScreen mainScreen].bounds.size.width - 20
@interface MakeCell : UITableViewCell
@property(nonatomic,strong)UILabel *contenLabel;// 文本内容

@end

// - MakeCell.m

#import "MakeCell.h"
@implementation MakeCell

- (void)awakeFromNib {
    [super awakeFromNib];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
}

// 重写方法：在里面初始化控件
-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{

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

        self.contenLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, W_Text, 60)];
        self.contenLabel.backgroundColor = [UIColor orangeColor];
        self.contenLabel.font = [UIFont systemFontOfSize:15.0];
        self.contenLabel.numberOfLines = 0;// 不限行
        self.contenLabel.lineBreakMode = NSLineBreakByWordWrapping;
        [self.contentView addSubview:self.contenLabel];
        
        self.contentView.backgroundColor = [UIColor cyanColor];
        
    }
    return self;
}

// 高度自适应：步骤一
// 在 layoutSubviews 处理自适应，减少 VC 中的代码量
-(void)layoutSubviews{
    [super layoutSubviews];

    /* 自适应高度步骤
     *   1、字号和换行模式，要保持一致
     *   2、高度自适应实际上是指定宽度且高度足够大
    */
    NSString *text = self.contenLabel.text;
    // 宽度 300，高度管够
    CGSize textSize = [text sizeWithFont:[UIFont systemFontOfSize:15.0] constrainedToSize:CGSizeMake(W_Text, 10000) lineBreakMode:NSLineBreakByWordWrapping];
    CGRect rect = self.contenLabel.frame;
    rect.size.height = textSize.height;
    self.contenLabel.frame = rect;
}
@end

// - ViewController.h

#import "ViewController.h"
#import "MakeCell.h"
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property(nonatomic,strong)NSArray *dataArray;// 数据源

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.title = @"高度自适应";
    
    // 数据源
    self.dataArray = [NSArray arrayWithObjects:@"姆大陆土地辽阔，东起现今夏威夷群岛，西至马里亚纳群岛，南边是斐济、大溪地群岛和复活节岛，全大陆东西长8000公里，南北宽5000公里，相当于南北美洲面积的总和，总面积约为3500万平方公里，是一块美丽富饶的地方。今天的人类文明中不可解释的一些现象可能来自于姆大陆人的文明。",
                      @"雷姆利亚大陆的传说地理位置在今天的印度洋。根据地质学家的推测，雷姆利亚大陆应该是在距今约3400万年前（即第三纪初期）开始沉没的，在约2500万年前完全沉没。",
                      @"在柏拉图的提示中，有这样的话：“在梭伦九千年前左右，海格力斯之柱（直布罗陀海峡）对面，有一个很大的岛，从那里你们可以去其它的岛屿，那些岛屿的对面，就是海洋包围着的一整块陆地，这就是‘亚特兰蒂斯’王国”。当时亚特兰蒂斯正要与雅典展开一场大战，没想到亚特兰蒂斯却突然遭遇到地震和水灾，不到一天一夜就完全没入海底，成为希腊人海路远行的阻碍。",
                      @"黄金国（西班牙文：El Dorado，意思为“The Golden One”）别称黄金城、黄金乡，为一个古老传说，最早是始于一个南美仪式，部落族长会在自己的全身涂满金粉，并到山中的圣湖中洗净，而祭司和贵族会将珍贵的黄金和绿宝石投入湖中献给神。",
                      @"阿瓦隆（Avalon）是亚瑟王传说中的重要岛屿，凯尔特神话的圣地，古老德鲁伊宗教的中心信仰",
                      @"Bermeja岛：古老的地图上常常出现无法找到的岛屿和大陆板块。其中一些所谓“幽灵岛屿”是由于早期的地理变化而消失，其它的岛屿就像Bermeja一样被认为事实上曾经存在并且由于自然灾难而消失了。古老地图上将Bermeja标记在墨西哥湾，在墨西哥尤卡坦半岛西北100英里的位置。",nil];

    self.view.backgroundColor = [UIColor whiteColor];
    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height-64) style:UITableViewStylePlain];
    tableView.separatorColor = [UIColor blueColor];
    tableView.dataSource = self;
    tableView.delegate = self;
    [self.view addSubview:tableView];
}

#pragma mark - <UITableViewDataSource>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return self.dataArray.count;
}

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

    static NSString *cellIndentifier = @"cell";
    MakeCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];
    if (!cell) {
        // 初始化
        cell = [[MakeCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentifier];
    }

    NSString *text = [self.dataArray objectAtIndex:indexPath.row];
    cell.contenLabel.text = text;

//    // 高度自适应：步骤一
//    // 可优化：把此处代码搬进 layoutSubviews 中处理
//    CGSize textSize = [text sizeWithFont:[UIFont systemFontOfSize:15.0] constrainedToSize:CGSizeMake(W_Text, MAXFLOAT) lineBreakMode:NSLineBreakByWordWrapping];
//    CGRect rect = cell.contenLabel.frame;
//    rect.size.height = textSize.height;
//    cell.contenLabel.frame = rect;

    return cell;
}

#pragma mark - <UITableViewDelegate>
// 高度自适应：步骤二
// cell 自适应高度完成后，在代理方法中同样要返回相对应的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    NSString *text = [self.dataArray objectAtIndex:indexPath.row];
    CGSize textSize = [text sizeWithFont:[UIFont systemFontOfSize:15.0] constrainedToSize:CGSizeMake(W_Text, MAXFLOAT) lineBreakMode:NSLineBreakByWordWrapping];
    return textSize.height + 20;
}

@end

运行效果