iOS开发——UI进阶篇（三）自定义不等高cell，如何拿到cell的行高，自动计算cell高度，（有配图，无配图）微博案例

一、纯代码自定义不等高cell

---

废话不多说，直接来看下面这个例子
先来看下微博的最终效果

首先创建一个继承UITableViewController的控制器
@interface ViewController : UITableViewController
创建一个cell模型
@interface XMGStatusCell : UITableViewCell
再创建微博的数据模型
@interface XMGStatus : NSObject

纯代码自定义不等高cell

和前面等高cell的思路是一样的
1、创建子控件
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier；
2、布局子控件
等高与不等高的区别：不等高要动态的计算（lable或者image）的高度

// 计算不换行文字所占据的尺寸
NSDictionary *nameAttrs = @{NSFontAttributeName : XMGNameFont};
CGSize nameSize = [self.status.name sizeWithAttributes:nameAttrs];


// 计算换行文字所占据的尺寸
// CGFloat textH = [self.status.text sizeWithFont:XMGTextFont constrainedToSize:textMaxSize].height;
上面这个方法在ios7.0（ios2.0-7.0）已经过时了 进入头文件系统会提示你用最新的方法 “Use -boundingRectWithSize:options:attributes:context:”

NSDictionary *textAttrs = @{NSFontAttributeName : XMGTextFont};
CGFloat textH = [self.status.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;

3、设置数据
重写模型数据的get方法

 

二、计算行高

---

这时运行程序会发现所有cell的高度都一样

而且等于storyboard内cell的高度

因为从头到尾我们都没有用代码设置过高度，那么在哪里设置呢？
方案：在heightForRowAtIndexPath:方法调用之前将所有cell的高度计算清楚

/**
 *  返回每一行cell的具体高度
 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    XMGStatus *status = self.statuses[indexPath.row];
    
    CGFloat margin = 10;
    CGFloat cellHeight = 0;
    
    // 头像
    CGFloat iconX = margin;
    CGFloat iconY = margin;
    CGFloat iconWH = 30;
    CGRect iconImageViewFrame = CGRectMake(iconX, iconY, iconWH, iconWH);
    
    // 文字
    CGFloat textX = iconX;
    CGFloat textY = CGRectGetMaxY(iconImageViewFrame) + margin;
    CGFloat textW = [UIScreen mainScreen].bounds.size.width - 2 * textX;
    CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
    NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
    CGFloat textH = [status.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;
    CGRect text_labelFrame = CGRectMake(textX, textY, textW, textH);
    
    // 配图
    if (status.picture) {
        CGFloat pictureWH = 100;
        CGFloat pictureX = textX;
        CGFloat pictureY = CGRectGetMaxY(text_labelFrame) + margin;
        CGRect pictureImageViewFrame = CGRectMake(pictureX, pictureY, pictureWH, pictureWH);
        
        cellHeight = CGRectGetMaxY(pictureImageViewFrame);
    } else {
        cellHeight = CGRectGetMaxY(text_labelFrame);
    }
    
    cellHeight += margin;
    
    return cellHeight;
}

这样就能达到案例的效果了

虽然能解决上面的问题，但这样的代码看起来很垃圾，因为控制器知道的太多了，计算高度最好在你拿到数据的时候就已经计算好了，只要拿着用就行了
我们可以把计算高度封装到数据模型XMGStatus里

/**
 *  返回每一行cell的具体高度
 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    XMGStatus *status = self.statuses[indexPath.row];
    return status.cellHeight;
}

/*************XMGStatus*****************/
#import <UIKit/UIKit.h>

@interface XMGStatus : NSObject
/**** 文字\图片数据 ****/
/** 姓名 */
@property (nonatomic, copy) NSString *name;
/** 文本 */
@property (nonatomic, copy) NSString *text;
/** 头像 */
@property (nonatomic, copy) NSString *icon;
/** 配图 */
@property (nonatomic, copy) NSString *picture;
/** 是否为会员 */
@property (nonatomic, assign) BOOL vip;

/**** frame数据 ****/
/** 头像的frame */
@property (nonatomic, assign) CGRect iconFrame;
/** 昵称的frame */
@property (nonatomic, assign) CGRect nameFrame;
/** 会员的frame */
@property (nonatomic, assign) CGRect vipFrame;
/** 文字的frame */
@property (nonatomic, assign) CGRect textFrame;
/** 配图的frame */
@property (nonatomic, assign) CGRect pictureFrame;
/** cell的高度 */
@property (nonatomic, assign) CGFloat cellHeight;

@end

#import "XMGStatus.h"

@implementation XMGStatus
- (CGFloat)cellHeight
{
    if (_cellHeight == 0) {
        CGFloat margin = 10;
        
        // 头像
        CGFloat iconX = margin;
        CGFloat iconY = margin;
        CGFloat iconWH = 30;
        self.iconFrame = CGRectMake(iconX, iconY, iconWH, iconWH);
        
        // 昵称(姓名)
        CGFloat nameY = iconY;
        CGFloat nameX = CGRectGetMaxX(self.iconFrame) + margin;
        // 计算文字所占据的尺寸
        NSDictionary *nameAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:17]};
        CGSize nameSize = [self.name sizeWithAttributes:nameAttrs];
        self.nameFrame = (CGRect){{nameX, nameY}, nameSize};
        
        // 会员图标
        if (self.vip) {
            CGFloat vipW = 14;
            CGFloat vipH = nameSize.height;
            CGFloat vipY = nameY;
            CGFloat vipX = CGRectGetMaxX(self.nameFrame) + margin;
            self.vipFrame = CGRectMake(vipX, vipY, vipW, vipH);
        }
        
        // 文字
        CGFloat textX = iconX;
        CGFloat textY = CGRectGetMaxY(self.iconFrame) + margin;
        CGFloat textW = [UIScreen mainScreen].bounds.size.width - 2 * textX;
        CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
        NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
        CGFloat textH = [self.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;
        self.textFrame = CGRectMake(textX, textY, textW, textH);
        
        // 配图
        if (self.picture) {
            CGFloat pictureWH = 100;
            CGFloat pictureX = textX;
            CGFloat pictureY = CGRectGetMaxY(self.textFrame) + margin;
            self.pictureFrame = CGRectMake(pictureX, pictureY, pictureWH, pictureWH);
            
            _cellHeight = CGRectGetMaxY(self.pictureFrame);
        } else {
            _cellHeight = CGRectGetMaxY(self.textFrame);
        }
        _cellHeight += margin;
    }
    return _cellHeight;
}
@end


