UITableViewCell高度自适应探索--AutoLayout结合Frame

UITableViewCell高度自适应探索--UITableView+FDTemplateLayoutCell
地址: http://www.jianshu.com/p/7839e3a273a6
UITableViewCell高度自适应探索--cell预估高度(一)
地址: http://www.jianshu.com/p/6ab92579fcf1
UITableViewCell高度自适应探索--cell预估高度(二)
地址: http://www.jianshu.com/p/f3609cd9392e
今天,再提供一种AutoLayout与Frame相结合的方式来设置cell高度的方法.

今天这个方法的要点是:

  • 使用Autolayout在进行布局.
  • 使用Frame进行高度计算
  • 使用模型的属性缓存每个Cell第一次计算的高度.

相对于之前说的那些方法,这个方法比UITableView+FDTemplateLayoutCell使用起来更简单和容易理解(自从写FD那篇文章发表后收到很多网友的关于使用的问题,大部分是由于没有使用正确);并且克服了预估高度方式的那些问题,也不用把约束改来改去, 使计算的过程更加可控.

这种方法虽然是使用fram的方式计算,但是如果没有autoLayout,计算的过程就会复杂几倍,有时候可能还需要一个专门的类去管理子控件的frame.在我看来是一个比较不错的方法.

进入正题.

先看要实现的效果:


目标效果

其中文字的长度不一,图片可能有或没有.为了排除其他干扰,数据来自plist文件.

  • 这是我们自定义cell的设置,这些元素是固定的,我们使用AutoLayout对它们几个进行布局.

cell布局
  • 创建一个Message模型,赋予其对应的属性.
    由于cell的高度本质上还是基于模型数据来算的,所以计算高度的任务交给模型,故模型同时开放一个cellHeight的只读属性,将来好拿给控制器使用.
1 @interface Message : NSObject
2 
3 // 头像、名字、和描述文字我给固定了,所以没有弄属性处理
4 @property (nonatomic, copy) NSString *imageName;
5 @property (nonatomic, copy) NSString *content;
6 @property (nonatomic, assign, readonly) CGFloat cellHeight;
7 
8 @end
View Code

 

  • 模型计算Cell高度,通过重写cellHeight的getter方法实现
 1 - (CGFloat)cellHeight {
 2     if (!_cellHeight) {
 3         CGFloat contentW = [UIScreen mainScreen].bounds.size.width - 2 * margin; // 屏幕宽度减去左右间距
 4         CGFloat contentH = [self.content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
 5                                                       options:NSStringDrawingUsesLineFragmentOrigin
 6                                                    attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:contentFont]}
 7                                                       context:nil].size.height;
 8         _cellHeight = contentLabelY + contentH + margin;
 9     }
10     return _cellHeight;
11 }
View Code

 

注意:
上面高度的计算还没有将内容图片的高度计算在内.
并且实现了利用模型的cellHeight属性缓存第一次计算高度.
  • 由于内容图片不是每个cell都有,所以使用代码动态添加.
 1 // 属性声明
 2 @property (strong, nonatomic) UIImageView *contentImageView;
 3 // getter实现
 4 - (UIImageView *)contentImageView {
 5     if (!_contentImageView) {
 6         _contentImageView = [[UIImageView alloc] init];
 7         [self.contentView addSubview:_contentImageView];
 8     }
 9     return _contentImageView;
10 }
View Code

 

  • cell该接收模型了
 1 @property (nonatomic, strong) Message *message;
 2 - (void)setMessage:(Message *)message {
 3     _message = message;
 4     self.contentLabel.text = _message.content;
 5     if (message.imageName.length) {
 6         self.contentImageView.hidden = NO;
 7         self.contentImageView.image = [UIImage imageNamed:message.imageName];
 8     }
 9     else {
10         self.contentImageView.hidden = YES;
11     }
12 }
View Code

 

当然,这时候contentImageView当然是显示不出来的,因为我们还没有赠送它一个frame.那么它的frame从何而来呢?

一开始我们说过,计算要基于模型,所以接下来的思路是由模型算出imageView的frame,拿去给cell用.

回到模型cellHeight的getter方法,添加对imageName属性的处理:

 1 // 图片将要展示的frame作为模型的其中一个属性
 2 @property (nonatomic, assign) CGRect contentImageFrame;
 3 - (CGFloat)cellHeight {
 4     if (!_cellHeight) {
 5         CGFloat contentW = [UIScreen mainScreen].bounds.size.width - 2 * margin; // 屏幕宽度减去左右间距
 6         CGFloat contentH = [self.content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
 7                                                       options:NSStringDrawingUsesLineFragmentOrigin
 8                                                    attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:contentFont]}
 9                                                       context:nil].size.height;
10         _cellHeight = contentLabelY + contentH + margin;
11 
12         // 对imageName属性的处理
13         if (self.imageName.length) {
14             UIImage *image = [UIImage imageNamed:self.imageName];
15             CGFloat imageH = image.size.height;
16             CGFloat imageW = image.size.width;
17             // 直接得出contentImageView应该显示的frame
18             _contentImageFrame = CGRectMake(margin, _cellHeight, imageW, imageH);
19             _cellHeight += imageH + margin;
20         }
21     }
22     return _cellHeight;
23 }
View Code

当上面代码执行完毕,contentImageFrame就有值了.接着,回到cell的setMessage:方法给contentImageView赋值.
 1 - (void)setMessage:(Message *)message {
 2     _message = message;
 3     self.contentLabel.text = _message.content;
 4     if (message.imageName.length) {
 5         self.contentImageView.hidden = NO;
 6         self.contentImageView.image = [UIImage imageNamed:message.imageName];
 7         // 给图片的frame赋值,这个值就是上面得到那个
 8         self.contentImageView.frame = _message.contentImageFrame;
 9     }
10     else {
11         self.contentImageView.hidden = YES;
12     }
13 }
View Code

 

  • 这时候使用起来就非常轻松了
1 // 控制器tableView协议方法实现
2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
3     Message *message = self.dataList[indexPath.row];
4     return message.cellHeight;
5 }
View Code

 


完整代码下载:https://github.com/CoderAO/AutoCellHeightMix



 
posted @ 2016-04-07 15:54  FMDN  阅读(337)  评论(0)  编辑  收藏  举报