iOS UI-自动布局（AutoLayout）

最新推荐文章于 2024-11-01 20:35:46 发布

weixin_33721427

最新推荐文章于 2024-11-01 20:35:46 发布

阅读量67

点赞数

文章标签： ui

  1 //
  2 //  ViewController.m
  3 //  IOS_0115_AutoLayout
  4 //
  5 //  Created by ma c on 16/1/15.
  6 //  Copyright (c) 2016年 博文科技. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 @interface ViewController ()
 12 
 13 @property (nonatomic, strong) NSLayoutConstraint *changeBlueTop;
 14 @property (nonatomic, strong) UIView *blueView;
 15 
 16 
 17 
 18 @end
 19 
 20 @implementation ViewController
 21 
 22 - (void)viewDidLoad {
 23     [super viewDidLoad];
 24 
 25     //创建蓝色View
 26     UIView *blueView = [[UIView alloc] init];
 27     blueView.frame = CGRectMake(0, 0, 100, 100);
 28     blueView.backgroundColor = [UIColor blueColor];
 29     [self.view addSubview:blueView];
 30     self.blueView = blueView;
 31     //创建红色View
 32     UIView *redView = [[UIView alloc] init];
 33     redView.frame = CGRectMake(100, 100, 100, 100);
 34     redView.backgroundColor = [UIColor redColor];
 35     [blueView addSubview:redView];
 36     
 37     //禁用autoresizing
 38     blueView.translatesAutoresizingMaskIntoConstraints = NO;
 39     redView.translatesAutoresizingMaskIntoConstraints = NO;
 40     
 41     //创建并添加约束
 42 
 43     //1.创建蓝色View的约束
 44     
 45     /*
 46      (id)对象 的 (NSLayoutAttribute)属性
 47      (NSLayoutRelation)关系（> = <）
 48      (id)对象的(NSLayoutAttribute)属性
 49      乘以multiplier的参数 加上constant的参数
 50      */
 51 
 52     //高度的约束
 53     NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];
 54     //把约束加到控件上
 55     [blueView addConstraint:blueHeight];
 56     
 57     //距离左边30
 58     NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
 59     [blueView.superview addConstraint:blueLeft];
 60     
 61     //距离上面30(topLayoutGuide状态栏)
 62     NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
 63     [blueView.superview addConstraint:blueTop];
 64     self.changeBlueTop = blueTop;
 65 
 66     
 67     //距离右边30
 68     NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30];
 69     [blueView.superview addConstraint:blueRight];
 70     
 71     //1.创建红色View的约束
 72     //红色View的高度等于蓝色View的高度
 73     NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
 74     [redView.superview addConstraint:redHeight];
 75 
 76     //红色view的Top距离蓝色View的Bottom30
 77     NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:30];
 78     [redView.superview addConstraint:redTop];
 79 
 80     //红色View与蓝色View右对齐
 81     NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
 82     [redView.superview addConstraint:redRight];
 83 
 84     //红色View的宽度等于蓝色View的宽度的一半
 85     NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
 86     [redView.superview addConstraint:redWidth];
 87 
 88     //修改约束实现动画效果
 89     
 90     UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
 91     
 92     [btn setFrame:CGRectMake(0, 300, 50, 50)];
 93     [btn setTitle:@"移动" forState:UIControlStateNormal];
 94     [btn setBackgroundColor:[UIColor orangeColor]];
 95     [self.view addSubview:btn];
 96     [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
 97     
 98 }
 99 
100 - (void)btnClick
101 {
102     //修改约束-没有根据新的约束计算蓝色View的frame
103     self.changeBlueTop.constant += 50;
104     [UIView animateWithDuration:1 animations:^{
105         //根据新的约束修改新的frame
106         [self.blueView layoutIfNeeded];
107     }];
108 }
109 
110 
111 - (void)didReceiveMemoryWarning {
112     [super didReceiveMemoryWarning];
113     // Dispose of any resources that can be recreated.
114 }
115 
116 @end

VFL语言-可视化格式语言（Visual Format Language）

1.代码分析：

