【死磕iOS】处理不等高TableViewCell的小花招

春哥大魔王

发布于 2018-04-16 10:57:41

1.3K0

发布于 2018-04-16 10:57:41

地址：//www.jianshu.com/p/a0342ee86431

嗨大家，好久不见~ 今天来和大家一起聊聊处理不等高TableViewCell的那些小花招~ ummmm…其实我是个标题党~ ???

课题一：如何计算Cell高度

方案一：直接法（面向对象）

想知道妹纸爱你有多深？直接去问妹纸本人吧！

嗯！Cell也是一样的，想知道cell到底有多高？直接问Cell本人就好了。直接法，就是把数据布局到Cell上，然后拿到Cell最底部控件的MaxY值。

第一步：创建Cell并正确设置约束，使文字区域高度能够根据文字内容多少自动调整

第二步：再给这个Cell添加点别的东东，就叫这个东东BottomCub了。为Cub添加好约束。

第三步：为这个Cell写一个返回Cell高度 - 也就是BottomCub最大Y值的方法

    #import "TestCell.h"

    @interface TestCell ()
    @property (strong, nonatomic) IBOutlet UILabel *longLabel;
    @property (strong, nonatomic) IBOutlet UIView *bottomCub;
    @end

    @implementation TestCell

    //  Cell的构造方法
    + (instancetype)creatWithTitle :(NSString *)title inTableView :(UITableView *)tableView
    {
        TestCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass(self)];
        if (!cell) {
            cell = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:kNilOptions].lastObject;
        }
        cell.longLabel.text = title;
        return cell;
    }

    /**
     *  拿到bottomCub的最大Y值并返回
     */
    - (CGFloat)cellHeight
    {
        //  强制布局之前，需要先手动设置下cell的真实宽度，以便于准确计算
        CGRect rect = self.frame;
        rect.size.width = [[UIScreen mainScreen] bounds].size.width;
        self.frame = rect;
        [self layoutIfNeeded];    //  一定要强制布局下，否则拿到的高度不准确
        return CGRectGetMaxY(self.bottomCub.frame);
    }

    @end

第四步：在代理方法中设置Cell高度 *注意：计算Cell高度的过程，一定不要放在heightForRow代理方法中！这一点在后文中将会有所提及。 #import "AskCellViewController.h" #import "TestCell.h" @interface AskCellViewController ()<UITableViewDelegate,UITableViewDataSource> @property (strong, nonatomic) UITableView *tableView; /** 测试数据 - Cell中文字内容数组*/ @property(copy,nonatomic) NSArray *testTitleArray; @end @implementation AskCellViewController - (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.tableView]; self.tableView.frame = self.view.bounds; self.tableView.delegate = self; self.tableView.dataSource = self; self.tableView.tableFooterView = [[UIView alloc] init]; }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        TestCell *cell = [TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        return cell;
    }
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    //  *注意：计算Cell高度的过程，一定不要放在此代理方法中！这一点在后文中将会有所提及，此处仅为演示方便
        CGFloat cellHeight = [[TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView] cellHeight];
        NSLog(@"%f",cellHeight);
        return cellHeight;
    }
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return self.testTitleArray.count;
    }
    #pragma mark - Lazy
    - (UITableView *)tableView
    {
        if (!_tableView) {
            _tableView = [[UITableView alloc] init];
        }
        return _tableView;
    }


    - (NSArray *)testTitleArray
    {
        return @[@"我是第一个Cell",@"我是第二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二个Cell",@"我是第三个Cell"];
    }

    @end

效果

方案二：自己算（面向过程）

想知道妹纸爱你有多深？自己来算算看~

通常情况下，Cell之所以不等高，是因为Cell内部文字区域的高度会根据文字数量动态变化，图片区域的高度会根据图片数量而自动变化。也就是说，只要知道文字区域的高度、图片区域的高度，就可以硬生生计算出Cell的高度了。

第一步：硬生生的将每个Cell的高度算出来，并保存在一个数组中

