Cell高度计算的多种方式

相关文推荐:
UITableView自动计算cell高度并缓存,无需再手动计算
四种方法实现UITableView的cell高度自动计算

第三方:
UITableView-FDTemplateLayoutCell使用教程详见README或者优化UITableViewCell高度计算的那些事

cell的高度

cell的高度可以简单分为等高和不等高两大类。等高的情况不用多说,直接设置表视图的cellHeight的属性即可,所以这里只想聊聊不等高的情况。不等高的算法也可以分为两类:

一. 设置计算cell高度的辅助属性

最常见的是在模型里设置一个计算cell高度的辅助属性,然后重写这个属性的get方法,计算cell高度。

[^示例代码下载地址]:

HomeModel

//HomeModel .h
#import <UIKit/UIKit.h>

@interface HomeModel : NSObject

@property (nonatomic,copy) NSString *icon; //图片
@property (nonatomic,copy) NSString *content; //内容的label
//单元格的高度
@property (nonatomic,assign) CGFloat cellHeight;

@end

//HomeModel.m
#import "HomeModel.h"
#import "HomeViewCell.h"

@implementation HomeModel

//惰性初始化是这样写的
-(CGFloat)cellHeight
{
    //只在初始化的时候调用一次就Ok
    if(!_cellHeight){
        HomeViewCell *cell=[[HomeViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:homeIndentifier];
        NSLog(@"我要计算高度");
        // 调用cell的方法计算出高度
        _cellHeight=[cell rowHeightWithCellModel:self];
    
    }
    
    
    return _cellHeight;
}

@end

HomeViewCell

//cell.h文件
#import <UIKit/UIKit.h>
#import "Masonry.h"

@class HomeModel;

static  NSString *homeIndentifier=@"homeCell";

@interface HomeViewCell : UITableViewCell

//数据模型
@property (nonatomic,strong) HomeModel *homeModel;

//我们最后得到cell的高度的方法
-(CGFloat)rowHeightWithCellModel:(HomeModel *)homeModel;

@end

// cell.m文件

#import "HomeViewCell.h"
#import "HomeModel.h"

#define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self;

//头像的高度
#define iconH  80
#define iconW 100
//间距
#define  marginW 10

@interface HomeViewCell ()

@property (nonatomic,weak) UIImageView *icon;  //头像
@property (nonatomic,weak) UILabel *content; //显示文本的label
@property (nonatomic,weak) UIImageView *line;  //下划线

//定义一个contentLabel文本高度的属性
@property (nonatomic,assign) CGFloat contentLabelH;

@end

@implementation HomeViewCell

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self=[super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if(self){
        //1.添加子控件
        [self setupUI];
        
    }
    return self;
}

#pragma mark 添加子控件
-(void)setupUI
{
    //1.添加图片
    UIImageView *icon=[UIImageView new];
    icon.contentMode=UIViewContentModeScaleAspectFill;
    icon.clipsToBounds=YES;
    [self.contentView addSubview:icon];
    self.icon=icon;
    //2.添加label
    UILabel *content=[UILabel new];
    content.numberOfLines=0; //多行显示
    content.font=[UIFont systemFontOfSize:16];
    [self.contentView addSubview:content];
     self.content=content;
    //3.底部添加一条线
    UIImageView *line=[UIImageView new];
    line.backgroundColor=[UIColor grayColor];
    [self.contentView addSubview:line];
    self.line=line;
    
    //设置约束
     __weak __typeof(&*self)weakSelf = self;
    //1.设置图片的大小
    [self.icon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(iconH);  //头像的高度
        make.width.mas_equalTo(iconW); //头像的宽度
        make.top.equalTo(weakSelf.mas_top).offset(marginW) ; //距离顶部10的距离
        make.centerX.equalTo(weakSelf.mas_centerX); //头像的中心x和cell的中心x一样
        
       // make.centerY.equalTo(self.mas_centerY);  头像的中心y和cell的中心y一样
    }];
    //2.设置contentLabel
    [self.content mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(weakSelf.icon.mas_bottom).offset(marginW); //文本距离头像底部10个间距
        make.left.equalTo(weakSelf.mas_left).offset(marginW);  //文本距离左边的距离
        make.right.equalTo(weakSelf.mas_right).offset(-marginW);  //文本距离右边的距离
        
        //文本高度 我们再得到模型的时候 在传递
    }];
    
    
    //3.设置下划线的大小
    [self.line mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(0.5);
        make.left.equalTo(weakSelf.mas_left).offset(0);
        make.right.equalTo(weakSelf.mas_right).offset(0);
        make.bottom.equalTo(weakSelf.mas_bottom).offset(-marginW); //下划线距离底部10的距离
    }];
    
}

