初识 AutoLayout

一、使用"公式":

1、frame: 原点以及自身的位置来确定自身的位置

 2、autoLayout: 根据参照视图的位置  来定义自己的位置

 3、autoLayout: 相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置

 4、使用VFL(Visual Format Language 视觉格式化语言)通过添加字符，来约束视图和视图之间的关系

 5、使用autoLayout 必须把 translatesAutoresizingMaskIntoConstraints禁用才可以使用相对布局是找一个参照物 拿参照物当做基础，设置他和参照物的相对距离 来设置自己的位置

 6、FVL 需有 横 竖 两个方向的约束  ( 1、“H:”(横向),

                                 2、“V:”(竖向),

                                 3、“|” (表示它的父视图),

                                 4、“-50-”(表示两个视图之间的间距),

                                 5、“[textField]”）

 7、H:横向

   | 表示他的父视图

   -50- 表示后面视图 与前面视图的距离 （后面视图是textField，前面视图是他的父视图）

   [textField(>=200)] 要约束视图的宽  (>=200)允许最小的宽度是200  如果是竖向  就是允许最小的高度

   @"H:|-50-[textField(>=200)]-50-|"

   距离坐边原点距离50   右边边界距离50    允许视图的最小宽度是200

8、使用 autoLayout 适配的时候 以最小尺寸设备 为基准

 

 

二、使用示例:

  1 #import "ViewController.h"
  2 
  3 @interface ViewController ()
  4 
  5 @end
  6 
  7 @implementation ViewController
  8 
  9 - (void)viewDidLoad {
 10     [super viewDidLoad];
 11     [self demo3];
 12     
 13 }
 14 
 15 // 一个视图
 16 - (void)demo1 {
 17     UIView *view = [[UIView alloc] init];
 18 //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 19     
 20     view.translatesAutoresizingMaskIntoConstraints = NO;
 21     view.backgroundColor = [UIColor redColor];
 22     [self.view addSubview:view];
 23     
 24     
 25 //    VFL 横向 竖向布局
 26 //    @"H:" 设置横向布局
 27 //    @"H:|-20-"设置横向布局 距离父视图的左侧边距
 28 //    @"H:|-20-[view(>=200)]" 设置横向布局 距离父视图的左侧边距， 设置view横向的 尺寸不能小于200
 29 //    @"H:|-20-[view(>=200)]-20-|" 设置横向布局 距离父视图的左侧边距， 设置view横向的 尺寸不能小于200  设置右侧与父视图之间的间距
 30     
 31     
 32 //    @"V:|-40-[view(>=200)]-20-|"设置竖向布局 距离顶部边距40，设置view的尺寸不能小于400，设置底部与父视图之间的边距为20
 33 //    使用VFL 需要把视图的对象（视图）与 他的名字（字符串）绑定起来
 34     NSDictionary *views = NSDictionaryOfVariableBindings(view);
 35 //    给 self.view 和 view 添加约束
 36 //    addConstraints 添加约束的 方法
 37 //    NSLayoutConstraint 添加具体约束的一个类
 38     
 39 //    + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
 40 //    format VFL;
 41 //    opts 同意按照某个方向去布局;
 42 //    metrics 绑定的参数;
 43 //    views 绑定的视图参数
 44     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
 45     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
 46     
 47 }
 48 
 49 
 50 - (void)demo2 {
 51     UIView *view = [[UIView alloc] init];
 52     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 53     
 54     view.translatesAutoresizingMaskIntoConstraints = NO;
 55     view.backgroundColor = [UIColor redColor];
 56     [self.view addSubview:view];
 57     
 58     
 59     UIView *view1 = [[UIView alloc] init];
 60     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 61     
 62     view1.translatesAutoresizingMaskIntoConstraints = NO;
 63     view1.backgroundColor = [UIColor brownColor];
 64     [self.view addSubview:view1];
 65     
 66 
 67     NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
 68 //    红色view 的横向约束
 69     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
 70 //    红色view 的竖向约束
 71     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1]" options:0 metrics:nil views:views]];
 72     
 73 //    棕色view1 的横向约束
 74     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
 75 //    棕色view1 的竖向约束
 76     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];
 77     
 78     
 79         UIView *view2 = [[UIView alloc] init];
 80     view2.translatesAutoresizingMaskIntoConstraints = NO;
 81     view2.backgroundColor = [UIColor greenColor];
 82     [self.view addSubview:view2];
 83 //    view2 横向
 84 //    view2 竖向
 85 }
 86 
 87 //  优化 demo2
 88 - (void)demo3 {
 89     UIView *view = [[UIView alloc] init];
 90     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 91     
 92     view.translatesAutoresizingMaskIntoConstraints = NO;
 93     view.backgroundColor = [UIColor redColor];
 94     [self.view addSubview:view];
 95     
 96     
 97     UIView *view1 = [[UIView alloc] init];
 98     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 99     
100     view1.translatesAutoresizingMaskIntoConstraints = NO;
101     view1.backgroundColor = [UIColor brownColor];
102     [self.view addSubview:view1];
103     
104     
105     NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
106     //    红色view 的横向约束
107     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
108     //    红色view 棕色view1 的竖向约束
109 //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(50)]" options:0 metrics:nil views:views]];
110     
111 //  红色view 棕色view1 两个视图的高度 都是50
112 //    [view1(view)];
113     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(view)]" options:0 metrics:nil views:views]];
114     
115     //    棕色view1 的横向约束
116     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
117     
118 //    //    棕色view1 的竖向约束
119 //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];
120     
121 
122 }

 三、模拟器运行效果图

demo1 运行效果：

demo2 运行效果：

demo3 运行效果：

posted @ 2015-10-06 15:27  8023博客  阅读(526)  评论(0)  编辑  收藏  举报