IOS开发学习笔记039-autolayout 代码实现

本文转载至 http://www.cnblogs.com/songliquan/p/4548206.html

1、代码实现比较复杂

  • 代码实现Autolayout的步骤

    • 利用NSLayoutConstraint类创建具体的约束对象

    • 添加约束对象到相应的view上

1     - (void)addConstraint:(NSLayoutConstraint *)constraint;
2 
3     - (void)addConstraints:(NSArray *)constraints;
  • 代码实现Autolayout的注意点

    • 要先禁止autoresizing功能,设置view的下面属性为NO

      view.translatesAutoresizingMaskIntoConstraints = NO;

    • 添加约束之前,一定要保证相关控件都已经在各自的父控件上

    • 不用再给view设置frame

  • 一个NSLayoutConstraint对象就代表一个约束

复制代码
// 创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 
attribute:(NSLayoutAttribute)attr1 
relatedBy:(NSLayoutRelation)relation 
                    toItem:(id)view2 
attribute:(NSLayoutAttribute)attr2 
    multiplier:(CGFloat)multiplier 
                constant:(CGFloat)c;

                view1:要约束的控件
                attr1:约束的类型(做怎样的约束)
                relation:与参照控件之间的关系
                view2:参照的控件
                attr2:约束的类型(做怎样的约束)
                multiplier:乘数
                c:常量 
复制代码
  • 自动布局的核心计算公式

    view1.attr1 =(view2.attr2 * multiplier)+ c ;

  • 约束添加规则

    • 对于两个同层级view之间的约束关系,添加到它们的父view上。
    • 对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上

    • 对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

2、简单练习:一个view

  • 实现一个大小为100*200的redView显示到view中,距离左边和顶部间距都是20
复制代码
 1   // 实现一个大小为100*200的redView显示到view中,距离左边和顶部间距都是20
 2     UIView *redView = [[UIView alloc] init];
 3     redView.backgroundColor = [UIColor redColor];
 4     // 关闭控件的自动添加约束功能
 5     redView.translatesAutoresizingMaskIntoConstraints = NO;
 6     // 先把控件添加到父控件才能接着添加约束
 7     [self.view addSubview:redView];
 8     // 设置宽度
 9     NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0 constant:100];
10     [redView addConstraint:widthConstraint];
11     // 设置高度
12     NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0 constant:200];
13     [redView addConstraint:heightConstraint];
14     // 设置尺寸:距离顶部20
15     NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
16     [self.view addConstraint:topConstraint];
17     // 距离左边约束20
18     NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
19     [self.view addConstraint:leftConstraint];
复制代码

3、练习:两个view

  • 在控制器view顶部添加2个view,1个蓝色,1个红色

    • 2个view高度永远相等

    • 红色view和蓝色view右边对齐

    • 蓝色view距离父控件左边、右边、上边间距相等

    • 蓝色view距离红色view间距固定

    • 红色view的左边和父控件的中点对齐

复制代码
 1   UIView *redView = [[UIView alloc] init];
 2     redView.backgroundColor = [UIColor redColor];
 3     // 关闭控件的自动添加约束功能
 4     redView.translatesAutoresizingMaskIntoConstraints = NO;
 5     // 先把控件添加到父控件才能接着添加约束
 6     [self.view addSubview:redView];
 7 
 8     UIView *blueView = [[UIView alloc] init];
 9     blueView.backgroundColor = [UIColor blueColor];
10     // 关闭控件的自动添加约束功能
11     blueView.translatesAutoresizingMaskIntoConstraints = NO;
12     // 先把控件添加到父控件才能接着添加约束
13     [self.view addSubview:blueView];
14 
15     /**
16      *  - 在控制器view顶部添加2个view,1个蓝色,1个红色
17      - 2个view高度永远相等
18      - 红色view和蓝色view右边对齐
19      - 蓝色view距离父控件左边、右边、上边间距相等 :20
20      - 蓝色view距离红色view间距固定
21      - 红色view的左边和父控件的中点对齐
22      */
23 
24     /**************blue*********************************************************/
25     // blueHeight
26     NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:0 constant:40];
27     [self.view addConstraint:blueHeight]; // 同级控件之间的约束要添加到共同的父控件
28 
29     //蓝色view距离父控件左边、右边、上边间距相等 :20
30     NSLayoutConstraint *blueViewRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view  attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
31     [self.view addConstraint:blueViewRight];
32 
33     NSLayoutConstraint *blueViewTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view  attribute:NSLayoutAttributeTop multiplier:1 constant:20];
34     [self.view addConstraint:blueViewTop];
35 
36     NSLayoutConstraint *blueViewLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view  attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
37     [self.view addConstraint:blueViewLeft];
38 
39     /**************red*********************************************************/
40     //  - redview与blueview等高
41     NSLayoutConstraint *equalHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem: blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
42     [self.view addConstraint:equalHeight]; //
43 
44     //   - redview的左边和父控件的中点对齐
45     NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
46     [self.view addConstraint:centerX]; //
47 
48     //   - redview距离blueView间距20
49     NSLayoutConstraint *margin = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
50     [self.view addConstraint:margin]; //
51 
52        //- 红色view和蓝色view右边对齐
53     NSLayoutConstraint *equalRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView  attribute:NSLayoutAttributeRight multiplier:1 constant:0];
54     [self.view addConstraint:equalRight]; //
复制代码

 

