iOS:通过Self-Sizing Cells新特性自动计算cell的高度

iOS8 新特性Self-Sizing Cells,自动计算cell的高度

一、简单介绍

UITableView是iOS开发最常用的一个控件,通过代理和数据源方法,几乎能实现各种各样的列表功能。在这里面,有一个比较重要的属性是行高rowHeight,默认的行高是44px。很显然,默认的高度有时候很难满足这个功能的需求:"cell的高度动态改变"。最常见的就是朋友圈,微博,评论列表类的cell,因为用户评论的内容长度不同,导致cell的高度也不同。

二、旧的解决

那么,以前我们是如何计算cell的高度?我的做法是给每一个模型定义一个cellHeight属性,通过模型提前来计算 (此方法一般为了适配iOS7用),然后在tableView:heightForRowAtIndexPath中拿出模型的这个属性返回即可。这种做法虽然可以,但是毕竟会多写一些代码。针对如此,苹果帮我们在iOS8做了优化。

三、新的出世

Self-Sizing Cells,iOS8新出现的特性,可以自动实现cell高度的计算。我们只需要做三件事:

1、给tableView设置预估高度estimatedRowHeight,提高tableView的滚动性能;

2、给tableView的rowHeight设置自动尺寸UITableViewAutomaticDimension;

3、给cell.contentView中的子控件添加Auto Layout相对约束(top、bottom上下约束必须完整,因为需要自动计算高度),推荐使用mansory约束。

四、两者区别

通过计算去设置cell的行高,除了会添加了多余的多码,影响效率,另外添加性的控件需要重新计算,不利用扩展。

通过Self-Sizing Cells新特性可以省去可不必要的代码,新添加控件只需要调整约束,扩展起来很方便。

五、使用案例

TableViewController

//
//  ViewController.m
//  cell自动计算行高
//
//  Created by 夏远全 on 2017/9/30.
//  Copyright ? 2017年 夏远全. All rights reserved.
//

#import "TableViewController.h"
#import "TableViewCell.h"

@interface TableViewController ()
@property (strong , nonatomic)NSMutableArray *dataSource;
@end

@implementation TableViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //预估行高
    self.tableView.estimatedRowHeight = 100;

    //自动尺寸
    self.tableView.rowHeight = UITableViewAutomaticDimension;

    //去除空白
    self.tableView.tableFooterView = [[UIView alloc] init];
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.dataSource.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    static NSString *reuserIdentifier = @"TableViewCell";
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuserIdentifier];
    if (!cell) {
        cell = [[TableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuserIdentifier];
    }
    cell.modelDic = self.dataSource[indexPath.row];
    return cell;
}

-(NSMutableArray *)dataSource{
    if (!_dataSource) {
        _dataSource = [NSMutableArray array];
        [_dataSource addObject:@{@"avatar":@"image1.png",@"name":@"美女与野兽",@"instruction":@"遥映人间冰雪样,暗香幽浮曲临江。 遍识天下英雄路,俯首江左有梅郎"}];
        [_dataSource addObject:@{@"avatar":@"image2.png",@"name":@"哪有几回闻",@"instruction":@"iOS基于RTMP的视频推流 一、基本介绍 iOS直播一出世,立马火热的不行,各种直播平台如雨后春笋,正因为如此,也同样带动了直播的技术快速发展,在IT界精通直播技术的猴子可是很值钱的。"}];
        [_dataSource addObject:@{@"avatar":@"image3.png",@"name":@"绝天地苍穹",@"instruction":@"中共中央政治局第四十三次集体学习时强调 深刻认识马克思主义时代意义和现实意义 继续推进马克思主义中国化时代化大众化"}];
    }
    return _dataSource;
}
@end

TableViewCell

//
//  TableViewCell.h
//  cell自动计算行高
//
//  Created by 夏远全 on 2017/9/30.
//  Copyright ? 2017年 夏远全. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface TableViewCell : UITableViewCell
@property (strong , nonatomic)NSDictionary *modelDic;
@end
//
//  TableViewCell.m
//  cell自动计算行高
//
//  Created by 夏远全 on 2017/9/30.
//  Copyright ? 2017年 夏远全. All rights reserved.
//

#import "TableViewCell.h"
#import <Masonry.h>

@interface TableViewCell ()
@property (strong,nonatomic)UIImageView *avatarView;
@property (strong,nonatomic)UILabel     *nameLabel;
@property (strong,nonatomic)UILabel     *instrLabel;
@end

@implementation TableViewCell

#pragma mark - life cycle

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

-(instancetype)init
{
    if (self = [super init]) {
        [self setup];
    }
    return self;
}

-(instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setup];
    }
    return self;
}

-(void)setup
{
    [self setupSubViews];
    [self setupSubviewsConstraints];
}

#pragma mark - add subViews
-(void)setupSubViews{
    [self.contentView addSubview:self.avatarView];
    [self.contentView addSubview:self.nameLabel];
    [self.contentView addSubview:self.instrLabel];
}

#pragma mark - layout subviews
-(void)setupSubviewsConstraints {

    [self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.contentView.mas_left).offset(20);
        make.top.mas_equalTo(self.contentView.mas_top).offset(20);
        make.size.mas_equalTo(CGSizeMake(44, 44));
    }];

    [self.nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.avatarView.mas_right).offset(20);
        make.right.mas_equalTo(self.contentView.mas_right).offset(-20);
        make.top.mas_equalTo(self.contentView.mas_top).offset(20);
    }];

    [self.instrLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.avatarView.mas_right).offset(20);
        make.right.mas_equalTo(self.contentView.mas_right).offset(-20);
        make.top.mas_equalTo(self.nameLabel.mas_bottom).offset(10);
        make.bottom.mas_equalTo(self.contentView.mas_bottom).offset(-20);//此处cell的高度就被算出来了
    }];
}

