zoukankan      html  css  js  c++  java
  • UITableView自动计算cell高度并缓存,(附:Marsonry 优先级)

    cell高度计算的历史

    在iOS8之前,如果UITableViewCell的高度是动态的,如果想要显示正确的话,我们需要在下面这个UITableView的代理方法中,返回每一行的精确高度:

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

    如果cell的控件很多,样式很复杂的话,在这里面我们就可能需要写很多代码去做一些复杂的计算,甚至可能导致滑动不流畅。

    后来也有一些人写了一些第三方去解决这个问题,例如UITableView-FDTemplateLayoutCell。只要给cell自上而下加好约束,它就可以帮我们去算cell的高度并且可以缓存,省去了我们自己写计算代码的成本。具体可以进链接里面看看它的demo。

    但是在iOS10的系统下, FDTemplateLayoutCell会卡界面,而且tableview的行数越多表现的越卡。

    而且苹果在iOS8之后,推出了一种超级简单的cell动态自适应的方法,使用起来比 FDTemplateLayoutCell也简单一些,而且现在iOS10都出来了,没有必要去支持iOS7了,所以最后我还是选择了用系统的办法。这样我们以后就再也不用写heightForRowAtIndexPath方法了哈哈哈。

    系统的cell自适应高度的使用方法

    首先我们需要把cell上的控件自上而下加好约束,如果对约束不熟悉的话建议看看下面这两篇文章学习一下:
    Auto Layout Tutorial in iOS 9 Part 1: Getting Started(http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2)
    [Auto Layout Tutorial in iOS 9 Part 2: Constraints

    用xib加约束和用masonry加代码约束都是可以的。注意约束一定要自上而下加好,让系统知道怎么去计算高度。在这篇文章的demo里面的cell加的约束是这样的:


    cell约束

    加好约束后,然后告诉tableView自己去适应高度就可以了。有两种写法:

    self.tableView.rowHeight = UITableViewAutomaticDimension;
    self.tableView.estimatedRowHeight = 100;

    或者直接写这个代理方法就可以了

    - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return 100;
    }

    这个的意思就是告诉tableView,你需要自己适应高度,我不给你算啦哈哈哈。但是我们需要告诉它一个大概高度,例如上面的100,理论上这个是可以随便写的,并不影响显示结果,但是越接近真实高度越好。

    来看下demo效果:


    demo

    我们看到,cell已经自己适应内容算出了高度,是不是很方便呢哼哼。
    具体的代码大家可以去demo看哦。

    其实section的header和footer也是可以自动适应的,对应的方法有:

    - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForHeaderInSection:(NSInteger)section;
    - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForFooterInSection:(NSInteger)section;

    但是我们在实际开发中,一般都是根本没有header和footer,有的话一般也是给一个固定高度。所以在这里就不讲解了,原理都一样。

    可能遇到的问题和解决办法

    1.高度不对
    有时候有可能运行出来后看到cell的高度显示的不对,就像这样:


    高度不对


    这个问题是因为约束没有满足自上而下,从而系统不知道怎么去计算。解决办法就是去修改约束,直到满足为止。一定要好好理解约束啊!

    2.点击状态栏无法滚动到顶部
    我们知道,如果界面中有UIScrollView的话,点击状态栏会让其滚动到顶部,就像这样:


    点击状态栏会滚动到顶部

    但是如果我们用了自动计算高度的方法,又调用了tableView的reloadData方法(例如我们的数据有分页的时候,加载完下一页的数据后会去刷新tableView)。这时候就会出现问题,点击状态栏就有几率不能精确滚动到顶部了:


    Untitled.gif

    解决这个问题的办法是去缓存cell的高度,代码如下:

    @property (nonatomic, strong) NSMutableDictionary *heightAtIndexPath;//缓存高度所用字典
    #pragma mark - UITableViewDelegate
    -(CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSNumber *height = [self.heightAtIndexPath objectForKey:indexPath];
        if(height)
        {
            return height.floatValue;
        }
        else
        {
            return 100;
        }
    }
    
    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSNumber *height = @(cell.frame.size.height);
        [self.heightAtIndexPath setObject:height forKey:indexPath];
    }

    解释一下,就是用一个字典做容器,在cell将要显示的时候在字典中保存这行cell的高度。然后在调用estimatedHeightForRowAtIndexPath方法时,先去字典查看有没有缓存高度,有就返回,没有就返回一个大概高度。

    缓存高度之后,在demo里面多试几次,发现点击状态栏已经可以精确滚动回顶部了:


    这段代码其实可以写在viewController的基类里面,这样写一遍就可以每个地方都能缓存cell的高度了。
    /// masonry
    可能标题不能够完全解释清楚本文到底要描述什么,没关系,我们来举出一个实际的例子,看下图:

     
    红框中的我们发现在第一行一共有三个控件,一个是标题的UILabel(表示为:headLineTabel),一个是宝石的图标UIImageView(表示为:diamondImageView),再有一个是宝石的数量UILabel(表示为:diamondLabel),这时候我们用Masonry编写代码的时候往往一般是这样的思路:
        // 钻石数量label
        [self.contentView addSubview:self.diamondLabel];
        [self.diamondLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.contentView).with.offset(-13 * AutoLayoutScaleX);
            make.top.equalTo(self.contentView).with.offset(13 * AutoLayoutScaleY);
    
        }];
    
        // 钻石imageView
        [self.contentView addSubview:self.diamondImageView];
        [self.diamondImageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.diamondLabel.mas_left).with.offset(-2 * AutoLayoutScaleX);
            make.centerY.equalTo(self.diamondLabel);
        }];
    
        // 标题label
        [self.contentView addSubview:self.headLineLabel];
        [self.headLineLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.contentView).with.offset(10 * AutoLayoutScaleX);
            make.centerY.equalTo(self.diamondLabel);
        }];
    但是这样的布局所造成的效果肯定不可能是上图所示,因为headLineLabel和diamondImageView之间没有设置约束,所以如果headLine的长度过于长,将会和diamondImageView相互重叠,本文就是要讲解解决这个问题的方法。
    • 问题出现原因

      1. 没有直接对带有文字的UILabel进行宽度的约束
      2. 两个会相互重叠的控件之间没有设置约束
    • 思考

      1. 先来试试直接对UILable计算宽度来进行写死的约束,这样的话我也应该将其他控件的宽度也写死才能成功编译,但是这样我就需要算好两个控件的宽度,而最好的其实是不限制他们,让他们自己知道怎么“谦让”对方
      2. 在两个控件之间设置约束,由于宽度都没有限制,所以这样写,从原理上分析,是肯定会报错的(当然实际也会报错)
      3. 问题已经由上面两个点抛出,那么实际上解决这个问题的方法是设置各个控件的优先级,让他们自己知道自己是什么样的地位的,低地位的控件需要谦让高地位的控件,让高地位的控件优先将自己显示完全
    • 解决办法

      // 标题label
        [self.contentView addSubview:self.headLineLabel];
        [self.headLineLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.contentView).with.offset(10 * AutoLayoutScaleX);
            make.centerY.equalTo(self.diamondLabel);
            make.right.mas_lessThanOrEqualTo(self.diamondLabel.mas_left).with.offset(-5 * AutoLayoutScaleX);
        }];
      // 设置优先级
        [self.diamondImageView setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
        [self.diamondLabel setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
      
        [self.headLineLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    • 代码分析和解释

      1. 在headLineLabel的布局中添加了一个约束,即为headLineLabel和diamondImageView之间的约束,但是所使用的不是equalTo,而是mas_lessThanOrEqualTo,表示极限的情况是等于,一般来说是小于
      2. 优先级函数:
        • 第一个参数:通俗来讲,不同的优先级,表示显示的完整性的高低,优先级越高,那么在父控件无法在无越界的情况下的情况下,就会优先先把优先级高的控件显示完整,然后再依次显示优先级低的
        • 第二个参数:代表在什么方向上进行优先级限制



  • 相关阅读:
    UVA138 Street Numbers(数论)
    UVA11388 GCD LCM(数论)
    POJ1088 滑雪(记忆化搜索)
    POJ1003 Hangover
    POJ1836 Alignment(LIS)
    POJ1062 昂贵的聘礼(最短路)
    POJ3083 Children of the Candy Corn(搜索)
    POJ1068 Parencodings(模拟)
    POJ1573 Robot Motion(模拟)
    POJ2632 Crashing Robots(模拟)
  • 原文地址:https://www.cnblogs.com/fakeCoder/p/7098845.html
Copyright © 2011-2022 走看看