之前我們已經(jīng)對(duì)Cell高度自適應(yīng)進(jìn)行了幾次研究:
UITableViewCell高度自適應(yīng)探索--UITableView+FDTemplateLayoutCell
地址: http://www.reibang.com/p/7839e3a273a6
UITableViewCell高度自適應(yīng)探索--cell預(yù)估高度(一)
地址: http://www.reibang.com/p/6ab92579fcf1
UITableViewCell高度自適應(yīng)探索--cell預(yù)估高度(二)
地址: http://www.reibang.com/p/f3609cd9392e
今天,再提供一種AutoLayout與Frame相結(jié)合的方式來設(shè)置cell高度的方法.
今天這個(gè)方法的要點(diǎn)是:
- 使用Autolayout在進(jìn)行布局.
- 使用Frame進(jìn)行高度計(jì)算
- 使用模型的屬性緩存每個(gè)Cell第一次計(jì)算的高度.
相對(duì)于之前說的那些方法,這個(gè)方法比UITableView+FDTemplateLayoutCell使用起來更簡(jiǎn)單和容易理解(自從寫FD那篇文章發(fā)表后收到很多網(wǎng)友的關(guān)于使用的問題,大部分是由于沒有使用正確);并且克服了預(yù)估高度方式的那些問題,也不用把約束改來改去, 使計(jì)算的過程更加可控.
這種方法雖然是使用fram的方式計(jì)算,但是如果沒有autoLayout,計(jì)算的過程就會(huì)復(fù)雜幾倍,有時(shí)候可能還需要一個(gè)專門的類去管理子控件的frame.在我看來是一個(gè)比較不錯(cuò)的方法.
進(jìn)入正題.
先看要實(shí)現(xiàn)的效果:
其中文字的長(zhǎng)度不一,圖片可能有或沒有.為了排除其他干擾,數(shù)據(jù)來自plist文件.
- 這是我們自定義cell的設(shè)置,這些元素是固定的,我們使用AutoLayout對(duì)它們幾個(gè)進(jìn)行布局.
- 創(chuàng)建一個(gè)Message模型,賦予其對(duì)應(yīng)的屬性.
由于cell的高度本質(zhì)上還是基于模型數(shù)據(jù)來算的,所以計(jì)算高度的任務(wù)交給模型,故模型同時(shí)開放一個(gè)cellHeight的只讀屬性,將來好拿給控制器使用.
@interface Message : NSObject
// 頭像、名字、和描述文字我給固定了,所以沒有弄屬性處理
@property (nonatomic, copy) NSString *imageName;
@property (nonatomic, copy) NSString *content;
@property (nonatomic, assign, readonly) CGFloat cellHeight;
@end
- 模型計(jì)算Cell高度,通過重寫cellHeight的getter方法實(shí)現(xiàn)
- (CGFloat)cellHeight {
if (!_cellHeight) {
CGFloat contentW = [UIScreen mainScreen].bounds.size.width - 2 * margin; // 屏幕寬度減去左右間距
CGFloat contentH = [self.content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:contentFont]}
context:nil].size.height;
_cellHeight = contentLabelY + contentH + margin;
}
return _cellHeight;
}
注意:
上面高度的計(jì)算還沒有將內(nèi)容圖片的高度計(jì)算在內(nèi).
并且實(shí)現(xiàn)了利用模型的cellHeight屬性緩存第一次計(jì)算高度.
- 由于內(nèi)容圖片不是每個(gè)cell都有,所以使用代碼動(dòng)態(tài)添加.
// 屬性聲明
@property (strong, nonatomic) UIImageView *contentImageView;
// getter實(shí)現(xiàn)
- (UIImageView *)contentImageView {
if (!_contentImageView) {
_contentImageView = [[UIImageView alloc] init];
[self.contentView addSubview:_contentImageView];
}
return _contentImageView;
}
- cell該接收模型了
@property (nonatomic, strong) Message *message;
- (void)setMessage:(Message *)message {
_message = message;
self.contentLabel.text = _message.content;
if (message.imageName.length) {
self.contentImageView.hidden = NO;
self.contentImageView.image = [UIImage imageNamed:message.imageName];
}
else {
self.contentImageView.hidden = YES;
}
}
當(dāng)然,這時(shí)候contentImageView當(dāng)然是顯示不出來的,因?yàn)槲覀冞€沒有贈(zèng)送它一個(gè)frame.那么它的frame從何而來呢?
一開始我們說過,計(jì)算要基于模型,所以接下來的思路是由模型算出imageView的frame,拿去給cell用.
回到模型cellHeight的getter方法,添加對(duì)imageName屬性的處理:
// 圖片將要展示的frame作為模型的其中一個(gè)屬性
@property (nonatomic, assign) CGRect contentImageFrame;
- (CGFloat)cellHeight {
if (!_cellHeight) {
CGFloat contentW = [UIScreen mainScreen].bounds.size.width - 2 * margin; // 屏幕寬度減去左右間距
CGFloat contentH = [self.content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:contentFont]}
context:nil].size.height;
_cellHeight = contentLabelY + contentH + margin;
// 對(duì)imageName屬性的處理
if (self.imageName.length) {
UIImage *image = [UIImage imageNamed:self.imageName];
CGFloat imageH = image.size.height;
CGFloat imageW = image.size.width;
// 直接得出contentImageView應(yīng)該顯示的frame
_contentImageFrame = CGRectMake(margin, _cellHeight, imageW, imageH);
_cellHeight += imageH + margin;
}
}
return _cellHeight;
}
當(dāng)上面代碼執(zhí)行完畢,contentImageFrame就有值了.接著,回到cell的setMessage:方法給contentImageView賦值.
- (void)setMessage:(Message *)message {
_message = message;
self.contentLabel.text = _message.content;
if (message.imageName.length) {
self.contentImageView.hidden = NO;
self.contentImageView.image = [UIImage imageNamed:message.imageName];
// 給圖片的frame賦值,這個(gè)值就是上面得到那個(gè)
self.contentImageView.frame = _message.contentImageFrame;
}
else {
self.contentImageView.hidden = YES;
}
}
- 這時(shí)候使用起來就非常輕松了
// 控制器tableView協(xié)議方法實(shí)現(xiàn)
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
Message *message = self.dataList[indexPath.row];
return message.cellHeight;
}
