自适应TableViewCell(XIB)

作者: PencilCarefully | 来源:发表于2016-12-06 17:24 被阅读2123次

前言:前一文自适应TableViewCell(纯代码)介绍了如何使用纯代码方式实现tableViewCell自适应高度,那么本文就来介绍一下如何使用XIB+Autolayout的方式实现tableViewCell的自适应高度.先看一下效果图,和上篇文章介绍的效果图是一样的.

图1.gif
  • 1 . 创建model类,添加数据源,并且保存在数组中.这个数据源我是写在了,plist文件当中,并且使用cocoaPods导入MJExtension进行数据转模型.
#pragma mark - 懒加载
- (NSArray *)dataSource {
    if (!_dataSource) {
        self.dataSource = [AdaptiveModel mj_objectArrayWithFilename:@"ModelList.plist"];
    }
    return _dataSource;
}
  • 2 . 创建自定义的AdaptiveTableViewCell继承自UITableViewCell创建的时候勾选XIB, 接下来在XIB中添加子控件,并且给子控件添加约束.设置nameLabel的左边距和上边距是10, text_label距离nameLabel的上边距是10,距离contentView的左右边距都是10. 设置prctureImageViewtext_Label的上边距是10,距contentView的左边距和下边距是10,并且设置宽高都是100;
图2.png

需要注意: 要设置text_Labellines是0,否则不会自动换行.

图3.png
  • 3 . 接下来要在viewController中注册自定义单元格,这个时候有2个地方需要注意,一是需要设置tableViewrowHeightUITableViewAutomaticDimension, 这行代码的租用是设置tableView所有的cell是根据真实高度自动计算的(根据设置的约束), 另外就是需要设置tableView的预算高度.这两者缺一不可.这两行代码放在一起是就是使用了self-sizing技术,这个技术也是在iOS8以后才支持的.目前已经iOS10.1了,大可不必担心.
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
 
    self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
//    [self.tableView registerClass:[AdaptiveTableViewCell class] forCellReuseIdentifier:identifier];
    [self.tableView registerNib:[UINib nibWithNibName:@"AdaptiveTableViewCell" bundle:nil] forCellReuseIdentifier:@"AdaptiveCell"];
    
    // self-sizing(iOS8以后才支持)
    // 设置tableView所有的cell的真实高度是自动计算的(根据设置的约束)
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // 设置tableView的估算高度
    self.tableView.estimatedRowHeight = 200;
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.view addSubview:self.tableView];
    
}

需要注意:tableView的估算高度,可以给一个随意的值,只要是大于0的就可以.建议给这个值给的稍微大一点,这里面牵扯到tableView性能优化的一些东西.

  • 4 .配置单元格,给单元格上的控件赋值.
// 设置单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    AdaptiveTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"AdaptiveCell" forIndexPath:indexPath];
    // 传递数组模型
    cell.model = self.dataSource[indexPath.row];
    return cell;
}
  • 5 . 到这一步我们就要思考一下,我们刚开始设置单元格上的控件的时候,图片给的是一个固定的高度100,但是有些数据中没有图片,那我们就可以把图片的高度设置成0,把图片距离下边框的间距也设置成0.否则,没有图片的那些单元格中,就会出现一片空白的区域.我们需要把图片的高度约束和下边距约束拉成属性,在modelsetter方法中进行修改.
    图4.png
@interface AdaptiveTableViewCell ()

@property (weak, nonatomic) IBOutlet UILabel *nameLabel; // 姓名
@property (weak, nonatomic) IBOutlet UILabel *text_Label; // 正文
@property (weak, nonatomic) IBOutlet UIImageView *picthreView; // 图片

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureHeight; // 图片高度约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureBottom; // 图片底部约束

@end
// 重写setter方法
- (void)setModel:(AdaptiveModel *)model {
    if (_model != model) {
        _model = model;
    }
    
    self.nameLabel.text = model.name;
    self.text_Label.text = model.text;
    
    if (model.picture) { // 有图片
        self.picthreView.hidden = NO;
        self.picthreView.image = [UIImage imageNamed:model.picture];
        self.pictureHeight.constant = 100;
        self.pictureBottom.constant = 10;
    } else { // 没有图片
        self.picthreView.hidden = YES;
        self.pictureHeight.constant = 0;
        self.pictureBottom.constant = 0;
    }
}

需要注意:在没有图片时候需要把图片的约束更改为0,在有图片的时候也一定要把约束更改回来,否则因为tableViewCell的循环引用,界面滑动的时候,会造成显示混乱.

总结:到这里我们就把自适应TableViewCell的功能实现了.对比来说,使用AutoLayout方式要比使用纯代码的方式更加简单一些.不需要再去计算控件的高度这些繁琐的步骤,只有几个注意事项需要多注意.避免不必要的错误.

  • 1.要设置text_Labelline是0,否则不会自动换行.
  • 2.要设置tableView所有的cell的真实高度是自动计算的(根据设置的约束) self.tableView.rowHeight = UITableViewAutomaticDimension;
    // 设置tableView的估算高度 self.tableView.estimatedRowHeight = 200;
  • 3.在没有图片时候需要把图片的约束更改为0,在有图片的时候也一定要把约束更改回来,否则因为tableViewCell的循环引用,界面滑动的时候,会造成显示混乱.

另附本文gitHub地址

上一篇:自适应TableViewCell(纯代码)

相关文章

网友评论

  • 哎呦哎呦小葵花:刚开始cell高度不正确,滑动cell,高度才能算正确,怎么破
    哎呦哎呦小葵花:现在左右两边都有label,且宽度不确定
  • 28bb64fffadd:您好,看了您的 demo,问下,这个 cell 的高度是系统根据返回的文字自己去计算的?还有就是如果我要实现社交动态的功能分为三部分1:用户头像,发送时间(固定)2:正文文本(不固定,根据长度调整)3:一张图片(固定高度,一定会有的);这样的功能的话,完全也是可以用 xib 画的吧,而且还不用把图片的约束添加出来?不存在图片没有的情况
    PencilCarefully:@鲫鱼博博 当然可以,就和我demo里的有没有图片添加约束是一样的,把图片的高度的约束拉成属性。上下两层的图片高度都添加成属性,然后根据model中图片个数更改约束,如果图片个数是2,哪下面那个图片的高度约束,就更改成0。如果是4,就更改成100,当然间距的约束也是要添加的。
    28bb64fffadd:@Eenie_Meenie 谢了啊,还有个问题就是,如果我要有多张图片,即如果两张的时候,并列为一排显示,如果是四张图片,则为田字格显示,这种用 xib 话,是否可以行呢,怎么添加约束呢
    PencilCarefully:@鲫鱼博博 不好意思一直没看评论,如果你图片一定会显示,并且高度是固定的话是可以不把图片的约束拉成属性的,给成你需要固定的高度就可以了,也是完全可以用XIB做的,你可以参照demo试一下。

本文标题:自适应TableViewCell(XIB)

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