第二步：heightForRow方法中返回相应的CellHeight
  #import "CalculatorViewController.h"   #import "TestCell.h"    @interface CalculatorViewController ()<UITableViewDelegate,UITableViewDataSource>    @property (strong, nonatomic) UITableView *tableView;   /** 测试数据 - Cell中文字内容数组*/   @property(copy,nonatomic) NSArray *testTitleArray;   /** 用来存Cell高度的数组*/   @property(copy,nonatomic) NSArray *cellHeightArray;    @end    @implementation CalculatorViewController    - (void)viewDidLoad {       [super viewDidLoad];       [self.view addSubview:self.tableView];        self.tableView.frame = self.view.bounds;       self.tableView.delegate = self;       self.tableView.dataSource = self;       self.tableView.tableFooterView = [[UIView alloc] init];   }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        TestCell *cell = [TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        return cell;
    }
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        CGFloat cellHeight = [self.cellHeightArray[indexPath.row] floatValue];
        return cellHeight;
    }
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return self.testTitleArray.count;
    }
    #pragma mark - Lazy
    - (UITableView *)tableView
    {
        if (!_tableView) {
            _tableView = [[UITableView alloc] init];
        }
        return _tableView;
    }
    - (NSArray *)testTitleArray
    {
        return @[@"我是第一个Cell",@"我是第二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二个Cell",@"我是第三个Cell"];
    }
    - (NSArray *)cellHeightArray
    {
        NSMutableArray *cellHeightTMPArray = [@[] mutableCopy];
        //  开始硬生生的计算每一个Cell高度
        for (NSString *string in self.testTitleArray) {
            CGFloat cellHeight = 0;
            //  一个Cell由两部分组成 - 高度自动调整的Label & bottomCub
            //  bottomCub高度是确定的 - 120，Label和bottomCub之间的间距是确定的 - 8
            static CGFloat bottomCubHeight = 120;
            static CGFloat bottomMargin = 8;
            //  计算Label的高度 - 其实就是计算Lable中的String的总高度
                //  1. 拿到将要放入Lable的String
            NSString *stringForLabel = string;
            //  2. 根据文字内容、字体（固定值）、文字区域最大宽度计算String总高度
            static CGFloat fontSize = 17;
            CGFloat labelHeight = [stringForLabel sizeWithFont:[UIFont systemFontOfSize:fontSize] constrainedToSize:CGSizeMake(self.tableView.frame.size.width, CGFLOAT_MAX)].height;
                //  3. 拿到了总高度，放入数组
            cellHeight = labelHeight + bottomMargin + bottomCubHeight;

            [cellHeightTMPArray addObject:@(cellHeight)];
        }
        return cellHeightTMPArray;
    }
    @end

效果 ummmm就不给效果图了哦，和上一张是一样一样的~

方案三：利用iOS8新特性

想知道妹纸爱你有多深？知道这个干嘛，直接通过iOS8，让妹纸爱上你不就好啦~

其实，iOS8已经提供了直接通过XIB让Cell高度自适应的方法了，只要简单拖拖线，根本木有必要计算Cell高度，就可以搞定不等高Cell

第一步：设置tableView的估算Cell高度&rowHeight值为自动计算模式

(void)viewDidLoad {
  [super viewDidLoad];
self.tableView.estimatedRowHeight = 100;  //  随便设个不那么离谱的值
  self.tableView.rowHeight = UITableViewAutomaticDimension;
}

第二步：为Cell中最下面的View设置约束 - 除了要定高、定宽、左上角粘着Label外，还要设置bottom距contentView的bottom间距为固定值，如0

第三步：一定要注意 - 不能实现heightForRow代理方法！！！不能实现heightForRow代理方法！！！不能实现heightForRow代理方法！！！重要的事情说三遍…

(CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath
{
return 1000;
}

效果：一样杠杠滴~

课题二：在哪计算Cell高度

方案一：在heightForRow代理方法中计算

示例代码：见课题一方案一
说明：在这里进行计算是非常糟糕的选择，因为系统调用heightForRow方法非常频繁感兴趣的小伙伴可以打印测试下…在这里进行计算，意味着系统每调用一次heightForRow方法，就会执行一次高度计算…好可怕有木有???

方案二：在请求到数据后马上计算

示例代码：见课题一方案二
说明：在这里进行计算相对于方案一来说进步了很多，在这里计算是不错的选择哦！

方案三：在cellForRow代理方法中算

说明：其实，要隆重介绍的是方案三~
思路：既然想知道Cell的高度，那么一定是Cell自己最懂自己有多高啦（面向对象的思维）。那么，在哪里能拿到Cell和Cell的高度呢？ - 当然是CellForRow代理方法中啦！但是，在CellForRow中拿到Cell高度后，如何传递给heightForRow代理方法呢？ - 可以将Cell高度保存在一个数组中，或者保存在Cell对应的Model中~ 但是，我们知道系统对tableView代理方法的调用顺序，是先调取heightForRow再调取cellForRow的呀，这意味着，我们在cellForRow方法中拿到cell高度之前，就需要设置heightForRow...怎么办？解决方案：实现estimatedHeightForRow代理方法！实现这个代理方法后，系统会先调取cellForRow，再调取heightForRow，而且实现这个代理方法之后，腰不酸了，腿不疼了，一口气上五楼也不费劲了~
示例代码：可以参考下我之前的文章哦！传送门 - iOS项目实例：QQ聊天界面UI搭建
注意：如果实现了estimatedHeightForRow代理方法，可能会造成tableView的ContentSize值不正确哦！所以，该方法请选择使用…

结论

处理不等高TableViewCell，优先使用iOS8新特性（课题一方案三）不能使用iOS8新特性的情况下，优先选择课题一方案一+课题二方案三组合不能用上面两种，优先选择使用课题一方案一+课题二方案二组合~

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2015-12-27，如有侵权请联系 cloudcommunity@tencent.com 删除

ios

本文分享自春哥talk 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

ios

登录后参与评论

0 条评论

热度