使用Masonry-cell高度自适应

2017-06-17  本文已影响82人  CoderCurtis

关键代码只是几句:

_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时写过一个练手的一个小例子

上一篇下一篇

猜你喜欢

热点阅读