使用AutoLayout实现自动计算UITableView的cell高度

参考链接(个人小结,不喜请绕行,勿喷!)

UITableview是iOS开发中使用最频繁的一个控件,在实际开发中,我们经常需要定制cell,让cell显示图片、文字等。由于cell包含的图片和文字是根据服务器返回的数据进行填充的,这就导致cell包含的内容的高度是不定的。
四种方法计算cell的高度:
1、iOS8的自动计算机制,需要autolayout(适用iOS8之后系统)
2、iOS6之后系统API结合autolayout进行计算(适用于iOS6之后的系统)
3、手动计算(适用于iOS6之后的系统)
4、借助于第三方框架自动计算(适用于iOS6之后的系统)

本篇就是采用第一种方法。
由于红包model里 限标的类型和限红包使用设备有可能是null,这个时候不予显示,也就是说cell的高度是动态的。

使用AutoLayout对xib布局

正如参考链接文章所说,此方法必须使用autolayout,这里我是用的xib设置的,当然也可以使用第三方框架masonry设置。设置约束的时候必须注意每个控件在垂直方向上必须都有约束(遵循从左到右从上到下的原则),这样cell才可以计算出来高度。

cell整体布局

对cell整体布局的几点说明:

  1. 注册红包及下面的5个使用条件label 都是放在vBg这个辅助view里面的(右部)。对于label的约束,可以全部选中,上下左右设置0,不选margin,之后对注册红包label距底设置20,这样比较高效(红包的name,限额和期限还有日期是一定会有的)

  2. 人民币符号布局


  3. 红包金额布局


  4. 虚线布局


    注意:
    这里用的是通过设置view的背景颜色来加载相应的图片。若用imageview加载图片,会出现cell自动变得很大的问题,初步猜测是因图片本身size太大,imageview自适应导致。

//暂时用uiview的方式加载虚线图片,若用imageview,使用autolayout动态计算cell的高度时,会以imageview为准,使cell 高度变得很大
    self.vXxLine.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HorizontalCoupleLine"]];

2017/11/16补充更新
若用imageview来加载虚线的话,如下设置content hugging和content compressive resistance 为低优先级即可(也就是说让虚线去适应右边总label的高度)


布局小结:观察以上布局能发现不管是从左到右还是从上到下,size都约束好了。


核心代码

viewcontroller里面

//注册cell
[self.mainTabelView registerNib:[UINib nibWithNibName:NSStringFromClass([RedPacketCell class]) bundle:nil]
             forCellReuseIdentifier:RedPacketIdentifer];
//使用autolayout自动计算cell高度(must确定动态label垂直方向的约束)
    self.mainTabelView.estimatedRowHeight = 223;
    self.mainTabelView.rowHeight = UITableViewAutomaticDimension;//iOS8及以后默认值,可以不设置

#pragma mark- tableview datasource/delegate
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    RedPacketCell *cell = [tableView dequeueReusableCellWithIdentifier:RedPacketIdentifer];
    [cell configWithModel:self.maData[indexPath.section]];
    cell.selectionStyle = UITableViewCellSeparatorStyleNone;
    
    return cell;
}

RedPacketCell.m里面(注意注释,在h里面关联需要使用的控件)

- (void)awakeFromNib {
    [super awakeFromNib];
    
    self.vBottomLine.backgroundColor = RGB(235, 60, 58);
    self.lbAmount.textColor = RGB(235, 60, 58);
    self.lbYuan.textColor = RGB(235, 60, 58);
    //暂时用uiview的方式加载虚线图片,若用imageview,使用autolayout动态计算cell的高度时,会以imageview为准,使cell 高度变得很大
    self.vXxLine.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HorizontalCoupleLine"]];
    if (iPhone5SE) {
        self.lbName.font = SYSTEMFONT(15);
        self.lbMonth.font = SYSTEMFONT(13);
        self.lbLimitAmount.font = SYSTEMFONT(13);
        self.lbModelType.font = SYSTEMFONT(13);
        self.lbBidType.font = SYSTEMFONT(13);
        self.lbDate.font = SYSTEMFONT(13);
    }
}

- (void)configWithModel:(redGiftItemModel *)model{
    if (!model) {
        return;
    }
    //红包金额固定宽度,暂不考虑4位数的红包(10000的红包,也不太可能)
    self.lbAmount.text = model.amount;
    self.lbName.text = model.name;
    self.lbLimitAmount.text = [NSString  stringWithFormat:@"• 投资满%@元使用",model.limitAmount];
    self.lbDate.text = [NSString stringWithFormat:@"• %@至%@",model.startDate,model.endDate];
    if (model.month.floatValue==0) {
        self.lbMonth.text = @"• 不限投资期限";
    }else{
        self.lbMonth.text = [NSString stringWithFormat:@"• 投资%@个月及以上使用",model.month];
    }
    //标的类型限制情况(当后台返回null的时候,需要赋值空字符串,autolayout才会自动计算高度为0;\
    不能手动设置label高度,否则当空字符串会保留高度;\
    与投资期限 分条写,这样一来UI不仅文案清晰简洁,同时也适配了小屏显示)
    if (!model.bidType) self.lbBidType.text = @"";
    if ([model.bidType isEqualToString:@"NEW"]) self.lbBidType.text = @"• 限新手标使用";
    if ([model.bidType isEqualToString:@"HOUSE"]) self.lbBidType.text = @"• 限房标使用";
    //终端类型
    if (!model.modelType) self.lbModelType.text = @"";
    if ([model.modelType isEqualToString:@"PC"]) self.lbModelType.text = @"• 限PC端";
    if ([model.modelType isEqualToString:@"MOBILE"]) self.lbModelType.text = @"• 限手机端";
    if ([model.modelType isEqualToString:@"OTHER"]) self.lbModelType.text = @"• 其它";
}

效果图

公司项目,就不给git demo了,附上一张效果图。


参考链接:
http://blog.csdn.net/u011043997/article/details/51263016

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

推荐阅读更多精彩内容