iOS UI相關之UITableView的高度計算01-上

“UITableView的高度計算”這個題目主要通過一個tablveView高度計算的例子從淺到深講一下cell的高度計算的方式

一，在cell內部計算高度（會多次調用cell內部代碼，造成資源的很大浪費）

  • 在cell高度不一致的時候，我們首先想到的是重寫下面的方法：- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath;
    所以我們需要提前算出高度；但是一般cell的高度都是由cell的內容決定的，所以在cell內部通過其內容來計算高度然后返回height貌似成了一個較好的辦法。但是有一個問題就是：cell需要先得到高度之后才能進行展示。這也就造成了我們返回cell高度的時候需要先計算一次高度，然后展示出來的時候再計算一次高度。這種方式造成了內存的很大浪費，有時候甚至會卡幀。這種方式具體如下:    (用了Masory進行了約束以減少代碼量)

  • 1，在cell內部接受到數據的時候進行賦值然后約束，然后獲取高度的值：

- (void)setStatus:(IMStatus *)status{
    _status = status;
    
    _iconView.image = [UIImage imageNamed:status.icon];
    [_iconView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.mas_equalTo(self).with.mas_offset(20);
        make.width.height.mas_equalTo(50);
        
    }];
    
    _nameLabel.text = status.name;
    [_nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(_iconView.mas_right).with.offset(10);
        make.centerY.mas_equalTo(_iconView.mas_centerY);
        make.width.mas_greaterThanOrEqualTo(5);
        make.height.mas_equalTo(30);
    }];
    
    _vipView.image  = [UIImage imageNamed:@"vip"];
    [_vipView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(_nameLabel.mas_right).with.offset(10);
        make.centerY.mas_equalTo(_nameLabel.mas_centerY);
        make.width.height.mas_equalTo(20);
    }];
    
    _textLabel.text = status.text;
    [_textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(_iconView.mas_left);
        make.width.mas_equalTo(300);
        make.top.mas_equalTo(_iconView.mas_bottom).with.offset(20);
    }];
    
    
   if (status.picture.length>0) {
        _picView.hidden = NO;
        _picView.image = [UIImage imageNamed:status.picture];
        [_picView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(_textLabel.mas_bottom).with.offset(20);
            make.left.mas_equalTo(_textLabel.mas_left);
            make.width.height.mas_equalTo(100);
        }];
        [self layoutSubviews];
        self.height = _picView.frame.origin.y + 100 + 20;
    }else{
        _picView.hidden = YES;
        [self layoutSubviews];
        
        CGFloat textHeihgt = [_textLabel sizeThatFits:CGSizeMake(300, MAXFLOAT)].height;
        self.height = _textLabel.frame.origin.y + textHeihgt + 20;
    }
}
  • 2，在控制器中把數據傳給cell得到高度：
    下面可以看到在獲取高度的時候傳第一次數據，在cell展示的時候又傳遞了一次數據 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    IMTableViewCell *cell = [IMTableViewCell cellWithTableView:tableView];
    IMStatus *status = _statuses[indexPath.row];
    cell.status = status;
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //這里是不能拿到當前indexPath的cell的，因為tableView是先計算了高度之后才會有cell添加，也就是說cellForRowAtIndexPath:這個方法是需要調用高度計算的這個函數的，所以直接循環會死掉
    //IMTableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
    
    //所以在排除了MVVM模式之外應該就只能在這個函數內部計算高度
    IMTableViewCell *cell = [IMTableViewCell cellWithTableView:tableView];
    IMStatus *status = _statuses[indexPath.row];
    cell.status = status;//可以在cell的相關方法里看到調用了[self layoutSubviews];就是為了能夠拿到會后的高度
    return  cell.height;
}
二，把cell中的內容抽取到自定義的UIView中計算

然后我想到既然在cell內部計算需要調用多次，能不能把cell計算的內容都抽取到一個UIView中去呢。‘’‘’‘’‘’

三，把cell中frame計算抽取到自定義的NSObject中

  • 但是用第二種方式有一個缺點：就是會創建對象。這個對于我們而言也是比較難接受的，那么就想到了第三方方式：把cell中高度計算的代碼抽取到工具類中進行計算，具體代碼如下：*

  • 1， IMStatusFrame工具類的封裝：（frame計算的代碼的抽取）