#pragma mark - event response

#pragma mark - public methods

#pragma mark - private methods

#pragma mark - getters and setters
-(void)setModelDic:(NSDictionary *)modelDic{
    _modelDic = modelDic;

    self.avatarView.image = [UIImage imageNamed:modelDic[@"avatar"]];
    self.nameLabel.text = modelDic[@"name"];
    self.instrLabel.text = modelDic[@"instruction"];

}

-(UIImageView *)avatarView{
    if (!_avatarView) {
        _avatarView = [[UIImageView alloc] init];
    }
    return _avatarView;
}

-(UILabel *)nameLabel{
    if (!_nameLabel) {
        _nameLabel = [[UILabel alloc] init];
        _nameLabel.numberOfLines = 0;
    }
    return _nameLabel;
}

-(UILabel *)instrLabel{
    if (!_instrLabel) {
        _instrLabel = [[UILabel alloc] init];
        _instrLabel.numberOfLines = 0;
    }
    return _instrLabel;
}

@end

六、演示效果

时间: 2024-08-24 19:52:41

iOS:通过Self-Sizing Cells新特性自动计算cell的高度的相关文章

iOS8新特性 计算 cell 的高度

http://tutuge.me/2015/08/08/autolayout-example-with-masonry2/ 1.tableview: 自动计算 tableVIew 的 cell 的高度: 1. 创建 tableview 的时候: tableview.rowHeight = UITableViewAutomaticDimension;(自动获取 cell 的高度) 2. 在heightForRowAtIndexPath: 方法中直接返回:UITableViewAutomaticDi

最新iOS 6 in Xcode4.5新特性——Storyboard和属性自动绑定

最新iOS 6 in Xcode4.5新特性编程之二(上)——Storyboard和属性自动绑定 从Xcode 4.3开始,Storyboard 就是iOS 5和iOS 6中令人兴奋的一个新特性,他将为你在创建用户界面上节省很多时间. 那么究竟什么是Storyboard呢?我将用一幅图片来向你展示: 下面这个就是本实例中即将用到的Storyboard. 关于故事板编程,我在“最新Xcode 4.3.2 下使用Storyboard和ARC开发iPhone4程序 03——Storyboard类及使用

iOS8以后自动计算cell的高度

前提: 1.iOS系统>=8 2.cell中的每个控件布局固定,不含一些动态的模块,但是可以含有label的变化 可以采用tableView自动计算cell的高度 首先设置tableView的属性: // cell的高度设置 self.tableView.estimatedRowHeight = 44; // 默认高度 self.tableView.rowHeight = UITableViewAutomaticDimension; // 自动计算高度 cell xib设置: PS:label的

iOS之Xcode8 Auto Layout新特性

目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedback Loop Debugging 一.Incrementally Adopting Auto Layout Incrementally Adopting Auto Layout是什么意思呢?在我们IB里面布局我们的View的时候,我们并不需要一次性就添加好所有的constraints.我们可以一

iOS开发实用技巧—项目新特性页面的处理

iOS开发实用技巧篇—项目新特性页面的处理 说明:本文主要说明在项目开发中会涉及到的最最简单的新特性界面(实用UIScrollView展示多张图片的轮播)的处理. 代码示例: 新建一个专门的处理新特性界面的控制器,可以实用代码也可以用xib,在这里实用纯代码方式,创建一个控制器NewfeatureViewController. 头文件代码: 1 // 2 // JMNewfeatureViewController.h 3 // 4 5 #import <UIKit/UIKit.h> 6 7 t

iOS 11系列 - Xcode 9新特性

Xcode 9最近刚刚发布,带来了一系列不错的新特性,可以更好的帮助到开发者完成开发工作. Xcode Runtime Tool Xcode 9中有许多Runtime Tool可以帮助开发者找到代码错误,包括如下: Main Thread Checker  -  Xcode 9新引入 Address Sanitizer Thread Sanitizer Undefined Behavior Sanitizer Using Runtime Tools Effectively Main Thread

iOS开发——swift篇&amp;Swift新特性(一)语言基础

语言基础中的新特性 常量和变量的命名 Swift可以使用几乎任何字符来作为常量和变量名,包括Unicode: let π = 3.14159 let 你好 = "你好世界" let 星星 = "★" 注释可嵌套 Swift中的多行注释/**/可以嵌套,这样可以方便地在大段已注释的代码块中继续添加注释: /* this is the start of the first multiline comment /* this is the second, nested m

利用iOS8新特性计算cell的实际高度

在计算cell的实际高度是 我们一般是通过计算frame  拿到最底部一个控件的最大Y值从而的到cell 的高度  算来算去  比较麻烦 其实,iOS8已经提供了直接通过Cell高度自适应的方法了,根本不用计算Cell高度,就可以搞定不等高Cell  这个方法即对系统cell有效 也对通多xib创建的cell有效: 方法:设置tableView的估算Cell高度&rowHeight值为自动计算模式 self.tableView.estimatedRowHeight = 100; // 随便设个不

最新iOS 6 in Xcode4.5新特性编程之一——自动布局(1)

随着iOS 6正式版和OS X 10.8.2正式版发布之后,苹果还向开发者发布了其应用开发工具Xcode最新版,在最新的Xcode 4.5版本中增加了: 自动布局对OS X和iOS的支持; 同时也增强了对MacBook Pro的Retina显示屏支持; 及对Objective-C的一些优化.下面来研讨一下自动布局对OS X和iOS的支持!! 通常来说,如果屏幕是固定尺寸,那么设计它的用户界面不会很难,但如果屏幕的frame需要能够变化,那么其中各个UI元素的位置以及尺寸也必须为了适应新的尺寸做相