iOS中TableViewCell的自动行高设置

本次介绍2种经常用到自动调整行高的cell.一种是向UILabel中写入内容,内容大小不固定.因此其中label的size也不确定.另一种,就是其中的某个控件高度在不断变化,因此要不断计算这个控件的高度.

演示效果:

主要工具:Masonry框架

第一种:label内容动态设置

由于文字的数量是不定的,label因此高度是可变的,导致cell的高度可变.因此要使用tableViewCell自动设置行高.
首先,要使用tableViewCell自动设置行高必然要为tableView设置2个属性,即:

    table.rowHeight = UITableViewAutomaticDimension;
    table.estimatedRowHeight = 100;

文字不定,所以显示内容的label的约束先不做高度约束.定义一个MASConstraint 属性来记录高度

@interface LabelCell (){
    MASConstraint *heightCons;
}
@property (nonatomic, weak)UILabel *redLabel;
@property (nonatomic, weak)UILabel *blueLable;
@end
[blueLabel makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.contentView).offset(SideMargin);
        make.trailing.equalTo(self.contentView).offset(-SideMargin);
        make.top.equalTo(redLabel.bottom).offset(10);
    }];

// 设置contentView的底部约束  始终等于最底部的子控件的底部
    [self.contentView makeConstraints:^(MASConstraintMaker *make) {
        make.leading.top.trailing.equalTo(self);
        make.bottom.equalTo(blueLabel);
    }];

在获取到lable中的内容后,计算这lable的高度,再来设置label高度. 即在这内容的set方法中完成

- (void)setDText:(NSString *)dText{
    _dText = dText;
    
//    NSLog(@"%@",dText);
    self.blueLable.text = dText;

    // 自动计算这一段文字的高度  
    NSDictionary *attributes = @{NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:FontSize]};
    
    CGRect rect = [dText boundingRectWithSize:CGSizeMake(self.contentView.frame.size.width - SideMargin * 2, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil];
    
    [heightCons uninstall];
    [self.blueLable updateConstraints:^(MASConstraintMaker *make) {
        heightCons = make.height.equalTo(rect.size.height);
    }];
    
}

第二种:cell中含有多个子控件

同样使用Masonry进行控件约束.在这个cell中有1个简单的Img以及多个按钮.将所有的按钮放在bgView上进行九宫格布局.因为bgView上的控件个数不定,所以它的高度不是固定的,需要动态设置.
同样定义一个MASConstraint 属性,记录它的高度

@interface AutoHeightCell (){
    MASConstraint *heightCons;
}
@property (nonatomic, weak)UIImageView *icon;
@property (nonatomic ,weak)UIView *bgView;
@end

由上而下做好各控件的约束

//  最下面的控件的底部约束为
[bgView makeConstraints:^(MASConstraintMaker *make) {
        make.leading.trailing.equalTo(self.contentView);
        make.top.equalTo(icon.bottom);
        make.bottom.equalTo(self.contentView);
    }];

// 整个contentView的约束同样需要处理
[self.contentView makeConstraints:^(MASConstraintMaker *make) {
        make.top.trailing.leading.equalTo(self);
        make.bottom.equalTo(bgView.bottom);
    }];

在数组的set方法中,此时已经获取到bgView和cell的确定高度. 再对bgView的高度进行重新约束

// 重新计算bgView的高度
    [heightCons install];
    [self.bgView updateConstraints:^(MASConstraintMaker *make) {
        heightCons = make.height.equalTo(btnY + BtnHeight);
    }];

控件的个数是不定的,可以添加子控件.利用9宫格布局,在一个bgView上将要添加的按钮都添加上去.最后再添加一个添加的按钮.

/**
 *  在背景View 九宫格添加 多个按钮
 */
- (void)addSubBtns{

    NSInteger count = self.dataArr.count;
//    NSLog(@"%d",count);
    
    CGFloat btnWidth = ([UIScreen mainScreen].bounds.size.width - Margin * (Column + 1)) / 4;
    CGFloat btnHeight = BtnHeight;
    
    for (int i = 0; i < count; i++) {
        // 行
        int row = i / Column;
        int col = i % Column;
        UIButton *btn = [self creatMyBtnWithText:self.dataArr[i]];
        CGFloat btnX = Margin * (col + 1) + btnWidth * col;
        CGFloat btnY = Margin * (row + 1) + btnHeight * row;
        btn.frame = CGRectMake(btnX, btnY, btnWidth, btnHeight);
        
        btn.tag = TagPar + i;
        [btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    // 最后的添加按钮
    UIButton *btn = [self creatMyBtnWithText:@" + "];
    [btn addTarget:self action:@selector(addClick) forControlEvents:UIControlEventTouchUpInside];
    int row = (int)count / Column;
    int col = (int)count % Column;
    CGFloat btnX = Margin * (col + 1) + btnWidth * col;
    CGFloat btnY = Margin * (row + 1) + btnHeight * row;
    btn.frame = CGRectMake( btnX, btnY, btnWidth, BtnHeight);
    
//    NSLog(@"x:%f,y:%f",btnX,btnY);
    
    // 重新计算bgView的高度
    [heightCons install];
    [self.bgView updateConstraints:^(MASConstraintMaker *make) {
        heightCons = make.height.equalTo(btnY + BtnHeight);
    }];
}

点击添加按钮调用cell的回调block.在回调block中向输出到cell中的数组中添加内容.同时刷新tableView

/**
 *      点击添加按钮
 */
- (void)addClick{
    
    if (self.callBackBlock) {
        self.callBackBlock();
    }
}

// cell的回调block
cell.callBackBlock = ^{
            //        NSLog(@"添加按钮");
            NSString *str = [NSString stringWithFormat:@"%lu",self.dataArr.count + 1];
            [self.dataArr addObject:str];
            
            [self.table reloadData];
        };

Demo地址: https://github.com/sun6762/autoHeight.git

后续文章:iOS 中利用相对布局和绝对布局,对Table中的文字自适应调整行高

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

推荐阅读更多精彩内容