美文网首页
使用Masonry-cell高度自适应

使用Masonry-cell高度自适应

作者: CoderCurtis | 来源:发表于2017-06-17 15:48 被阅读82次

    关键代码只是几句:

    _tableView.estimatedRowHeight = 100;
    _tableView.rowHeight = UITableViewAutomaticDimension;
    

    给UITableView设置预估高度,这里可以随意给个值(原则上不为0就可以)。第二句代码可以不给,好像说是iOS8之后默认就是了。

    做了一个小例子


    新建了一个json文件来模拟网络请求,json文件的格式是这样的:

    message.json

    [
    {
     "headImageName" : "btn_selected_yixuan",
     "isRead" : 1,
     "name" : "张三",
     "information" : "这里是张三的描述信息",
     "time" : "2017年06月17日14:00"
     },
    
    ...
    
    ]
    

    模型:
    MessageModel

    #import <Foundation/Foundation.h>
    
    @interface MessageModel : NSObject
    
    @property (nonatomic, copy) NSString *headImageName;//头像
    @property (nonatomic, assign) BOOL isRead;//是否已读 0.未读 1.已读
    @property (nonatomic, copy) NSString *name;//姓名
    @property (nonatomic, copy) NSString *information;//描述信息
    @property (nonatomic, copy) NSString *time;//时间
    
    @end
    
    #import "MessageModel.h"
    
    @implementation MessageModel
    
    @end
    

    自定义cell:
    MessageCell

    #import <UIKit/UIKit.h>
    
    @class MessageModel;
    @interface MessageCell : UITableViewCell
    
    @property (nonatomic, strong) MessageModel *model;
    
    @end
    
    
    #import "MessageCell.h"
    #import "Masonry.h"
    #import "MessageModel.h"
    
    @interface MessageCell ()
    
    @property (nonatomic, strong) UIImageView *headImgView;
    @property (nonatomic, strong) UIView *redDotView;
    @property (nonatomic, strong) UILabel *nameLabel;
    @property (nonatomic, strong) UILabel *informationLabel;
    @property (nonatomic, strong) UILabel *timeLabel;
    @property (nonatomic, strong) UIView *lineView;
    
    @end
    
    @implementation MessageCell
    
    #pragma mark -懒加载
    - (UIImageView *)headImgView
    {
        if (!_headImgView) {
            _headImgView = [[UIImageView alloc] init];
            _headImgView.layer.cornerRadius = 22;
            _headImgView.layer.masksToBounds = YES;
        }
        return _headImgView;
    }
    
    - (UIView *)redDotView
    {
        if (!_redDotView) {
            _redDotView = [[UIView alloc] init];
            _redDotView.backgroundColor = [UIColor redColor];
            _redDotView.layer.cornerRadius = 4;
        }
        return _redDotView;
    }
    
    - (UILabel *)nameLabel
    {
        if (!_nameLabel) {
            _nameLabel = [[UILabel alloc] init];
            _nameLabel.textColor = [UIColor greenColor];
            _nameLabel.font = [UIFont systemFontOfSize:12];
            _nameLabel.textAlignment = NSTextAlignmentCenter;
            _nameLabel.numberOfLines = 0;
        }
        return _nameLabel;
    }
    
    - (UILabel *)informationLabel
    {
        if (!_informationLabel) {
            _informationLabel = [UILabel new];
            _informationLabel.textColor = [UIColor purpleColor];
            _informationLabel.font = [UIFont systemFontOfSize:15];
            _informationLabel.numberOfLines = 0;
        }
        return _informationLabel;
    }
    
    - (UILabel *)timeLabel
    {
        if (!_timeLabel) {
            _timeLabel = [UILabel new];
            _timeLabel.textColor = [UIColor orangeColor];
            _timeLabel.font = [UIFont systemFontOfSize:11];
        }
        return _timeLabel;
    }
    
    - (UIView *)lineView
    {
        if (!_lineView) {
            _lineView = [[UIView alloc] init];
            _lineView.backgroundColor = [UIColor lightGrayColor];
        }
        return _lineView;
    }
    
    #pragma mark -初始化
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    {
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        if (self) {
            [self createUI];
        }
        return self;
    }
    
    - (void)createUI
    {
        [self.contentView addSubview:self.headImgView];
        [self.contentView addSubview:self.redDotView];
        [self.contentView addSubview:self.nameLabel];
        [self.contentView addSubview:self.informationLabel];
        [self.contentView addSubview:self.timeLabel];
        [self.contentView addSubview:self.lineView];
        
        [self updateConstraintsForView];
    }
    
    #pragma mark -布局
    - (void)updateConstraintsForView
    {
        [_headImgView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.and.top.equalTo(@15);
            make.size.mas_equalTo(CGSizeMake(44, 44));
        }];
        
        [_redDotView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(@11);
            make.top.equalTo(_headImgView);
            make.size.mas_equalTo(CGSizeMake(8, 8));
        }];
        
        [_nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(_headImgView);
            make.top.equalTo(_headImgView.mas_bottom).mas_offset(10);
            make.width.equalTo(@50);
        }];
        
        [_informationLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(_headImgView.mas_trailing).mas_offset(15);
            make.top.equalTo(_headImgView);
            make.trailing.equalTo(@-15);
        }];
        
        [_timeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(_informationLabel);
            make.top.equalTo(_informationLabel.mas_bottom).mas_offset(10);
        }];
        
        [_lineView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.and.trailing.equalTo(@0);
            make.top.greaterThanOrEqualTo(_nameLabel.mas_bottom).mas_offset(10);
            make.top.greaterThanOrEqualTo(_timeLabel.mas_bottom).mas_offset(20);
            make.height.equalTo(@0.5);
            make.bottom.equalTo(@0);
        }];
    }
    
    #pragma mark -set
    - (void)setModel:(MessageModel *)model
    {
        _model = model;
        _headImgView.image = [UIImage imageNamed:model.headImageName];
        
        if (model.isRead) {
            _redDotView.hidden = YES;
        }else {
            _redDotView.hidden = NO;
        }
        
        _nameLabel.text = model.name;
        
        _informationLabel.text = model.information;
        
        _timeLabel.text = model.time;
    }
    
    - (void)awakeFromNib {
        [super awakeFromNib];
        // Initialization code
    }
    
    - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
        [super setSelected:selected animated:animated];
    
        // Configure the view for the selected state
    }
    
    @end
    

    加载本地json数据:

            NSString *filePath = [[NSBundle mainBundle] pathForResource:@"message" ofType:@"json"];
            NSData *data = [NSData dataWithContentsOfFile:filePath];
            NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];
    

    数据转模型(使用的YYModel):

    NSArray *modelArr = [NSArray yy_modelArrayWithClass:[MessageModel class] json:array];
    

    需要注意的是: cell底部的约束和[时间][姓名]两个控件有关联关系的,当cell右侧描述信息较少时,姓名控件起作用;当描述信息较多时就需要时间控件距离底部的约束起作用。

    make.top.greaterThanOrEqualTo(_nameLabel.mas_bottom).mas_offset(10);
            make.top.greaterThanOrEqualTo(_timeLabel.mas_bottom).mas_offset(20);
    

    距离底部最近的空间要设置距离底部的约束,总之,Y轴上的约束需要设置好。

    这里分割线的约束:

    make.bottom.equalTo(@0);
    

    另: 刚接触Masonry时写过一个练手的一个小例子

    相关文章

      网友评论

          本文标题:使用Masonry-cell高度自适应

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