UITableView Self Sizing Cells 到底

随着iOS11的到来，开发app支持的最低版本也就是iOS8了。iOS8中添加的Self Sizing Cells功能有没有使用过呢？比自己计算cell的高度真的快很多吗？今天写个demo来看一看。demo中会创建两个Controller，分别使用手动计算cell高度的方式和cell自己计算高度的方式加载同一类型同样数据的cell。
Demo地址：https://github.com/huibaoer/Demo_TableViewOptimize.git

1. 编写自定义cell

TableViewCell是一个能展示图片和文字，或者只展示文字的cell，为了快速编写，使用xib方式创建。cell上方是一个640：530的imageView，下方是一个展示文字的label。当传进来的数据有图片和文字的时候就同时显示；当传进来的数据只有文字的时候就隐藏imageView只显示文字。约束一般情况下动态修改都是修改constant值，但是imageView没有高度约束，它的高度是由宽高比计算来的，想使用通过改变imageView的高度达到只显示文字的效果不是很好实现。所以为label分别添加了两个top约束，通过active属性控制哪个约束生效来达到展示图文或者只展示文字的效果。
创建问基本UI后，为cell添加手动计算高度的方法。

+ (CGFloat)cellHeightWithDictionary:(NSDictionary *)dic {
    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    NSString *image = dic[@"image"];
    CGFloat imageHeight = -10;
    if (image) {
        imageHeight = (screenWidth-32)*530.0/640;
    }
    NSString *text = dic[@"text"];
    NSDictionary *attributes = @{NSFontAttributeName : [UIFont systemFontOfSize:17.f ]};
    CGRect rect = [text boundingRectWithSize:CGSizeMake(screenWidth-32, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading  attributes:attributes context:nil];

    return 16 + imageHeight + 10 + ceil(rect.size.height) + 16 + 0.5;//系统分割线占了0.5
}

添加数据的方法，这里cell根据传入的数据不同，显示不同的内容和样式。

- (void)setDictionary:(NSDictionary *)dic {
    _descLabel.text = dic[@"text"];

    NSString *image = dic[@"image"];
    if (image) {
        _labelTop2Image.active = YES;
        _labelTop2ContentView.active = NO;
        _mediaImgView.hidden = NO;
        _mediaImgView.image = [UIImage imageNamed:image];
    } else {
        _labelTop2Image.active = NO;
        _labelTop2ContentView.active = YES;
        _mediaImgView.hidden = YES;
    }
    [self setNeedsLayout];
}

2. 创建一点假数据

DataAccess类负责数据的提供，demo中就直接本地随机创建的假数据。为了保证两个Controller获取的数据一致。DataAccess就只有在单例初始化的时候创建了一次数据。

static DataAccess *instance = nil;
+ (instancetype)sharedInstance {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        instance = [[[self class] alloc] init];
    });
    return instance;
}

- (instancetype)init {
    self = [super init];
    if (self) {
        _array = [[self class] getData];
    }
    return self;
}

+ (NSArray *)getData {
    NSMutableArray *arr = [NSMutableArray array];
    for (int i = 0; i < 99; i++) {
        NSDictionary *dic = [self generateCellData];
        [arr addObject:dic];
    }
    return arr;
}

+ (NSDictionary *)generateCellData {
    NSMutableString *str = [NSMutableString string];
    int random = arc4random()%30 + 1;
    for (int i = 0; i < random; i++) {
        [str appendString:@"随机生成的内容"];
    }
    NSString *imageName = @"eva_image";
    if (random % 3 == 0) {
        imageName = nil;
    }
    NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithObject:str forKey:@"text"];
    if (imageName) {
        [dic setObject:imageName forKey:@"image"];
    }
    return dic;
}

3. 手动计算cell高度的tableView

在FirstViewController中我们让tableView用手动方式计算cell, heightForRowAtIndexPath方法将会被调用多次来计算每个要展示的cell的高度

@interface FirstViewController () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) NSArray *dataArray;
@property (nonatomic, strong) UITableView *tableView;
@end

@implementation FirstViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    _dataArray = [DataAccess sharedInstance].array;

    _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    _tableView.dataSource = self;
    _tableView.delegate = self;
    [_tableView registerNib:[UINib nibWithNibName:@"TableViewCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:@"cell"];
    [self.view addSubview:_tableView];

}

#pragma mark - tableView
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _dataArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSDictionary *dic = _dataArray[indexPath.row];
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    [cell setDictionary:dic];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSDictionary *dic = _dataArray[indexPath.row];
    CGFloat cellHeight = [TableViewCell cellHeightWithDictionary:dic];
    return cellHeight;
}
@end

4. cell 自动计算高度

SecondViewController中使用自动计算高度的方式，对比下代码发现去掉了heightForRowAtIndexPath方法，多了estimatedRowHeight和rowHeight两个属性的设置。因为cell内部UI元素的纵向约束都已经加好了，所以cell就可以根据具体的内容自动计算高度撑起来。iOS11中estimatedRowHeight属性默认是开启的，看来苹果已经很推荐我们使用这种方式了，不过一些老代码可能需要将其关闭。

@interface SecondViewController () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) NSArray *dataArray;
@property (nonatomic, strong) UITableView *tableView;

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    _dataArray = [DataAccess sharedInstance].array;

    _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    _tableView.dataSource = self;
    _tableView.delegate = self;
    _tableView.estimatedRowHeight = 300;
    _tableView.rowHeight = UITableViewAutomaticDimension;
    [_tableView registerNib:[UINib nibWithNibName:@"TableViewCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:@"cell"];
    [self.view addSubview:_tableView];
}

#pragma mark - tableView
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _dataArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    NSDictionary *dic = [_dataArray objectAtIndex:indexPath.row];
    [cell setDictionary:dic];
    return cell;
}

5. 看看结果

demo写完了，我们使用 Instruments 下的 Time Profiler 看看两个页面的tableView的耗时情况，连接真机，开始启动后，我分别将两个tableView的内容滚动到了最低端，没有做其他的操作。可以看出耗时最高的就是手动计算cell高度的方法。看来使用Self Sizing cells还是能提升tableView的不少性能的。

Demo_TableViewOptimize.png

6. TableView的一些其他优化

• cell复用，cell的复用是tableView展示内容的一个良好机制，可以有效的减少cell对象的个数减少内存占用，需要注意的是根据业务需要尽量减少cell的类型，理论上可以减少cell复用池中的总个数。另外自定义cell的一些UI不要在cell的调用过程中频繁创建，尽量在cell创建时只创建一次，通过显示隐藏等方式使cell展示不同的样式。nib文件可以方便我们创建UI添加约束，但是相较于纯代码编写，纯代码的效率更高，可根据实际情况取舍。
• cell高度的计算，传统的手动计算cell高度的方式，尽量避免在heightForRow方法中频繁计算，可考虑在数据获取后，统一计算一次cell高度存起来，在heightForRow方法中直接返回。现在Self Sizing Cells是另一种更好的优化方式。
• tableView在快速滚动时，会频繁调用cellForRow方法获取cell，尽量快速的返回cell可以避免由于等待cell的返回造成的卡顿。建议在cellForRow方法中不要对cell做过多的设置和数据绑定，可以将这些操作放在willDisplayCell回调中。
• 在实际项目中，往往性能瓶颈在网络请求，适当的做一些缓存可以提升用户体验。