VFL、SnapKit、masonry 三种自动布局的使用

Masonry

   Masonry基本概念

   Masonry，“一个轻量级的布局框架，采用更"优雅"的语法封装自动布局”，不需要使用XIB和Storyboard， 并具有高可读性 而且同时支持 iOS 和 Max OS X

    Masonry尤其适合习惯纯代码开发的开发者 ，在iPhone6发布后引发的适配潮中 Masonry一定可以助你一臂之力

   ***框架下载地址

    https://github.com/Masonry/Masonry

   ***常用属性含义（View+MASShorthandAdditions.h）

    /*
     View+MASShorthandAdditions中属性与NSLayoutAttrubute的对照表如下
     Masonry NSAutoLayout 说明
     left       NSLayoutAttributeLeft 左侧
     top        NSLayoutAttributeTop 上侧
     right      NSLayoutAttributeRight 右侧
     bottom     NSLayoutAttributeBottom 下侧
     leading NSLayoutAttributeLeading 首部
     trailing NSLayoutAttributeTrailing 尾部
     width      NSLayoutAttributeWidth      宽
     height     NSLayoutAttributeHeight     高
     centerX NSLayoutAttributeCenterX 横向中点
     centerY NSLayoutAttributeCenterY 纵向中点
     baseline NSLayoutAttributeBaseline 文本基线

    

     注意：iOS8中新增的属性Masonry暂时还不支持(提示：现阶段我们开发的APP要支持ios6,ios7 所以可以忽略)

     */

  

/*
mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束

三种函数善加利用 就可以应对各种情况了
 */
    》两个赋值方法区别（equalTo 和 mas_equalTo）
/*
 #define equalTo(...)                     mas_equalTo(__VA_ARGS__)
 #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
 
 mas_equalTo对其参数进行了一个自动装箱操作， 除了支持NSNumber数值类型之外还支持CGPoint CGSize UIEdgeInsets
 */

  

 

 

http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/

//如果你想要用masonry,但是不想使用mas前缀，我们就可以定义这个宏

//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND


#import "ViewController.h"

#import "Masonry.h"

@interface ViewController ()
//使用框架的第一件事情，把头文件导入我们新建的工程中

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
//    1.创建一个红色的view
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
   
   
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        1.第一种写法
        make.top.equalTo(self.view.mas_top).offset(20);
        make.left.equalTo(self.view.mas_left).offset(20);
        make.right.equalTo(self.view.mas_right).offset(-20);
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
        2.第二种写法
        make.top.equalTo(self.view).offset(20);
        make.left.equalTo(self.view).offset(20);
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
        3.第三种写法
//        make.top.left.equalTo(self.view).offset(20);
//        make.right.bottom.equalTo(self.view).offset(-20);
//       
        4.第四种写法
//        make.edges = UIEdgeInsetsMake(20, 20, 20, 20);\
   
  [redView mas_makeConstraints:^(MASConstraintMaker *make) {
     
//      make.top.equalTo(self.view.mas_top).offset(20);
//      make.left.equalTo(self.view.mas_left).offset(20);
//      make.right.equalTo(self.view.mas_right).offset(-20);
//      make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//     
//      make.top.equalTo(self.view).offset(20);
//      make.left.equalTo(self.view).offset(20);
//      make.right.equalTo(self.view).offset(-20);
//      make.bottom.equalTo(self.view).offset(-20);
     
      make.top.left.equalTo(self.view).offset(20);
      make.right.bottom.equalTo(self.view).offset(-20);
     
  }];
    //更新约束
      [redView updateConstraints:^(MASConstraintMaker *make) {
          make.top.left.equalTo(self.view).offset(80);
      }];
//    新建新的约束
   
   
    [redView  remakeConstraints:^(MASConstraintMaker *make) {
       
        make.top.left.equalTo(self.view).offset(150);
        make.right.bottom.equalTo(self.view).offset(-150);
    }];

   
//    [redView makeConstraints:^(MASConstraintMaker *make) {
//                1.第一种写法
//    make.top.equalTo(self.view.mas_top).offset(20);
//    make.left.equalTo(self.view.mas_left).offset(20);
//    make.right.equalTo(self.view.mas_right).offset(-20);
//    make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//        make.edges.mas_equalTo(20,20,20,20);/\
//        4.第四种写法
//        make.edges.insets = UIEdgeInsetsMake(20, 20, 20, 20);
//    }];
   
//    [redView makeConstraints:^(MASConstraintMaker *make) {
//       //    }];
//    5.更新约束
//    [redView updateConstraints:^(MASConstraintMaker *make) {
//        make.top.equalTo(self.view.mas_top).offset(100);
//
//    }];
   
//    删除旧的约束，新建新的约束
//    [redView remakeConstraints:^(MASConstraintMaker *make) {
//        make.top.equalTo(self.view.mas_top).offset(50);
//        make.left.equalTo(self.view.mas_left).offset(50);
//        make.right.equalTo(self.view.mas_right).offset(-20);
//        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//
//    }];

   

  

VFL：在swift中

自动布局

        // 默认情况下，translatesAutoresizingMaskIntoConstraints = true，表示用 frame 去设置控件位置，设置为false 为用VFL自动布局 snapKit 也是这样的

        nameText.translatesAutoresizingMaskIntoConstraints = false

        phoneText.translatesAutoresizingMaskIntoConstraints = false

 //自动布局
        // 使用 VFL 可视化布局语言
        // H 水平
        // V 垂直
        // | 表示边界
        // views 字典: 用处关联 VFL 和界面控件的 H:|-20-[name]-20- 表示水平距离左右两边的边界各20，
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-20-[name]-20-|",
            options: [],
            metrics: nil,
            views: ["name": nameText]))
       
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-20-[phone]-20-|",
            options: [],
            metrics: nil,
            views: ["phone": phoneText]))
       
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|-100-[name]-20-[phone]",
            options: [],
            metrics: nil,
            views: ["name": nameText, "phone": phoneText]))

       

snapKit :自动布局 在swift中

 
        // 2. 自动布局
        // 1> 参照属性一致，可以省略
        // 2> 参照属性不一致，使用 snp_参照属性的格式

   

例子：    

// 图标视图

        iconView.snp_makeConstraints { (make) -> Voidin
            make.centerX.equalTo(self)
            make.centerY.equalTo(self).offset(-60)
        }
        // 小房子视图
        homeIconView.snp_makeConstraints { (make) -> Voidin
            make.center.equalTo(iconView)

        }

// 提示文字

        messageLabel.snp_makeConstraints { (make) -> Voidin
            make.centerX.equalTo(iconView)
            make.top.equalTo(iconView.snp_bottom).offset(20)
            make.size.equalTo(CGSize(width: 224, height: 36))
        }
        // 注册按钮
        registerButton.snp_makeConstraints { (make) -> Voidin
            make.top.equalTo(messageLabel.snp_bottom).offset(20)
            make.left.equalTo(messageLabel)
            make.size.equalTo(CGSize(width: 100, height: 36))
        }
        // 登录按钮
        loginButton.snp_makeConstraints { (make) -> Voidin
            make.right.equalTo(messageLabel)
            make.top.equalTo(registerButton)
            make.size.equalTo(registerButton)
        }
        // 遮罩视图
        maskIconView.snp_makeConstraints { (make) -> Voidin
            make.left.equalTo(self)
            make.right.equalTo(self)
            make.top.equalTo(self)
            make.bottom.equalTo(registerButton)

        }