//传递数据模型
-(void)setHomeModel:(HomeModel *)homeModel
{
    _homeModel=homeModel;
   
    self.icon.image=[UIImage imageNamed:homeModel.icon];  //头像
    self.content.text=homeModel.content; //文本内容
}

//在表格cell中 计算出高度
-(CGFloat)rowHeightWithCellModel:(HomeModel *)homeModel
{
    _homeModel=homeModel;
    __weak __typeof(&*self)weakSelf = self;
    //设置标签的高度
    [self.content mas_makeConstraints:^(MASConstraintMaker *make) {
        // weakSelf.contentLabelH  这个会调用下面的懒加载方法
        make.height.mas_equalTo(weakSelf.contentLabelH);
    }];
    
    // 2. 更新约束
    [self layoutIfNeeded];
    
    //3.  视图的最大 Y 值
    CGFloat h= CGRectGetMaxY(self.content.frame);
   
    return h+marginW; //最大的高度+10
}

/*
 *  懒加载的方法返回contentLabel的高度  (只会调用一次)
 */
-(CGFloat)contentLabelH
{
    if(!_contentLabelH){
        CGFloat h=[self.homeModel.content boundingRectWithSize:CGSizeMake(([UIScreen mainScreen].bounds.size.width)-2*marginW, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:16]} context:nil].size.height;
        
        _contentLabelH=h+marginW;  //内容距离底部下划线10的距离
    }
    return _contentLabelH;
}



@end

HomeViewController

//HomeViewController.h
#import <UIKit/UIKit.h>

@interface HomeViewController : UITableViewController

@end

//HomeViewController.m
#import "HomeViewController.h"
#import "HomeViewCell.h"
#import "HomeModel.h"

@interface HomeViewController ()

@property (nonatomic,strong) NSMutableArray *arr; //存放的我们自定义的数据
@property (nonatomic,strong) NSMutableArray *arrModel; //存放的数据模型

@end

@implementation HomeViewController

-(NSMutableArray *)arr
{
    if(_arr==nil){
        _arr=[NSMutableArray array];
        [_arr addObject:@"高通与小米达成专利授权协议的主要影响在于小米的海外市场,因为在国内小米并不会遇到专利问题。然而,分析小米在海外遇到的问题会发现,这远不是签订一个专利协议能解决"];
        [_arr addObject:@"当年科比和乔丹的对决,那时的科比几乎无所不能,谁又会想到他会退役,说不定再过10年,我也就退役了。"];
        [_arr addObject:@"高通与小米达成专利授权协议的主要影响在于小米的海外市场,因为在国内小米并不会遇到专利问题。然而,分析小米在海外遇到的问题会发现,这远不是签订一个专利协议能解决"];
        [_arr addObject:@"hello 这是我的iOS学习群 519797474,欢迎加入"];
        [_arr addObject:@"佛堂中,大师正在对弟子讲话:“为师为你们所起之名并非随随便便,而是为师对你们的期望,你们懂了吗?”众弟子都回答懂了。只有一名弟子默然不语。大师见状,问那名弟子道:“圆寂,你为什么不说话?"];
        [_arr addObject:@"最后这个例子是老例子了最后这个例子是老例子了,我想给大家看看其实Masonry做动画也和其他的Autolayout方法一样,但是添加约束的代码却非常的少最后这个例子是老例子了,我想给大家看看其实Masonry做动画也和其他的Autolayout方法一样,但是添加约束的代码却非常的少最后这个例子是老例子了,我想给大家看看其实Masonry做动画也和其他的Autolayout方法一样,但是添加约束的代码却非常的少最后这个例子是老例子了,我想给大家看看其实Masonry做动画也和其他的Autolayout方法一样,但是添加约束的代码却非常的少最后这个例子是老例子了,我想给大家看看其实Masonry做动画也和其他的Autolayout方法一样,但是添加约束的代码却非常的少最后这个例子是老例子了,我想给大家看看其实Masonry做动画也和其他的Autolayout方法一样,但是添加约束的代码却非常的少"];
        [_arr addObject:@"今天和老婆吵架,吵到激烈的时候,我突然觉得我一个大男人为什么要和一个女人一般见识呢?何况还是自己的老婆!当时我就跟老婆道了歉,老婆挺高兴的.道完歉,她哥哥把菜刀放下了,她弟弟把铁锹也放下了,她妹妹拽着我头发的手也松开了,妹夫手里的擀面杖也扔地下了,老丈人也把砖头丢开了;"];
        [_arr addObject:@"昨天去一家工厂面试监工,给出的工资太低,简直不能忍。最后跟主管去车间看了看,我觉得工资只是数字而已,关键是学习的机会,所以留下来了。"];
        [_arr addObject:@"大家好,我是他主治医生。请原谅他,他因为神经病引起的并发症迷恋上了装逼,去年高考 ,他差一点就上清华了,现在想来依然倍感惋惜,清华分数695,他考了69.5,就差那么一点。巨大的打击彻底粉碎了他对未来的憧憬,整日在家自暴自弃专研怎么装逼,终成为新一代装逼大师,将装逼 方法研究的出神入化,各种装逼方法,无死角装逼,终于横空出世…。你看,他又在装逼......."];
        [_arr addObject:@"高通与小米达成专利授权协议的主要影响在于小米的海外市场,因为在国内小米并不会遇到专利问题。然而,分析小米在海外遇到的问题会发现,这远不是签订一个专利协议能解决,周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工周鸿祎的当别人都这么做的时候,我们换一种方式去做;和雷军的打败一种东西的一定是更新的东西而不是简单的复制。越想越觉得他们的理念异曲同工"];
        [_arr addObject:@"很多时候我们过高估计了机遇的力量,低估了规划的重要性,不明确的乐观主义者只知道未来越来越好,却不知道究竟多好,因此不去制定具体计划。他想在未来获利,但是却认为没有必要制定具体规划。"];
        [_arr addObject:@"hello 这是我的iOS学习群 519797474,欢迎加入"];
        for(int i=0;i<_arr.count;i++){
            HomeModel *m=[[HomeModel alloc]init];
            m.icon=[NSString stringWithFormat:@"%i",i];
            m.content=_arr[i];
            //把模型那存到模型数组中
            [self.arrModel addObject:m];
            
        }
        
    }
    return _arr;
}

