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(@quot;%@quot;,dText);
    self.blueLable.text = dText;

    // 自動計算這一段文字的高度  
    NSDictionary *attributes = @{NSFontAttributeName: [UIFont fontWithName:@quot;HelveticaNeuequot; 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(@quot;%dquot;,count);

    CGFloat btnWidth = ([UIScreen mainScreen].bounds.size.width - Margin * (Column   1)) / 4;
    CGFloat btnHeight = BtnHeight;

    for (int i = 0; i lt; 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:@quot;   quot;];
    [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(@quot;x:%f,y:%fquot;,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(@quot;添加按鈕quot;);
            NSString *str = [NSString stringWithFormat:@quot;%luquot;,self.dataArr.count   1];
            [self.dataArr addObject:str];

            [self.table reloadData];
        };

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