iOS--Masonry的简单使用

　　最近搭见面尝试了下Masonry,感觉挺不错的，比手写frame快多了，又避免了storyboard和xib的复杂约束。

这是效果图 ps:以前看到这样的就愁死了，各种计算坐标，用Masonry分分钟的事。



代码：用的不是很熟练，有不少走了弯路的地方欢迎指正~~~~(>_<)~~~~

#import "HomeView.h"
#import <Masonry.h>

@implementation HomeView
@synthesize myEquipmentBtn,aboutCompanyBtn,errorRecordingBtn,equipmentStateBtn,remoteControlBtn,equipmentGraphBtn,guideBtn;

- (id)initWithFrame:(CGRect)frame {

self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];
[self setUpSubViews];
}

return self;
}

- (void)setUpSubViews {

/**
*  创建子视图并添加
*/
//使用Masonry必须先把控件初始化，然后添加到共同的父视图上
//我的设备
myEquipmentBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    myEquipmentBtn.backgroundColor = [UIColor redColor];
[self addSubview:myEquipmentBtn];
[myEquipmentBtn setBackgroundImage:[UIImage imageNamed:@"1"] forState:0];
//关于我们
aboutCompanyBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    aboutCompanyBtn.backgroundColor = [UIColor redColor];
[aboutCompanyBtn setBackgroundImage:[UIImage imageNamed:@"3"] forState:0];
[self addSubview:aboutCompanyBtn];
//故障记录
errorRecordingBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    errorRecordingBtn.backgroundColor = [UIColor redColor];
[errorRecordingBtn setBackgroundImage:[UIImage imageNamed:@"6"] forState:0];
[self addSubview:errorRecordingBtn];
//设备状态
equipmentStateBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    equipmentStateBtn.backgroundColor = [UIColor redColor];
[equipmentStateBtn setBackgroundImage:[UIImage imageNamed:@"2"] forState:0];
[self addSubview:equipmentStateBtn];
//远程控制
remoteControlBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    remoteControlBtn.backgroundColor = [UIColor redColor];
[remoteControlBtn setBackgroundImage:[UIImage imageNamed:@"4"] forState:0];
[self addSubview:remoteControlBtn];

//设备曲线图
equipmentGraphBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    equipmentGraphBtn.backgroundColor = [UIColor redColor];
[equipmentGraphBtn setBackgroundImage:[UIImage imageNamed:@"5"] forState:0];
[self addSubview:equipmentGraphBtn];
//使用说明
guideBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//    guideBtn.backgroundColor = [UIColor redColor];
[guideBtn setBackgroundImage:[UIImage imageNamed:@"guide"] forState:0];
[self addSubview:guideBtn];

/**
*  约束
*
*  @param make <#make description#>
*
*  @return <#return value description#>
*/

//我的设备
[myEquipmentBtn mas_makeConstraints:^(MASConstraintMaker *make) {
　　　　　//上边距离父视图上边5各单位
make.top.equalTo(self.mas_top).with.offset(5);
　　　　　//左边距离父视图左边0个单位　
make.left.equalTo(self.mas_left).with.offset(0);
　　　　　//宽等于父视图宽的0.5倍  multipliedBy(0.5)设定比例
make.width.equalTo(self.mas_width).with.multipliedBy(0.5);
　　　　　//高等于父视图高的0.5倍
make.height.equalTo(self.mas_height).with.multipliedBy(0.2);
}];
//关于我们
[aboutCompanyBtn mas_makeConstraints:^(MASConstraintMaker *make) {
　　　　　//上边距离上部控件的底边5个单位
make.top.equalTo(myEquipmentBtn.mas_bottom).with.offset(5);
　　　　　//左边距离父视图左边0个单位
make.left.equalTo(contentView.mas_left).with.offset(0);
　　　　　//宽和上方的控件一样宽
make.width.equalTo(myEquipmentBtn.mas_width);
　　　　　//高是父视图高的0.4倍
make.height.equalTo(self.mas_height).with.multipliedBy(0.4);
}];
//故障记录
[errorRecordingBtn mas_makeConstraints:^(MASConstraintMaker *make) {
　　　　　//上边距离上部控件的底边5个单位
make.top.equalTo(aboutCompanyBtn.mas_bottom).with.offset(5);
　　　　　//左边距离父视图左边0个单位
make.left.equalTo(self.mas_left).with.offset(0);
　　　　　//等宽
make.width.equalTo(myEquipmentBtn.mas_width);
　　　　　//下边距离父视图下边-5个单位，，+5的话控件就跑出父视图之外了，-5说明在父视图里面
make.bottom.equalTo(self.mas_bottom).with.offset(-5);
}];
//设备状态
[equipmentStateBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.mas_top).with.offset(5);
make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5);
make.right.equalTo(self.mas_right).with.offset(0);
make.height.equalTo(self.mas_height).with.multipliedBy(0.15);
}];
//远程控制
[remoteControlBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(equipmentStateBtn.mas_bottom).with.offset(5);
make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5);
make.width.equalTo(equipmentStateBtn.mas_width);
make.height.equalTo(self.mas_height).with.multipliedBy(0.15);
}];
//设备曲线图
[equipmentGraphBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(remoteControlBtn.mas_bottom).with.offset(5);
make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5);
make.width.equalTo(remoteControlBtn.mas_width);
make.height.equalTo(self.mas_height).with.multipliedBy(0.23);
}];
//使用说明
[guideBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(equipmentGraphBtn.mas_bottom).with.offset(5);
make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5);
make.width.equalTo(remoteControlBtn.mas_width);
make.bottom.equalTo(self.mas_bottom).with.offset(-5);
}];

}

@end