4、使用VFL语言简化代码

visual Format Lauguage ,可视化格式语言

可以使用VFL实现自动布局代码的简化。

VFL的使用

  • 使用VFL来创建约束数组
复制代码
1 + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
2 
3 format :VFL语句
4 opts :约束类型
5 metrics :VFL语句中用到的具体数值
6 views :VFL语句中用到的控件
复制代码
  • 创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义

  NSDictionaryOfVariableBindings(...)

  NSDictionaryOfVariableBindings(abc);

返回一个字典对象,内容为{@"abc" : abc};  

  4.1、VFL示例1:一个View

复制代码
 1 代码示例
 2     UIView *redView = [[UIView alloc] init];
 3     redView.backgroundColor = [UIColor redColor];
 4     // 关闭控件的自动添加约束功能
 5     redView.translatesAutoresizingMaskIntoConstraints = NO;
 6     // 先把控件添加到父控件才能接着添加约束
 7     [self.view addSubview:redView]; 
 8     NSString *vfl  = @"H:[redView(100)]-20-|"; // 设置宽度100,距离右边20
 9     NSDictionary *view = @{@"redView" : redView};
10     // 水平方向约束
11     NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:view];
12     [self.view addConstraints:constraint];
13     // 垂直方向约束
14     vfl = @"V:|-100-[redView(200)]"; // 设置高度200,距离顶部100
15     NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:view];
16     [self.view addConstraints:constraint2 ]; 
复制代码

  4.2、VFL示例2:居中显示

复制代码
 // 居中显示
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 关闭控件的自动添加约束功能
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    // 先把控件添加到父控件才能接着添加约束
    [self.view addSubview:redView];

    NSNumber *margin = @100;

    NSString *vfl  = @"H:|-margin-[redView]-margin-|"; // 设置宽度100,距离右边20
    NSDictionary *view = @{@"redView" : redView};
    NSDictionary *metric = @{@"margin" : margin};
    // 水平方向约束
    NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllCenterX metrics:metric views:view];
    [self.view addConstraints:constraint];

    // 垂直方向约束
    NSDictionary *view2 = NSDictionaryOfVariableBindings(redView);
    NSDictionary *metric2 = NSDictionaryOfVariableBindings(margin);
    vfl = @"V:|-margin-[redView]-margin-|"; // 设置高度200,距离顶部100
    NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllCenterY metrics:metric2 views:view2];
    [self.view addConstraints:constraint2 ];
复制代码

  4.3、VFL示例:并排显示

 

复制代码
 1  UIView *blueView = [[UIView alloc] init];
 2     blueView.backgroundColor = [UIColor blueColor];
 3     // 不要将AutoresizingMask转为Autolayout的约束
 4     blueView.translatesAutoresizingMaskIntoConstraints = NO;
 5     [self.view addSubview:blueView];
 6     
 7     UIView *redView = [[UIView alloc] init];
 8     redView.backgroundColor = [UIColor redColor];
 9     // 不要将AutoresizingMask转为Autolayout的约束
10     redView.translatesAutoresizingMaskIntoConstraints = NO;
11     [self.view addSubview:redView];
12     
13     // 间距
14     NSNumber *margin = @20;
15     // 添加水平方向的约束
16     NSString *vfl1 = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
17     
18     NSDictionary *views = NSDictionaryOfVariableBindings(blueView,redView);
19     NSDictionary *mertics = NSDictionaryOfVariableBindings(margin);
20     NSArray *cons = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:mertics views:views];
21     
22     [self.view addConstraints:cons];
23     // 添加竖直方向的间距
24     // 高度
25     NSNumber *height = @100;
26     NSString *vfl2 = @"V:[blueView(height)]-margin-|";
27     NSDictionary *views2 = NSDictionaryOfVariableBindings(blueView);
28     NSDictionary *mertics2 = NSDictionaryOfVariableBindings(margin,height);
29     NSArray *cons2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertics2 views:views2];
30     [self.view addConstraints:cons2];
posted @ 2015-06-03 14:38  天牛  阅读(258)  评论(0编辑  收藏  举报