-(NSMutableArray *)arrModel
{
    if(_arrModel==nil){
        _arrModel=[NSMutableArray array];
    }
    return _arrModel;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableView.separatorStyle=UITableViewCellSeparatorStyleNone;//去掉默认下划线
    self.tableView.estimatedRowHeight=200; //预估行高 可以提高性能
    self.tableView.rowHeight = 88;
    
    //注册表格单元
    [self.tableView registerClass:[HomeViewCell class] forCellReuseIdentifier:homeIndentifier];
    
}


/*
  返回多少行
 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    //因为是我们自定义的数据 所以 这里写arr而不是arrModel  因为只有这样才会调用arr的懒加载犯法
    return self.arr.count;
}

/*
    返回表格单元
 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    //取出模型
    HomeModel *model=self.arrModel[indexPath.row];
    
    HomeViewCell *cell = [tableView dequeueReusableCellWithIdentifier:homeIndentifier];
    
    //传递模型给cell
    cell.homeModel=model;
    
    return cell;
}

/*
 *  返回每一个表格单元的高度
 */

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    
    //取出模型
    HomeModel *homeModel=self.arrModel[indexPath.row];
    
    return    homeModel.cellHeight ;
}




@end
二. 自动布局计算cell高度

上面的方法相对麻烦一些,好消息是iOS8以后,苹果提供了一个自动计算cell高度的方法,也就是本文要介绍的方法。
利用自动布局计算cell高度

首先我们要了解的是在xib,或storyBoard里面UILabel,UIButton等控件的的尺寸是可以随着内容的变化而自动变化的,也就是说你给一个label添加好位置约束后,它的尺寸就可以不添加任何约束。
让自动适应内容的子控件与cell建立联系。例如,一个label通过添加约束使它距左边,上边的距离以及宽度已经确定,此时再让label的底部与父控件的底部建立约束关系(注意label的numberOfLines应该设置为0,要不然label不会自动换行)。

添加计算cell估算高度的代码和cell高度的代码

self.tableView.estimatedRowHeight = 44;
 self.tableView.rowHeight = UITableViewAutomaticDimension;

总结: 其实用autoLayout自动计算cell高度可以分为三步:

  • 让子控件和父控件建立联系。

  • 添加cell的估算高度。

  • 添加cell的高度。

另外,这个方法只试用在iOS8以后,iOS8之前的系统不支持,然而可喜的消息是在今年3月的苹果发布会上,说到iOS9的普及率已经达到了80%,想必iOS8的普及率在90%应该没有什么问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,576评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,515评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,017评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,626评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,625评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,255评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,825评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,729评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,271评论 1 320
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,363评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,498评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,183评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,867评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,338评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,458评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,906评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,507评论 2 359

推荐阅读更多精彩内容

  • 我们在上一篇《通过代码自定义不等高cell》中学习了tableView的相关知识,本文将在上文的基础上,利用sto...
    啊世ka阅读 1,512评论 2 7
  • UITableViewCell 父类是UIView UITableView的每一行都是一个UITableViewC...
    翻这个墙阅读 6,621评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,119评论 4 61
  • 2029年8月12日,我在海蔚蓝与你距离五千公里的距离。 你以每小时100公里的速度离开我, 而我的思念, 却以1...
    嚒嚒哒阅读 113评论 3 1
  • 你还记得盖世英雄嘛?
    山有木之阅读 179评论 0 0