自动布局AutoLayout

1:理解概念

Auto Layout 中文翻译过来意思是 自动布局 ,通过内定的 Constraint (约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图.

将我们想象中的结果展现出来. Constraint 的设定非常灵活,实现一种布局的方法可以通过多Constraint 套来完成.

以下几点是我们在开始使用之前必须弄清楚的事情:

1:我们要抛弃以往旧的布局方式不再去关注View的Frame,Center,和autoresizing. 因为这些坐标和大小的定位都可以通过来Auto Layout完成.

2:理解每一种 Constraint 的含义,否则,当你去看别人的实现的 Constraint 时,就会有种看天书的感觉.

3:按意图设计,一切按我们理想中的效果去布局,只要约束设定的合理,就一定能够完成目标布局.

2:开始使用

先从 Interface Builder 开始吧. 打开某个 Xib 或者 StoryBoard ,

在右侧 Show in file inspector 里面找到 Ues Autolayout ,将其勾选.如下图:

自此, Autolayout 便启用成功, autoresizingMask 被废弃.其所有以往的功能和特性都被Autolayout 取代.

现在我们定位控件位置的 方式 ,不再像以前一样, 计算 好每一个控件具体的位置,x是多少,y是多少.

而是思考,这个控件离左边是相隔多少距离,或者离顶部或底部相隔多少距离.

而有些规则性的事情还是类似的,比如我们定位一个控制的位置,一定要有x,y两个坐标点同时有值,少一个都不能正常显示.

同样 Autolayout 在创建约束时也一样,在思考完离顶部距离以后,还需要思考离顶部距离,否则控件的显示位置一样无法正常显示.

换言之,要让 Autolayout 计算出合理的位置,需要保证 水平 距离和 垂直 距离同时存在. 否则IDE,都会给出警告,提示这样的布局 Ambiguous Layout (模凌两可)

接下来,让我们来熟悉一下 Interface Builder 提供哪些实现 Autolayout 的功能:

观察一下界面预览右下角,有一排如下图这样的按钮:

这些是 Interface Builder 用来创建 Constraint 的主要方式,同时,我们也可以在 Xcode 的菜单栏中找到这些功能,如下图:

这些功能分别如下图中描述的那样:

如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints 的属性设置为NO.

即可开始通过代码添加Constraint,否则View还是会按照以往的autoresizingMask进行计算.

而在 Interface Builder 中勾选了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints 属性都会被默认设置NO.

3:从旧的IB布局中转换成Auto layout

4:熟练使用Interface Builder

5:通过代码来构建自动布局

代码创建的约束有两种方式:

1:常规约束,写法非常冗长,但能实现所有的约束方式以及非常特殊的约束方式,代码如下:

    //添加两个允许自动布局的子视图
    UIView *view1 = [[UIView alloc]initWithFrame:CGRectZero];
    //使用Autolayout，关闭Autorisizing
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    
    
    UIView *view2 = [UIView new];
    view2.frame = CGRectZero;
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view2.backgroundColor = [UIColor grayColor];
    [self.view addSubview:view2];
    /**
     *  第一种简单方法
     */
    //设置子视图的宽度和父视图的宽度相同
//    [self.view addConstraint:
//     //添加一个约束
//     [NSLayoutConstraint constraintWithItem:
//      //给谁添加约束（view1）
//      view1 attribute:
//      //约束的属性是宽
//      NSLayoutAttributeWidth relatedBy:
//      //约束的关系是怎样的，相等，还是大于小于
//      NSLayoutRelationEqual toItem:
//      //和谁建立约束关系（父视图）
//      self.view attribute:
//      //和父视图的哪个属性建立
//      NSLayoutAttributeWidth multiplier:
//      //比例
//      1.0 constant:
//      //约束的值
//      -100]];
    //“view1.attr1 = view2.attr2 * multiplier + constant”
    
    //设置子视图的高度是父视图高度的一半
//    [self.view addConstraint:[NSLayoutConstraint 
                                    constraintWithItem:view1 
                                    attribute:NSLayoutAttributeHeight 
                                    relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                    attribute:NSLayoutAttributeHeight 
                                    multiplier:0.5 
                                    constant:-200
                                    ]
];





////////////////////////////////////////////////////////////////////////////////////////

#import "DDYViewController.h"
#define SCREENW [UIScreen mainScreen].bounds.size.width
#define SCREENH [UIScreen mainScreen].bounds.size.height

@interface DDYViewController ()

@property (nonatomic, weak)UITextField *loginName;

@end

@implementation DDYViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    //imageView 背景图片
    [self settingImageView];
    
    //texdField 文本框
    [self settingTextField];

    
}