那么我们在XMGStatusCell.m布局子控件就可以这样写
/**
 *  布局子控件
 */
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    self.iconImageView.frame = self.status.iconFrame;
    self.nameLabel.frame = self.status.nameFrame;
    self.vipImageView.frame = self.status.vipFrame;
    self.text_label.frame = self.status.textFrame;
    self.pictureImageView.frame = self.status.pictureFrame;
}
当然也可以直接在设置控件数据时布局（因为在给cell赋值时使用了setStatus:(XMGStatus *)status方法）
/**
 *  设置子控件显示的数据
 */
- (void)setStatus:(XMGStatus *)status
{
    _status = status;
    
    self.iconImageView.image = [UIImage imageNamed:status.icon];
    self.nameLabel.text = status.name;
    self.text_label.text = status.text;
    
    if (status.isVip) {
        self.vipImageView.hidden = NO;
        self.nameLabel.textColor = [UIColor orangeColor];
    } else {
        self.vipImageView.hidden = YES;
        self.nameLabel.textColor = [UIColor blackColor];
    }
    
    if (status.picture) {
        self.pictureImageView.hidden = NO;
        self.pictureImageView.image = [UIImage imageNamed:status.picture];
    } else {
        self.pictureImageView.hidden = YES;
    }
    
    self.iconImageView.frame = status.iconFrame;
    self.nameLabel.frame = status.nameFrame;
    self.vipImageView.frame = status.vipFrame;
    self.text_label.frame = status.textFrame;
    self.pictureImageView.frame = status.pictureFrame;
}

运行程序效果就和案例一样

 

三、自定义不等高cell-storyboard(无配图)

---

除了代码自定义不等高cell，我们还可以直接用storyboard来自定义cell，相对来说就 简单很多，我们先来看下没有配图的情况
1、首先创建一个cell模型，设置好约束

2、创建一个一个cell模型类，继承UITableViewCell，并且对应着cell模型连线，设置数据

/*******************XMGStatusCell.m*********************/
#import "XMGStatusCell.h"
#import "XMGStatus.h"

@interface XMGStatusCell()
/** 头像 */
@property (nonatomic, weak) IBOutlet UIImageView *iconImageView;
/** 名称 */
@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
/** 会员图标 */
@property (nonatomic, weak) IBOutlet UIImageView *vipImageView;
/** 文字 */
@property (nonatomic, weak) IBOutlet UILabel *text_label;
@end

@implementation XMGStatusCell

/**
 *  设置子控件显示的数据
 */
