UITableViewCell自适应笔记

作者: Sniper_Zheng | 来源:发表于2016-03-15 19:50 被阅读128次

UITableView

创建UITableView之后,会先numberOfRowsAtIndexPaht和heightForRowAtIndexPath 计算大概高度 (因为知道多少条每条高度多少可以算出UIScrollView的contentSize一样的东西)
(如果有100条)heightForRow就会走100次
然后cellForRowAtIndexPath显示每个cell
比如：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.array = [NSMutableArray arrayWithObjects:@"000", @"111", @"222", @"333", @"444", @"555", @"666", @"777", @"888", @"999", @"101010", nil];
    
    self.tblView = [[UITableView alloc] initWithFrame:self.view.bounds];
    self.tblView.dataSource = self;
    self.tblView.delegate = self;
    [self.view addSubview:self.tblView];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    NSLog(@"------------%s", __func__);
    return self.array.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"++++++++%s+++++++++%ld", __func__, indexPath.row);
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuseId"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"reuseId"];
    }
    cell.textLabel.text = [self.array objectAtIndex:indexPath.row];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat height = 100;
    NSLog(@"++++++++%s+++++++++%ld", __func__, indexPath.row);
    return height;
}

输出的结果如下：

-------------[ViewController tableView:numberOfRowsInSection:]
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++0
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++1
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++2
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++3
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++4
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++5
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++6
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++7
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++8
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++9
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++10
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++0
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++0
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++1
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++1
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++2
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++2
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++3
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++3
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++4
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++4
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++5
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++5
++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++6
++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++6

可以看出执行的顺序.即使画面只能显示到666,heightForRow还是会执行到10

屏幕快照 2016-03-15 下午7.12.08.png

非等高cell布局思路:

在heightForRow里创建一个cell(注意是创建,不是调用cellForRow方法,否则会死循环,因为cellForRow时候会调用heightForRow).布局一次(layoutIfNeeded) 得到高度之后 return 得到的高度.
这是最low的方法, 因为在heightForRow里创建了一个cell只为了得到cell的高度. 得到之后就干掉这个cell. 上面也说了如果有100条会调用100次创建100个cell只为获得他的高度. 很耗性能.
上面也介绍了如果cellForRow那一定要先知道cell的高度.其实我们可以改变一下顺序的苹果的API有提供一个方法

// Use the estimatedHeight methods to quickly calcuate guessed values which will allow for fast load times of the table.
// If these methods are implemented, the above -tableView:heightForXXX calls will be deferred until views are ready to be displayed, so more expensive logic can be placed there.
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(7_0);

这个方法会让tableview估算一个cell的值(别太小的离谱,大概200 - 300),因为有估算的值,所以会先走cellForRow,然后tableview觉得估算的height不靠谱,这时才会heightForRow.因为这时候cellForRow已经走完了, 可以在cellForRow中拿到cell的高度(cellForRow只是赋值,不会布局,记得layoutIfNeeded,这样才会走cell的layoutSubviews),保存起来(用数组或者字典都可以),然后在heightForRow里根据保存的值显示出来.
而且因为有了估算的cell高度,所以即使有100条,也不会再最开始就走100次heightForRow了,也算是对性能稍微优化了一些.

// 修改每个cell高度不相等
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat height = 40 + 10 * indexPath.row;
    NSLog(@"++++++++%s+++++++++%ld", __func__, indexPath.row);
    return height;
}
// 增加估算的cell高度
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 240;
}

输出结果:

 -------------[ViewController tableView:numberOfRowsInSection:]
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++0
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++0
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++1
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++1
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++2
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++2
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++3
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++3
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++4
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++4
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++5
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++5
 ++++++++-[ViewController tableView:cellForRowAtIndexPath:]+++++++++6
 ++++++++-[ViewController tableView:heightForRowAtIndexPath:]+++++++++6

在上面2方法中需要再建立个数组或者字典存放cell的高度,有些麻烦.
因为正常一个cell应该是对应一个数据模型,所以可以将cell的高度存放在模型中然后在heightForRow里去获取model.cellHeight.

另外:xib自动布局中 UILabel比较特殊设置宽度约束之后可以不设置高度约束,也可以自动显示出UILabel. 这种情况下可能cell里的label下面可能会有一个空行(多行的自动换行时候可能会有).这时最好告诉label最大宽度(label.preferredMaxLayoutWidth属性)
因为layoutIfNeeded是强制布局，强制布局时候如果不准确的告诉程序文字的最大宽度label.preferredMaxLayoutWidth 可能估算的最大高度可能会有偏差所以可能会造成label下面可能会有一个空行的问题

最后贴一下代码:
模型:

@interface DataModel : NSObject

@property (nonatomic, copy)NSString *textValue;
@property (nonatomic, assign)CGFloat cellHeight;

@end

cell:

@interface MyTableViewCell : UITableViewCell

@property (nonatomic, strong)DataModel *model;

@end

@implementation MyTableViewCell

-(void)setModel:(DataModel *)model {
    _model = model;
    
    self.textLabel.text = _model.textValue;
    // 这里偷懒了, 正常应该是文字或者图片的自适应高度
    CGFloat height = 40 + 10 * [_model.textValue integerValue] * 0.01;
    
    // 布局之后获取高度
    [self layoutIfNeeded];

    model.cellHeight = height;
}

@end

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.array = [NSMutableArray array];
    
    for (NSInteger i = 0; i <= 10; i++) {
        DataModel *data = [[DataModel alloc] init];
        data.textValue = [NSString stringWithFormat:@"%ld%ld%ld", i, i, i];
        [self.array addObject:data];
    }
    
    self.tblView = [[UITableView alloc] initWithFrame:self.view.bounds];
    self.tblView.dataSource = self;
    self.tblView.delegate = self;
    [self.view addSubview:self.tblView];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    NSLog(@"------------%s", __func__);
    return self.array.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"++++++++%s+++++++++%ld", __func__, indexPath.row);
    MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuseId"];
    if (!cell) {
        cell = [[MyTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"reuseId"];
    }
    cell.model = [self.array objectAtIndex:indexPath.row];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    return [[self.array objectAtIndex:indexPath.row] cellHeight];
}

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

结果图:

屏幕快照 2016-03-15 下午7.38.06.png

网友评论

XIB 自动布局

本文标题：UITableViewCell自适应笔记

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

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

UITableViewCell自适应笔记

UITableView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

XIB 自动布局