#pragma mark - texdField
- (void)settingTextField
{
    //创建组件
    UITextField *loginName = [[UITextField alloc]init];
    
    //设置frame,约束完删除
    //loginName.frame = CGRectMake(10, 10, 100, 30);
    
    //用autolayout
    loginName.translatesAutoresizingMaskIntoConstraints = NO;
    
    //文本颜色
    loginName.textColor = [UIColor blueColor];
    
    //背景颜色
    loginName.backgroundColor = [UIColor whiteColor];
    
    //默认显示
    loginName.placeholder = @"password";
    
    //样式
    [loginName setBorderStyle:UITextBorderStyleRoundedRect];
    
    //全局
    _loginName = loginName;
    
    //添加组件
    [self.view addSubview:loginName];
    
    /* 约束 */
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:loginName
                              attribute:NSLayoutAttributeHeight
                              relatedBy:NSLayoutRelationEqual
                              toItem:nil
                              attribute:NSLayoutAttributeNotAnAttribute
                              multiplier:1
                              constant:30
                              ]
     ];
    
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:loginName
                              attribute:NSLayoutAttributeWidth
                              relatedBy:NSLayoutRelationEqual
                              toItem:nil
                              attribute:NSLayoutAttributeNotAnAttribute
                              multiplier:1
                              constant:120
                              ]
     ];
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:loginName
                              attribute:NSLayoutAttributeTop
                              relatedBy:NSLayoutRelationEqual
                              toItem:self.view
                              attribute:NSLayoutAttributeTop
                              multiplier:1
                              constant:100
                              ]
     ];
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:loginName
                              attribute:NSLayoutAttributeCenterX
                              relatedBy:NSLayoutRelationEqual
                              toItem:self.view
                              attribute:NSLayoutAttributeCenterX
                              multiplier:1
                              constant:0
                              ]
     ];
}

#pragma mark - imageView
- (void)settingImageView {
    //创建组件
    UIImageView *backImageView = [[UIImageView alloc]init];
    
    //背景色，无背景图片时可用
    //backImageView.backgroundColor = [UIColor grayColor];
    
    //背景图片
    backImageView.image = [UIImage imageNamed:@"form-big"];
    
    //开启用户交互，往其上添加可交互组件时开启
    //backImageView.userInteractionEnabled = YES;
    
    //添加组价
    [self.view addSubview:backImageView];
    
    //使用autolayout
    backImageView.translatesAutoresizingMaskIntoConstraints = NO;
    
    
    /* 约束 */
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:backImageView
                              attribute:NSLayoutAttributeHeight
                              relatedBy:NSLayoutRelationEqual
                              toItem:nil
                              attribute:NSLayoutAttributeNotAnAttribute
                              multiplier:1
                              constant:150
                              ]
     ];
    
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:backImageView
                              attribute:NSLayoutAttributeWidth
                              relatedBy:NSLayoutRelationEqual
                              toItem:nil
                              attribute:NSLayoutAttributeNotAnAttribute
                              multiplier:1
                              constant:160
                              ]
     ];
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:backImageView
                              attribute:NSLayoutAttributeTop
                              relatedBy:NSLayoutRelationEqual
                              toItem:self.view
                              attribute:NSLayoutAttributeTop
                              multiplier:1
                              constant:80
                              ]
     ];
    [self.view addConstraint:[NSLayoutConstraint
                              constraintWithItem:backImageView
                              attribute:NSLayoutAttributeCenterX
                              relatedBy:NSLayoutRelationEqual
                              toItem:self.view
                              attribute:NSLayoutAttributeCenterX
                              multiplier:1
                              constant:0
                              ]
     ];
}

 

item1.attribute = multiplier ⨉ item2.attribute + constant

2:可视化格式语言约束VFL

    /**
     *  第二种方法
     */
    //NSDictionaryOfVariableBindings是一个宏定义，期作用是生成一个字典，key的名字和对象的名字标示符相同，比如{@“self.view”:self.view ,@“view1”:view1,@“view2”:view2},一般字典里包含需要自动布局的父视图和所有的子视图
    NSDictionary *views = NSDictionaryOfVariableBindings(self.view,view1,view2);

    [self.view addConstraints:
     //添加一组约束
     [NSLayoutConstraint constraintsWithVisualFormat:
      //添加对水平方向上V1的控制：距离父视图左边距为0（如果是0可以忽略），同时view2的宽度和viwe1相同
      @“H:|-0-[view1]-0-[view2(==view1)]-0-|” options:
      //字典类型的值，可以点进去看枚举类型，一般给0
      0 metrics:
      //衡量标准，一般为nil，参数从NSDictionary传过来
      nil views:views]];
    
//    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@“V:|-100-[view1]-100-|” options:0 metrics:nil views:views]];
//    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@“V:|-100-[view2]-100-|” options:0 metrics:nil views:views]];
    
    //添加垂直方向view1的控制：距离父视图顶部距离为0；同时viwe2的高度和view1相等
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@“V:|-0-[view1]-0-[view2(==view1)]-0-|” options:0 metrics:nil views:views]];