- (void)setStatus:(XMGStatus *)status
{
    _status = status;
    
    self.iconImageView.image = [UIImage imageNamed:status.icon];
    self.nameLabel.text = status.name;
    self.text_label.text = status.text;
    
    if (status.vip) {
        self.vipImageView.hidden = NO;
        self.nameLabel.textColor = [UIColor orangeColor];
    } else {
        self.vipImageView.hidden = YES;
        self.nameLabel.textColor = [UIColor blackColor];
    }
}
@end

 

3、创建数据模型类XMGStatus，在控制器实现数据源方法；
值得一提的是在返回cell之前必须先告诉tableView所有cell的估算高度，那么可以在viewDidLoad中写上下面这句：
self.tableView.estimatedRowHeight = 44; // 估算每一行的高度
而且：必须告诉tableView所有cell的真实高度是自动计算（根据设置的约束来计算）
self.tableView.rowHeight = UITableViewAutomaticDimension;

iOS8开始：self-sizing

如果没写这两句，运行出来的高度都是不对的

#import "ViewController.h"
#import "XMGStatus.h"
#import "MJExtension.h"
#import "XMGStatusCell.h"

@interface ViewController ()
/** 微博数据 */
@property (nonatomic, strong) NSArray *statuses;
@end

@implementation ViewController

NSString *ID = @"status";

- (NSArray *)statuses
{
    if (!_statuses) {
        _statuses = [XMGStatus objectArrayWithFilename:@"statuses.plist"];
    }
    return _statuses;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 告诉tableView所有cell的真实高度是自动计算（根据设置的约束来计算）
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // 告诉tableView所有cell的估算高度
    self.tableView.estimatedRowHeight = 44;
}

#pragma mark - <数据源>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.statuses.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    XMGStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    cell.status = self.statuses[indexPath.row];
    
    return cell;
}
@end

 

 

四、自定义不等高cell-storyboard(有配图)

---

有图片和无图片其实一样，重点在于如何自动计算行高
1、首先，cell模型里再添加imageView（配图）
2、然后，在 XMGStatusCell.m 内添加三个属性
/** 配图 */
@property (nonatomic, weak) IBOutlet UIImageView *pictureImageView;
/** 配图的高度约束 */
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureHeight;
/** 配图底部间距约束 */
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureBottom;
3、设置数据

XMGStatusCell.h

#import <UIKit/UIKit.h>
@class XMGStatus;

@interface XMGStatusCell : UITableViewCell
/** 模型数据 */
@property (nonatomic, strong) XMGStatus *status;
@end

XMGStatusCell.m

/**
 *  设置子控件显示的数据
 */
- (void)setStatus:(XMGStatus *)status
{
    _status = status;
    
    self.iconImageView.image = [UIImage imageNamed:status.icon];
    self.nameLabel.text = status.name;
    self.text_label.text = status.text;
    
    if (status.vip) {
        self.vipImageView.hidden = NO;
        self.nameLabel.textColor = [UIColor orangeColor];
    } else {
        self.vipImageView.hidden = YES;
        self.nameLabel.textColor = [UIColor blackColor];
    }
    
    // 设置配图数据
    if (status.picture) { // 有配图
        self.pictureHeight.constant = 100;
        self.pictureBottom.constant = 10;
        self.pictureImageView.image = [UIImage imageNamed:status.picture];
    } else { // 没有配图
        // 设置图片高度为0
        self.pictureHeight.constant = 0;
        // 设置图片底部间距为0
        self.pictureBottom.constant = 0;
    }
}

XMGStatus.h

#import <UIKit/UIKit.h>

@interface XMGStatus : NSObject
/**** 文字\图片数据 ****/
/** 姓名 */
@property (nonatomic, copy) NSString *name;
/** 文本 */
@property (nonatomic, copy) NSString *text;
/** 头像 */
@property (nonatomic, copy) NSString *icon;
/** 配图 */
@property (nonatomic, copy) NSString *picture;
/** 是否为会员 */
@property (nonatomic, assign) BOOL vip;
@end

XMGStatus.m

#import "XMGStatus.h"

@implementation XMGStatus

@end

#import "ViewController.h"
#import "XMGStatus.h"
#import "MJExtension.h"
#import "XMGStatusCell.h"

@interface ViewController ()
/** 微博数据 */
@property (nonatomic, strong) NSArray *statuses;
@end

@implementation ViewController

NSString *ID = @"status";

