文章标题

首先，在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout

从图中我们可以看出,只要设置相应得局限，控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需求。这里就不详细讲解具体拖拽的方法…..

然后,我们按着上图的属性来看看如何简单得使用Masonry

这里是Masonry给我们的属性

@property (nonatomic, strong, readonly) MASConstraint *left; //左侧

@property (nonatomic, strong, readonly) MASConstraint *top; //上侧

@property (nonatomic, strong, readonly) MASConstraint *right; //右侧

@property (nonatomic, strong, readonly) MASConstraint *bottom; //下侧

@property (nonatomic, strong, readonly) MASConstraint *leading; //首部

@property (nonatomic, strong, readonly) MASConstraint *trailing; //尾部

@property (nonatomic, strong, readonly) MASConstraint *width; //宽

@property (nonatomic, strong, readonly) MASConstraint *height; //高

@property (nonatomic, strong, readonly) MASConstraint *centerX; //横向居中

@property (nonatomic, strong, readonly) MASConstraint *centerY; //纵向居中

@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基线

属性有了,接着我们应该怎么在视图中添加约束呢，Masonry给我们提供了3个方法

//新增约束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

//更新约束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

//清楚之前的所有约束,只会保留最新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

合理的利用这个3个函数，基本上可以应对任何情况了
准备工作已经完成，我们来看几个小demo

1.居中一个view

// 防止block中的循环引用__weak typeof (self) weakSelf = self;// 初始化一个ViewUIView *bgView = [[UIView alloc]init];bgView.backgroundColor = [UIColor redColor];[self.view addSubview:bgView];// 使用mas_makeConstraints添加约束[bgView mas_makeConstraints:^(MASConstraintMaker *make) {    make.center.equalTo(weakSelf.view);    make.size.mas_equalTo(CGSizeMake(200, 200));}]；

效果图1
是不是很简单，这里有一点要必须注意下，添加约束前必须要把view添加到视图上。

那我要是不想固定他得宽高呢，让view的大小根据间距来控制怎么做

我们来设置一个基于父视图间距为10的view

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
}]；
这样就ok了！！！

make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));

等同于

make.top.equalTo(weakSelf.view).with.offset(10);make.left.equalTo(weakSelf.view).with.offset(10);make.bottom.equalTo(weakSelf.view).with.offset(-10);make.right.equalTo(weakSelf.view).with.offset(-10);

2.多个view

2个view横向居中，第二个view距离第一个view间距为10

UIView *view1 = [[UIButton alloc]init];view1.backgroundColor = [UIColor redColor];[self.view addSubview:view1];[view1 mas_makeConstraints:^(MASConstraintMaker *make) {    make.size.mas_equalTo(CGSizeMake(90, 90));    make.centerX.equalTo(weakSelf.view);    make.top.width.offset(90);}];UIView *view2 = [[UILabel alloc]init];view2.backgroundColor = [UIColor yellowColor];[self.view addSubview:view2];[view2 mas_makeConstraints:^(MASConstraintMaker *make) {    make.size.mas_equalTo(CGSizeMake(100, 100));    make.centerX.equalTo(view1);    make.top.equalTo(view1.mas_bottom).with.offset(20);}];

效果图2
大家有没有看到第二个view代码中

make.top.equalTo(view1.mas_bottom).with.offset(20);

view1.mas_bottom 是什么意思呢？如果只写view1，Masonry会默认是view1中最上面开始算起，也就是view2 间距view1 Y轴开始20的间距

通过这个也就可以很方便的设置view同另一个view之间上下左右的间距了

大家不妨试试view.mas_top view.mas_left view.mas_right 的效果是什么样得了

下面我附上一个完整的界面demo,大家可以看看

效果图3
代码如下：

