前面两篇文章简单介绍了一下Masonry的属性及方法，那么我们这一篇做一个小Demo加深一下练习。
我们就仿照做一个网易新闻客户端 “我的” 界面。
网易效果：
IMG_4673.jpg
表头布局代码：
//设置按钮
[_setButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(weakSelf.mas_right).offset(-15);
make.top.equalTo(weakSelf.mas_top).offset(25);
make.size.mas_equalTo(CGSizeMake(30, 20));
}];
//头像图标
[_headButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(weakSelf.mas_top).offset(40);
make.centerX.equalTo(weakSelf.mas_centerX);
make.size.mas_equalTo(CGSizeMake(60, 60));
}];
//用户名称
[_nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_headButton.mas_bottom).offset(8);
make.centerX.equalTo(weakSelf.mas_centerX);
make.size.mas_equalTo(CGSizeMake(300, 16));
}];
//活动标题
[_activityLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_nameLabel.mas_bottom).offset(5);
make.centerX.equalTo(weakSelf.mas_centerX);
make.size.mas_equalTo(CGSizeMake(300, 16));
}];
cell布局代码：
- (void)layoutSubviews{
[super layoutSubviews];
__weak typeof(self) weakSelf = self;
//图标
[self.imgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(weakSelf.mas_centerY);
make.left.equalTo(weakSelf).with.offset(5);
make.size.mas_equalTo(CGSizeMake(15, 15));
}];
//正标题
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(weakSelf.mas_centerY);
make.left.equalTo(weakSelf.imgView.mas_right).offset(10);
make.size.mas_equalTo(CGSizeMake(100, 20));
}];
//副标题
[self.subLalbel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(weakSelf.mas_centerY);
make.right.equalTo(weakSelf.iconImageView).offset(-5);
make.size.mas_equalTo(CGSizeMake(180, 20));
}];
//向右图标
[self.iconImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo (weakSelf.mas_centerY);
make.right.equalTo(weakSelf.mas_right).offset(-5);
make.size.mas_equalTo(CGSizeMake(10, 10));
}];
//底部横线
[self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf).offset(0);
make.right.equalTo(weakSelf).offset(0);
make.bottom.equalTo(weakSelf.mas_bottom).offset(0);
make.height.equalTo(@1);
}];
}
最终效果：
IMG_4677.jpg
童鞋们可以多练习练习，需要看demo的可以联系我，我会把文章中的每一个demo保存起来。