- (NSArray *)statuses
{
    if (!_statuses) {
        _statuses = [XMGStatus objectArrayWithFilename:@"statuses.plist"];
    }
    return _statuses;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // iOS8开始：self-sizing
    
    // 告诉tableView所有cell的真实高度是自动计算（根据设置的约束来计算）
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // 告诉tableView所有cell的估算高度
    self.tableView.estimatedRowHeight = 44;
}

#pragma mark - <数据源>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.statuses.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    XMGStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    cell.status = self.statuses[indexPath.row];
    
    return cell;
}


@end

运行结果

 

 

五、最终代码

---

在以前ios开发中，经常会发现程序在运行前屏幕会黑屏一会，这是为什么呢？我们这里也存在类似问题，因为在程序运行前会要显示一部分cell，苹果会提前将每一个cell的高度都算好，而且内部一些运行也需要调用这个方法，总之，当我们cell特别多时，这个方法的调用会特别频繁，就会出现黑屏一会的情况
1、解决方案：
告诉tableView所有cell的估算高度(设置了估算高度，就可以减少tableView:heightForRowAtIndexPath:方法的调用次数)
self.tableView.estimatedRowHeight = 200;

 

 

有些公司的项目还是以前的老项目，没有用到IOS8，那么计算高度可以用下面这种方法解决

2、返回高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath；
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath；
上面这两个方法调用顺序依次是先计算高度再返回cell，也就是说应该在返回cell前将高度算好

#import "ViewController.h"
#import "XMGStatus.h"
#import "MJExtension.h"
#import "XMGStatusCell.h"

@interface ViewController ()
/** 微博数据 */
@property (nonatomic, strong) NSArray *statuses;
@end

@implementation ViewController

NSString *ID = @"status";

- (NSArray *)statuses
{
    if (!_statuses) {
        _statuses = [XMGStatus objectArrayWithFilename:@"statuses.plist"];
    }
    return _statuses;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // 告诉tableView所有cell的估算高度(设置了估算高度，就可以减少tableView:heightForRowAtIndexPath:方法的调用次数)
    self.tableView.estimatedRowHeight = 200;
}

#pragma mark - <数据源>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.statuses.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    XMGStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    cell.status = self.statuses[indexPath.row];
    
    return cell;
}

#pragma mark - <代理方法>
XMGStatusCell *cell;
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    // 创建一个cell（cell的作用：根据模型数据布局所有的子控件，进而计算出cell的高度）
    if (!cell) {
        cell = [tableView dequeueReusableCellWithIdentifier:ID];
    }
    // 设置模型数据
    cell.status = self.statuses[indexPath.row];
    return cell.height;
}
@end
/****************** XMGStatusCell.m **********************/
#import "XMGStatusCell.h"
#import "XMGStatus.h"

@interface XMGStatusCell()
/** 头像 */
@property (nonatomic, weak) IBOutlet UIImageView *iconImageView;
/** 名称 */
@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
/** 会员图标 */
@property (nonatomic, weak) IBOutlet UIImageView *vipImageView;
/** 文字 */
@property (nonatomic, weak) IBOutlet UILabel *text_label;
/** 配图 */
@property (nonatomic, weak) IBOutlet UIImageView *pictureImageView;
@end

@implementation XMGStatusCell

- (void)awakeFromNib
{
    // 如果lable有自动换行的情况时
    // 手动设置文字的最大宽度（目的是：让label知道自己文字的最大宽度，进而能够计算出自己的frame）
    self.text_label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 20;
}

/**
 *  设置子控件显示的数据
 */
- (void)setStatus:(XMGStatus *)status
{
    _status = status;
    
    self.iconImageView.image = [UIImage imageNamed:status.icon];
    self.nameLabel.text = status.name;
    self.text_label.text = status.text;
    
    if (status.vip) {
        self.vipImageView.hidden = NO;
        self.nameLabel.textColor = [UIColor orangeColor];
    } else {
        self.vipImageView.hidden = YES;
        self.nameLabel.textColor = [UIColor blackColor];
    }
    
    // 设置配图数据
    if (status.picture) { // 有配图
        self.pictureImageView.hidden = NO;
        self.pictureImageView.image = [UIImage imageNamed:status.picture];
    } else { // 没有配图
        self.pictureImageView.hidden = YES;
    }
}

- (CGFloat)height
{
    // 强制布局cell内部的所有子控件(label根据文字多少计算出自己最真实的尺寸)
    [self layoutIfNeeded];
    
    // 计算cell的高度
    if (self.status.picture) {
        return CGRectGetMaxY(self.pictureImageView.frame) + 10;
    } else {
        return CGRectGetMaxY(self.text_label.frame) + 10;
    }
}
@end