不管是是界面创建约束还是代码创建约束,苹果官方提供的方式都比较繁琐。所以出现了第三方框架。

Masonry 在github地址如下:

  https://github.com/SnapKit/Masonry

如果需要通过代码手动添加约束,Masonry真的是一个不错的选择,大大增加开发效率,何乐而不为呢。

Autolayout - Masonry

  • 使用步骤

    • 添加Masonry文件夹的所有源代码到项目中
    • 添加2个宏、导入主头文件
       // 只要添加了这个宏,就不用带mas_前缀
      #define MAS_SHORTHAND
      // 只要添加了这个宏,equalTo就等价于mas_equalTo
      #define MAS_SHORTHAND_GLOBALS
      // 这个头文件一定要放在上面两个宏的后面
      #import "Masonry.h"
  • 添加约束的方法

 // 这个方法只会添加新的约束
[view makeConstraints:^(MASConstraintMaker *make) { }]; // 这个方法会将以前的所有约束删掉,添加新的约束
[view remakeConstraints:^(MASConstraintMaker *make) { }]; // 这个方法将会覆盖以前的某些特定的约束
[view updateConstraints:^(MASConstraintMaker *make) { }];
  • 约束的类型

    1.尺寸:width\height\size
    2.边界:left\leading\right\trailing\top\bottom
    3.中心点:center\centerX\centerY
    4.边界:edges
  • 示例代码1:居中显示

       // 居中显示
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView]; // 可以使用三个方法来添加约束。
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(self.view);
    make.centerY.equalTo(self.view);
    make.height.equalTo();
    make.width.equalTo();
    }];
  • 示例代码2:并排位于底部,间距20

      //并排位于底部,间距20
    
       UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView]; UIView *blueView= [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView]; // 添加约束
    [redView makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view.left).offset(); // 左边间距20
    make.right.equalTo(blueView.left).offset(-); // 右边和blueView间距20
    make.bottom.equalTo(self.view.bottom).offset(-); // 底部间距20 make.height.equalTo(); // 高度200 }]; [blueView makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view.right).offset(-); // 右边间距20
    make.bottom.equalTo(redView.bottom); // 和redView底部间距相同 make.height.equalTo(redView); // 等宽
    make.width.equalTo(redView); // 等高
    }];
  • 示例代码3:四个View,平分整个屏幕

 //四个View,平分整个屏幕
//红色
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 蓝色
UIView *blueView= [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 黑色
UIView *blackView = [[UIView alloc] init];
blackView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blackView];
// 绿色
UIView *greenView= [[UIView alloc] init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView]; // autolayout
[redView makeConstraints:^(MASConstraintMaker *make) {
make.left.and.top.equalTo(self.view);
make.right.equalTo(self.view.centerX);
make.bottom.equalTo(self.view.centerY);
}]; [blueView makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(redView.right);
make.right.equalTo(self.view);
make.height.equalTo(redView); }]; [blackView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(redView.bottom);
make.height.equalTo(redView);
make.width.equalTo(redView);
}]; [greenView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(blueView.bottom);
make.left.equalTo(blackView.right);
make.height.equalTo(blueView);
make.width.equalTo(blueView);
}]; // 红色View内部
UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"010.png"]];
UILabel *name = [[UILabel alloc] init];
name.text = @"红色";
name.textAlignment = NSTextAlignmentCenter;
name.backgroundColor = [UIColor purpleColor];
[redView addSubview:image];
[redView addSubview:name];
[image makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(redView.center).offset(-);
}];
[name makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(redView.left);
make.bottom.equalTo(redView.bottom);
make.height.equalTo();
}];
代码示例4:其他方法使用
  // masonry 自动布局
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView]; UIView *blueView= [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView]; [redView makeConstraints:^(MASConstraintMaker *make) {
// 大小100*100,居中显示
//make.size.equalTo(100);
//make.center.equalTo(self.view); //居中显示,直接设置距离四面的距离
UIEdgeInsets eda = {,,,};
make.edges.insets(eda);
//
}]; // blueView位于redView中间
[blueView makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(redView);
make.height.equalTo(redView.height).multipliedBy(0.5); // 乘法
make.width.equalTo(redView.width).dividedBy().offset(); // 除法+偏移量
}];

总结:

  和苹果自带的约束添加方法相比,苹果的约束方法简直无法直视啊。这样给控件添加约束简单快捷,主要是条理清晰,言简意赅。



今日如此,明日依旧。
2015-06-04
05-08 08:09