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