• (void)setupFrame {
  __weak typeof(self) weakSelf = self;

  //上传头像
  UIButton *iconBtn = [[UIButton alloc]init];
  [iconBtn setCornerRadius:45];
  [iconBtn setBackgroundImage:[UIImage imageNamed:@”huantouxiang”] forState:UIControlStateNormal];
  [iconBtn addTarget:self action:@selector(iconButton) forControlEvents:UIControlEventTouchDown];
  [self.view addSubview:iconBtn];
  self.iconBtn = iconBtn;

  [self.iconBtn mas_makeConstraints:^(MASConstraintMaker *make) {
  make.size.mas_equalTo(CGSizeMake(90, 90));
  make.centerX.equalTo(weakSelf.view);
  make.top.width.offset(90);
  }];

  //上传社区头像文字提醒
  UILabel *iconLabel = [[UILabel alloc]init];
  iconLabel.textColor = c3;
  iconLabel.text = @”上传社团头像”;
  iconLabel.font = [UIFont systemFontOfSize:15];
  [self.view addSubview:iconLabel];

  [iconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  make.centerX.equalTo(iconBtn);
  make.top.equalTo(iconBtn.mas_bottom).with.offset(20);
  }];

  //社团编辑图标
  UIImageView *editIcon = [[UIImageView alloc]init];
  editIcon.image = [UIImage imageNamed:@”bianxie”];
  [self.view addSubview:editIcon];

  [editIcon mas_makeConstraints:^(MASConstraintMaker *make) {
  make.size.mas_equalTo(CGSizeMake(25, 20));
  make.left.equalTo(weakSelf.view).with.offset(10);
  make.top.equalTo(iconLabel.mas_bottom).with.offset(30);
  }];

  //社团名
  UITextField *nameText = [[UITextField alloc]init];
  nameText.placeholder = @”请填写社区名(社团名最多6个字)”;
  [self.view addSubview:nameText];
  self.nameText = nameText;

  [nameText mas_makeConstraints:^(MASConstraintMaker *make) {
  make.height.mas_equalTo(@20);
  make.centerY.equalTo(editIcon);
  make.right.equalTo(weakSelf.view).with.offset(-10);
  make.left.equalTo(editIcon.mas_right).with.offset(5);
  }];

  //分割线
  UIImageView *xian = [[UIImageView alloc]init];
  xian.backgroundColor = DBColor(226, 226, 226);
  [self.view addSubview:xian];

  [xian mas_makeConstraints:^(MASConstraintMaker *make) {
  make.height.mas_equalTo(@1);
  make.left.equalTo(weakSelf.view).with.offset(10);
  make.right.equalTo(weakSelf.view).with.offset(-10);
  make.top.equalTo(editIcon.mas_bottom).with.offset(5);
  }];

  //选择标签
  UILabel *tagLabel = [[UILabel alloc]init];
  tagLabel.text = @”选择标签”;
  tagLabel.textColor = c3;
  tagLabel.font = [UIFont systemFontOfSize:15];
  [self.view addSubview:tagLabel];

  [tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  make.height.mas_equalTo(@20);
  make.width.mas_equalTo(@60);
  make.left.equalTo(weakSelf.view).with.offset(10);
  make.top.equalTo(xian).with.offset(35);
  }];

  //跳转标签选择
  UITextField *tagText = [[UITextField alloc]init];
  tagText.placeholder = @”美容颜”;
  tagText.borderStyle=UITextBorderStyleRoundedRect;
  tagText.delegate = self;
  [tagText addTarget:self action:@selector(textTag) forControlEvents:UIControlEventTouchDown];
  [self.view addSubview:tagText];

  [tagText mas_makeConstraints:^(MASConstraintMaker *make) {
  make.centerY.equalTo(tagLabel);
  make.right.equalTo(weakSelf.view).with.offset(-10);
  make.left.equalTo(tagLabel.mas_right).with.offset(5);
  }];

  //tagView
  self.tagView = ({
  SKTagView *view = [SKTagView new];
  view.backgroundColor = [UIColor clearColor];
  view.padding = UIEdgeInsetsMake(0, 0, 0, 0);
  view.insets = 15;
  view.lineSpace = 10;
  __weak SKTagView *weakView = view;
  view.didClickTagAtIndex = ^(NSUInteger index){
  //Remove tag
  [weakView removeTagAtIndex:index];
  };
  view;
  });
  [self.view addSubview:self.tagView];
  [self.tagView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(weakSelf.view).with.offset(10);
  make.right.equalTo(weakSelf.view).with.offset(-10);
  make.top.equalTo(tagText.mas_bottom).with.offset(10);
  }];

  //label标识语
  UILabel *label = [[UILabel alloc]init];
  label.font = [UIFont systemFontOfSize:13];
  label.textColor = [UIColor redColor];
  label.text = @”PS:成员和视频越多得社团越容易被发现!”;
  [self.view addSubview:label];

  [label mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(weakSelf.view).with.offset(10);
  make.right.equalTo(weakSelf.view).with.offset(-10);
  make.top.equalTo(self.tagView.mas_bottom).with.offset(20);
  }];

  UIButton *commitBtn = [[UIButton alloc]init];
  [commitBtn setCornerRadius:5];
  [commitBtn setBorderWidth:1 color:DBTextThemeColor];
  [commitBtn setTitleColor:DBTextThemeColor forState:UIControlStateNormal];
  commitBtn.titleLabel.font = [UIFont systemFontOfSize:15];
  [commitBtn setTitle:@”确认发布” forState:UIControlStateNormal];
  [commitBtn addTarget:self action:@selector(commitButton) forControlEvents:UIControlEventTouchDown];
  [self.view addSubview:commitBtn];

  [commitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
  make.height.mas_equalTo(@30);
  make.left.equalTo(weakSelf.view).with.offset(10);
  make.right.equalTo(weakSelf.view).with.offset(-10);
  make.top.equalTo(label.mas_bottom).with.offset(50);
  }];
  }