iOS:通过Self-Sizing Cells新特性自动计算cell的高度

Posted 2020-10-09 程序猿

ios8 新特性Self-Sizing Cells，自动计算cell的高度

 

一、简单介绍

UITableView是iOS开发最常用的一个控件，通过代理和数据源方法，几乎能实现各种各样的列表功能。在这里面，有一个比较重要的属性是行高rowHeight，默认的行高是44px。很显然，默认的高度有时候很难满足这个功能的需求："cell的高度动态改变"。最常见的就是朋友圈，微博，评论列表类的cell，因为用户评论的内容长度不同，导致cell的高度也不同。

 

二、旧的解决

那么，以前我们是如何计算cell的高度？我的做法是给每一个模型定义一个cellHeight属性，通过模型提前来计算 (此方法一般为了适配iOS7用)，然后在tableView:heightForRowAtIndexPath中拿出模型的这个属性返回即可。这种做法虽然可以，但是毕竟会多写一些代码。针对如此，苹果帮我们在iOS8做了优化。

 

三、新的出世

Self-Sizing Cells，iOS8新出现的特性，可以自动实现cell高度的计算。我们只需要做三件事:

1、给tableView设置预估高度estimatedRowHeight，提高tableView的滚动性能；

2、给tableView的rowHeight设置自动尺寸UITableViewAutomaticDimension;

3、给cell.contentView中的子控件添加Auto Layout相对约束(top、bottom上下约束必须完整，因为需要自动计算高度)，推荐使用mansory约束。

 

四、两者区别

通过计算去设置cell的行高，除了会添加了多余的多码，影响效率，另外添加性的控件需要重新计算，不利用扩展。

通过Self-Sizing Cells新特性可以省去可不必要的代码，新添加控件只需要调整约束，扩展起来很方便。

 

五、使用案例

TableViewController

//
//  ViewController.m
//  cell自动计算行高
//
//  Created by 夏远全 on 2017/9/30.
//  Copyright © 2017年 夏远全. All rights reserved.
//

#import "TableViewController.h"
#import "TableViewCell.h"


@interface TableViewController ()
@property (strong , nonatomic)NSMutableArray *dataSource;
@end

@implementation TableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //预估行高
    self.tableView.estimatedRowHeight = 100;
    
    //自动尺寸
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    
    //去除空白
    self.tableView.tableFooterView = [[UIView alloc] init];
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.dataSource.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *reuserIdentifier = @"TableViewCell";
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuserIdentifier];
    if (!cell) {
        cell = [[TableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuserIdentifier];
    }
    cell.modelDic = self.dataSource[indexPath.row];
    return cell;
}

-(NSMutableArray *)dataSource{
    if (!_dataSource) {
        _dataSource = [NSMutableArray array];
        [_dataSource addObject:@{@"avatar":@"image1.png",@"name":@"美女与野兽",@"instruction":@"遥映人间冰雪样，暗香幽浮曲临江。 遍识天下英雄路，俯首江左有梅郎"}];
        [_dataSource addObject:@{@"avatar":@"image2.png",@"name":@"哪有几回闻",@"instruction":@"iOS基于RTMP的视频推流 一、基本介绍 iOS直播一出世，立马火热的不行，各种直播平台如雨后春笋，正因为如此，也同样带动了直播的技术快速发展，在IT界精通直播技术的猴子可是很值钱的。"}];
        [_dataSource addObject:@{@"avatar":@"image3.png",@"name":@"绝天地苍穹",@"instruction":@"中共中央政治局第四十三次集体学习时强调 深刻认识马克思主义时代意义和现实意义 继续推进马克思主义中国化时代化大众化"}];
    }
    return _dataSource;
}
@end

TableViewCell 

//
//  TableViewCell.h
//  cell自动计算行高
//
//  Created by 夏远全 on 2017/9/30.
//  Copyright © 2017年 夏远全. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface TableViewCell : UITableViewCell
@property (strong , nonatomic)NSDictionary *modelDic;
@end

//
//  TableViewCell.m
//  cell自动计算行高
//
//  Created by 夏远全 on 2017/9/30.
//  Copyright © 2017年 夏远全. All rights reserved.
//

#import "TableViewCell.h"
#import <Masonry.h>

@interface TableViewCell ()
@property (strong,nonatomic)UIImageView *avatarView;
@property (strong,nonatomic)UILabel     *nameLabel;
@property (strong,nonatomic)UILabel     *instrLabel;
@end

@implementation TableViewCell

#pragma mark - life cycle

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        [self setup];
    }
    return self;
}

-(instancetype)init
{
    if (self = [super init]) {
        [self setup];
    }
    return self;
}

-(instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setup];
    }
    return self;
}

-(void)setup
{
    [self setupSubViews];
    [self setupSubviewsConstraints];
}


#pragma mark - add subViews
-(void)setupSubViews{
    [self.contentView addSubview:self.avatarView];
    [self.contentView addSubview:self.nameLabel];
    [self.contentView addSubview:self.instrLabel];
}


#pragma mark - layout subviews
-(void)setupSubviewsConstraints {
    
    [self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.contentView.mas_left).offset(20);
        make.top.mas_equalTo(self.contentView.mas_top).offset(20);
        make.size.mas_equalTo(CGSizeMake(44, 44));
    }];
    
    [self.nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.avatarView.mas_right).offset(20);
        make.right.mas_equalTo(self.contentView.mas_right).offset(-20);
        make.top.mas_equalTo(self.contentView.mas_top).offset(20);
    }];
    
    [self.instrLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.avatarView.mas_right).offset(20);
        make.right.mas_equalTo(self.contentView.mas_right).offset(-20);
        make.top.mas_equalTo(self.nameLabel.mas_bottom).offset(10);
        make.bottom.mas_equalTo(self.contentView.mas_bottom).offset(-20);//此处cell的高度就被算出来了
    }];
}

#pragma mark - event response

#pragma mark - public methods

#pragma mark - private methods

#pragma mark - getters and setters
-(void)setModelDic:(NSDictionary *)modelDic{
    _modelDic = modelDic;
    
    self.avatarView.image = [UIImage imageNamed:modelDic[@"avatar"]];
    self.nameLabel.text = modelDic[@"name"];
    self.instrLabel.text = modelDic[@"instruction"];
    
}


-(UIImageView *)avatarView{
    if (!_avatarView) {
        _avatarView = [[UIImageView alloc] init];
    }
    return _avatarView;
}

-(UILabel *)nameLabel{
    if (!_nameLabel) {
        _nameLabel = [[UILabel alloc] init];
        _nameLabel.numberOfLines = 0;
    }
    return _nameLabel;
}

-(UILabel *)instrLabel{
    if (!_instrLabel) {
        _instrLabel = [[UILabel alloc] init];
        _instrLabel.numberOfLines = 0;
    }
    return _instrLabel;
}

@end

 

六、演示效果