美文网首页iOS开发(OC)iOS新手学习
tableView之提前计算行高(配合masonry)

tableView之提前计算行高(配合masonry)

作者: AnnieAri | 来源:发表于2017-03-29 18:37 被阅读207次

    前言:

    tableView的优化大概就是一下几种:

    • 1.cell内部的层级结构尽量的少 - 使用drawRect画
    • 2.cell内部的数据尽量提前准备好 尽量少的实时计算
    • MVVM的优势 提前处理model,cell直接拿到最终需要的数据
    • 3.所有的控件大小提前计算好,不要每一次都重新计算
    • 4.缓存tableView行高
    • 因为:利用自动布局计算行高很消耗cpu,每次滚动到该cell都要计算.
    • 5.利用cpu去异步绘制cell的layer
    • layer.drawsAsynchronously = true
    • 这个代码可以使layer 提前绘制
    • 6.栅格化 将cel内容渲染成一张图片,在滚动的时候就是一张图片
    • layer.shouldRasterize = true
    • self.layer.rasterizationScale = UIScreen.main.scale 默认是1x的 设置成屏幕的缩放比例就可以了
    • 7.按需加载 -- 按照用户滚动的速度去加载哪个cell

    本篇文章讲一下缓存cell行高

    正题之前的唠叨:

    最开始的时候tableView的行高我们是让tableView自己根据内容去计算的

    //实现这两句代码
    tableView.rowHeight = UITableViewAutomaticDimension;
    tableView.estimatedRowHeight = 100;
    //然后布局cell的时候为最后一个控件设置底部约束 == cell的底部
    

    缺点就是利用自动布局计算行高很消耗cpu,每次滚动到该cell都要计算.

    正题:

    demoPic.png

    缓存行高原理其实就是提前创建一个cell,为其赋值model后将计算好的行高存起来备用

    首先为模型添加一个属性 用来存储行高

    @interface Status : NSObject
    /**
      这里是其他属性
    */
    
    /**rowHeight  - 存储计算好的行高*/
    @property (nonatomic,assign) CGFloat rowHeight;
    @end
    
    //重写cell的model属性的set方法  -- 每次的cellForRow都会重新赋值  cell要显示的各种属性
    - (void)setModel:(Status *)model {
        _model = model;
        [self.iconView sd_setImageWithURL:[NSURL URLWithString:model.user.profile_image_url]];
        self.nameLabel.text = model.user.name;
        self.sourceLabel.text = model.source;
        self.createdLabel.text = model.created_at;
        self.contentLabel.text = model.text;
    }
    
    在cell中添加一个计算行高的方法
    - (CGFloat)getMaxY {
        
        [self layoutIfNeeded];//强制更新约束 让cell子控件重新计算frame
        
        return CGRectGetMaxY(self.contentLabel.frame) + margin; //这里就是返回的cell的行高了
    }
    
    @property(nonatomic,strong) NSArray <Status *>*datas;//这里存着数据
    //实现tableVIew的这个代理  返回该模型下的cell的行高
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
        return self.datas[indexPath.row].rowHeight;
    }
    

    顺便说一句
    cell构造方法重写的是这个

    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    {
        if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
            [self setupUI];
        }
        return self;
    }
    
    

    setupUI 里各种创建控件和masonry布局 详情见demo

    计算行高:

    for (Status *model in self.datas) {
    //这个cell只是用来计算 所以随便创建
      ARStatusCell *cell = [[ARStatusCell alloc] initWithStyle:(UITableViewCellStyleDefault) reuseIdentifier:nil];
      NSLog(@"cell's frame = %@",NSStringFromCGRect(cell.frame));
      cell.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 1000);
      cell.model = model;
      model.rowHeight = [cell getMaxY];
    }
    //
    

    为什么要改cell得frame呢?

    Pre_CalculateRowHeightDamo[10935:2085237] -[ARHomeViewController loadData] [Line 50] cell's frame = {{0, 0}, {320, 44}}
    //初始化的cell的frame 宽度默认是320  所以要改成屏幕的宽度 高度随便改
    

    demo地址:https://github.com/AnnieAri/Pre_CalculateRowHeightDemo

    只是简单的实现行高的一种计算 复杂的ui 也可以实现,我在我们的项目中也是使用这种方式.

    demoPic2.png

    相关文章

      网友评论

        本文标题:tableView之提前计算行高(配合masonry)

        本文链接:https://www.haomeiwen.com/subject/ylhyottx.html