1    NSArray *arr = [NSLayoutConstraint constraintsWithVisualFormat:<#(NSString *)#> options:<#(NSLayoutFormatOptions)#> metrics:<#(NSDictionary *)#> views:<#(NSDictionary *)#>]

VisualFormat:VFL语句

options:约束类型

metrics ：VFL语句中用到的具体数值

views ：VFL语句中用到的控件

2.使用步骤：

创建控件

添加到父控件

禁用Autoresizing

添加约束

3.总结

简化了代码量，方便书写约束

不支持乘法

//
//  ViewController.m
//  IOS_0116_VFL
//
//  Created by ma c on 16/1/16.
//  Copyright (c) 2016年 博文科技. All rights reserved.
//


#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 链式语法
    UIView *blueView = UIView.new;
    blueView.backgroundColor = UIColor.blueColor;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    /** 一个方向上的所有控件的对齐方法
     NSLayoutFormatAlignAllLeft = (1 << NSLayoutAttributeLeft),
     NSLayoutFormatAlignAllRight = (1 << NSLayoutAttributeRight),
     NSLayoutFormatAlignAllTop = (1 << NSLayoutAttributeTop),
     NSLayoutFormatAlignAllBottom = (1 << NSLayoutAttributeBottom),
     NSLayoutFormatAlignAllLeading = (1 << NSLayoutAttributeLeading),
     NSLayoutFormatAlignAllTrailing = (1 << NSLayoutAttributeTrailing),
     NSLayoutFormatAlignAllCenterX = (1 << NSLayoutAttributeCenterX),
     NSLayoutFormatAlignAllCenterY = (1 << NSLayoutAttributeCenterY),
     NSLayoutFormatAlignAllBaseline = (1 << NSLayoutAttributeBaseline),
     NSLayoutFormatAlignAllLastBaseline = NSLayoutFormatAlignAllBaseline,
     NSLayoutFormatAlignAllFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0) = (1 << NSLayoutAttributeFirstBaseline),
     */
    // 添加约束
    
    // 添加blueView水平方向的约束
    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueViewH];
    
    
    NSArray *blueAndRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueAndRedV];
    
    // VFL语言不支持运算符
    //   NSArray *redViewWidth = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    //    [self.view addConstraints:redViewWidth];
    
    NSLayoutConstraint *redViewWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redViewWidth];
}

@end

Masonry轻量级布局框架

meɪs(ə)nrɪ

采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性

 1 //
 2 //  ViewController.m
 3 //  IOS_0106_Masonry
 4 //
 5 //  Created by ma c on 16/1/16.
 6 //  Copyright (c) 2016年 博文科技. All rights reserved.
 7 //
 8 
 9 
10 #import "ViewController.h"
11 //define this constant if you want to use Masonry without the 'mas_' prefix
12 // 如果想在使用Masonry框架时省略mas_前缀请定义下面这个宏
13 #define MAS_SHORTHAND
14 
15 //define this constant if you want to enable auto-boxing for default syntax
16 // 如果你想在使用equalTo的时候让它也带有自动装箱功能请定义下面这个宏
17 #define MAS_SHORTHAND_GLOBALS
18 #warning mark - 上面的两个宏必须定义在框架的主头文件的上面
19 
20 #import "Masonry.h"
21 @interface ViewController ()
22 
23 @end
24 
25 @implementation ViewController
26 
27 - (void)viewDidLoad {
28     [super viewDidLoad];
29     
30     UIView *blueView = [[UIView alloc] init];
31     blueView.backgroundColor = [UIColor blueColor];
32     [self.view addSubview:blueView];
33     
34     
35     // 添加约束
36     [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
37         //        make.left.equalTo(self.view.left).offset(50);
38         make.top.equalTo(self.view.mas_top).offset(50);
39         make.right.equalTo(self.view.mas_right).offset(-50);
40         make.bottom.equalTo(self.view.mas_bottom).offset(-50);
41         
42         // 当约束控件的属性和参照控件的属性相同时,参数控件的属性可以省略不写
43         //        make.left.equalTo(self.view).offset(50);
44         //        make.top.equalTo(self.view).offset(50);
45         //        make.right.equalTo(self.view).offset(-50);
46         //        make.bottom.equalTo(self.view).offset(-50);
47         
48         // 当两个约束属性的offset值一样的时候属性也可以连写
49         //        make.left.top.equalTo(self.view).offset(50);
50         //        make.right.bottom.equalTo(self.view).offset(-50);
51         
52         //        make.edges.equalTo(UIEdgeInsetsMake(50, 50, 50, 50));
53         // mas_equalTo可以把基本数据类型转换为对象类型,这个转换过程叫装箱,如果把一个对象类型转换成一个基本数据类型,为拆箱,解箱
54         //        make.edges.mas_equalTo(UIEdgeInsetsMake(50, 50, 50, 50));
55         
56     }];
57     
58     
59     // 更新约束
60     // 如果之前已经添加过有相同的属性,在此方法中可以重写添加在此添加时会把之前添加的相同属性的约束覆盖掉
61     // 如果在此方法中添加的了新属性的约束,可能会照成约束冲突
62     [blueView updateConstraints:^(MASConstraintMaker *make) {
63         make.left.equalTo(self.view).offset(100);
64         //        make.width.equalTo(200);
65     }];
66     
67     
68     // 重置blueView的约束"把blueView之前添加的所有约束删除"同时也可以在此方法中重新给blueView添加新的约束
69     [blueView remakeConstraints:^(MASConstraintMaker *make) {
70         make.edges.mas_equalTo(UIEdgeInsetsMake(150, 50, 150, 150));
71         
72     }];
73     
74     
75     
76 }
77 
78 @end