- (void)setStatus:(IMStatus *)status{
    _status = status;
    _iconViewF = CGRectMake(10, 10, 50, 50);
    static UILabel *stringLabel = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{//生成一個同于計算文本高度的label
        stringLabel = [[UILabel alloc] init];
        stringLabel.numberOfLines = 0;
    });
    stringLabel.text = status.name;
    //NSLog(@"nameLabel ---- %@",stringLabel.text);
    
    CGFloat nameLabelW = [stringLabel sizeThatFits:CGSizeMake(MAXFLOAT, MAXFLOAT)].width;
    CGFloat nameLabelH = [stringLabel sizeThatFits:CGSizeMake(MAXFLOAT, MAXFLOAT)].height;
    _nameLabelF = CGRectMake(80, (60-nameLabelH)/2, nameLabelW, nameLabelH);

    _vipViewF = CGRectMake(CGRectGetMaxX(_nameLabelF) + 10, CGRectGetMinY(_nameLabelF), 20, 20);
    
    stringLabel.text = status.text;
    CGFloat textLabelW = [stringLabel sizeThatFits:CGSizeMake(400, MAXFLOAT)].width;
    CGFloat textLabelH = [stringLabel sizeThatFits:CGSizeMake(400, MAXFLOAT)].height;
    _textLabelF = CGRectMake(CGRectGetMinX(_iconViewF), CGRectGetMaxY(_iconViewF)+ 20, textLabelW, textLabelH);
    
    if (status.picture.length>0) {
        _picViewF = CGRectMake(CGRectGetMinX(_iconViewF), CGRectGetMaxY(_textLabelF)+20, 200, 200);
        self.height = CGRectGetMaxY(_picViewF) + 10;
    }else{
        self.height = CGRectGetMaxY(_textLabelF) + 10;
    }
}
  • 2，然后在控制器中只需要把數據都存在IMStatusFrame對象中，完成計算，然后存進數組中作為整個tableView的數據源，在需要的時候直接從數組中調用而不是創建新的對象什么的。
//數據封存，在封存的時候已經完成了計算了呢
- (NSMutableArray *)statusFrame{
    if (_statusFrame == nil) {
        _statusFrame = [NSMutableArray array];
        NSArray *statusArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"weibo.plist" ofType:nil]];
        [statusArray enumerateObjectsUsingBlock:^(NSDictionary *dict, NSUInteger idx, BOOL * _Nonnull stop) {
            IMStatus *status = [IMStatus statusWithDict:dict];
            IMStatusFrame *frame = [[IMStatusFrame alloc] init];
            frame.status = status;
            [_statusFrame addObject:frame];
        }];
    }
    return _statusFrame;
}

//在下面的兩個方法中直接調用數組中IMStatusFrame對象的內容即可
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    IMTableViewCell *cell = [IMTableViewCell cellWithTableView:tableView];
    cell.frames = self.statusFrame[indexPath.row];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    //所以在排除了MVVM模式之外應該就只能在這個函數內部計算高度
    IMStatusFrame *frame = self.statusFrame[indexPath.row];
    return  frame.height+10;
}
  • 3，在cell內部直接調用IMStatusFrame內部的frame即可
- (void)setFrames:(IMStatusFrame *)frames{
    _frames = frames;
    
    _iconView.image = [UIImage imageNamed:frames.status.icon];
    _iconView.frame = frames.iconViewF;
    
    _nameLabel.text = frames.status.name;
    _nameLabel.frame = frames.nameLabelF;
    
    _vipView.image  = [UIImage imageNamed:@"vip"];
    _vipView.frame = frames.vipViewF;
    
    _textLabel.text = frames.status.text;
    _textLabel.frame = self.frames.textLabelF;
    
    if (frames.status.picture.length>0) {
        _picView.hidden = NO;
        _picView.image = [UIImage imageNamed:frames.status.picture];
        _picView.frame = frames.picViewF;
    }else{
        _picView.hidden = YES;
    }
}

至此，高度計算基本就搞定了，但是這樣做還是比較麻煩，下次講一下自動布局下的高度計算以及其tableView在高度計算的優化

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容