iOS表视图单元格高度自适应

iOS表视图高度自适应可以节省很多麻烦,尤其是涉及到复杂的业务逻辑时,今天尝试了使用Masonry和FDTemplatelayoutCell来布局表视图单元格,从而达到单元格高度自适应的效果,这里就总结了这其中使用的要点和注意问题。

首先,为了实现表视图的单元格高度自适应,我们需要用到Masony和FDTemplatelayoutCell这两个第三方的类库。同时这里使用一个简化的订单界面来说明使用,效果图如下:

屏幕快照 2016-11-11 下午7.23.36.png
一、Masonry和FDTemplatelayoutCell实现自适应

Masnory帮助我们在单元格中设置约束,实现视图的自动布局,这里不再赘述(网上资料很多)。我们需要做的就是使用Masonry对视图单元格中的位于最底部的视图设置bottom约束,使其能够确定距离单元格最低端的距离。一个代码示例如下:

    //显示订单价格的Label的约束设置
    [self.orderPriceLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       make.top.equalTo(self.SponsorNameLabel.mas_bottom);
       make.left.equalTo(self.headerImgView.mas_right).offset(leftForHeaderImg);
       make.right.equalTo(self.contentView).offset(-10);
       make.height.mas_equalTo(25);
       make.bottom.mas_offset(-10);//关键代码,设置距离底部10
    }];

FDTemplatelayoutCell 是实现单元格高度自适应的关键代码,是UITableView的类目文件。使用的时候关键步骤包括:
1、注册表视图的单元格
这里分为NIb文件和普通类文件的单元格注册,我使用的是xib文件创建的单元格,代码如下:

- (UITableView *)tableView{
    if (_tableView == nil) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kDeviceWidth, kDeviceHeight- 64) style:UITableViewStylePlain
                      ];
        //注册单元格
        [_tableView registerNib:[UINib nibWithNibName:@"OrderTableViewCell" bundle:nil] forCellReuseIdentifier:self.reuseCellID];
        _tableView.dataSource = self;
        _tableView.delegate = self;
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    }
    return _tableView;
}

2、返回单元格高度
返回单元格高度我们就不必计算了,使用如下的方法来返回

//单元格高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    //调用了FDTemplateLayoutCell的方法
    return  [tableView fd_heightForCellWithIdentifier:self.reuseCellID configuration:^(OrderTableViewCell *cell) {
        //回调中要设置数据
        cell.dataDic = self.dataSource[indexPath.row];
    }];
}
二、遇到的问题:
1.Masonry设置的约束无效

我们要确定设置单元格子视图约束是相对于contentView的,如下的约束就是错误的。因为在布局的时候是相对于self的,这样可能会使约束错乱,自适应高度无效。

    [self.separateLineView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self);
        make.height.mas_equalTo(10);
    }];
2.结合xib类型单元格使用时的错误

因为我使用了xib文件来加载视图的,所以开始的时候写了如下方法获取单元格

//获取单元格
+ (OrderTableViewCell *)getOrderTableViewCell{
    NSArray *array = [[NSBundle mainBundle]loadNibNamed:@"OrderTableViewCell" owner:nil options:nil];
    OrderTableViewCell *view = array[0];
    //设置约束
    [view setupConstraints];
    return view;
}

//返回单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSString *identifier = self.reuseCellID ;
   //单元格注册过,一直可以获取到到单元格
    OrderTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:self.reuseCellID];
    if (cell == nil) {
        //这里代码不会执行,方法中设置约束的代码也不会执行
        cell = [OrderTableViewCell getOrderTableViewCell];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    cell.dataDic = self.dataSource[indexPath.row];
    return cell;
}

因为单元格是注册的,所以在返回单元格方法里判断单元格是否存在是没有意义的,getOrderTableViewCell不会调用,在这个方法里设置的布局约束也是无效的。
修改的方法是如下;

- (void)awakeFromNib {
    [super awakeFromNib];
    //awakeFromNib方法中添加约束
    [self setupConstraints];
}
//返回单元格,不再使用getOrderTableViewCell方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
     OrderTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:self.reuseCellID];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.dataDic = self.dataSource[indexPath.row];
     return cell;
}

四、资料链接
demo示例:
https://github.com/DreamcoffeeZS/Demo_FDTemplateLayoutCell
Masonry下载:
https://github.com/SnapKit/Masonry
Masonry的使用:
https://github.com/SnapKit/Masonry/blob/master/README.md
FDTemplateLayoutCell下载:
https://github.com/forkingdog/UITableView-FDTemplateLayoutCell

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

推荐阅读更多精彩内容