前言
在进行app开发的时候，界面布局是非常重要的一项，比如如果没有布局好界面 并且没有用storyboard进行布局，那么切换横竖屏或是换机型的时候 界面就会变得非常的乱。所以用代码进行自动布局就非常必要了。
VFL语言的简单介绍
VFL：可视化格式语言 Visual Format Language
H:水平方向
V:垂直方向
[视图的名字] 其他视图
|：表示父视图
-本身表示一段距离
-距离-：表示一段距离
[字符串表示的视图] 参照视图
[字符串表示的视图(视图的宽高 或者最小最大的宽高、相对宽高))]
注意：()千万不要丢掉
使用代码自动布局步骤：
1.禁用
使用自动布局（autolayout ）frame 就会失效 -> 不需要再去设置视图的frame
使用代码自动布局的时候需要禁用translatesAutoresizingMaskIntoConstraints属性（设置为NO）
2.绑定视图与字符串
3.添加约束
部分示例：
UIView *view = [[UIView alloc]init];
view.backgroundColor = [UIColor cyanColor];
//1.禁用
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
//2.绑定视图和字符串
NSDictionary *views = NSDictionaryOfVariableBindings(view);
//3.添加约束
/**
*VisualFormat:VFL 语句
*options:基于哪一个选项 (基于哪个方向去计算布局)
*metrics:绑定数值（NSNumber）与字符串
*views:绑定视图与字符串的
*/
/*
中国语言：
横向：距离父视图左侧100 视图本身的宽度最小是100 距离父视图右侧是100
竖向：距离父视图顶部150 视图本身高度是40
可视化语言：
H:|-100-[view(>=100)]-100-|
V:|-150-[view(40)]
*/
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
全部示例
注意：调用不同的demo方法会实现相同的效果，但是实现方法不同，具体的里面有注释
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self demo5];
}
//metrics使用
/*
用来绑定参数和字符串的方法
*/
- (void)demo5{
UIView *view1 = [self createView:@"UIView" addToView:self.view];
view1.backgroundColor = [UIColor orangeColor];
UIView *view2 = [self createView:@"UIView" addToView:self.view];
view2.backgroundColor = [UIColor redColor];
//2.绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
NSNumber *leftSpace = @100;
NSNumber *rightSpace = @100;
NSNumber *view1TopSpace = @150;
NSNumber *view1MinWidth = @100;
NSNumber *view1Height = @40;
NSNumber *view2TopSpace = @50;
NSDictionary *metrics = NSDictionaryOfVariableBindings(leftSpace,rightSpace,view1TopSpace,view1MinWidth,view1Height,view2TopSpace);
//所有约束的VFL数组
NSArray *constrains = @[@"H:|-leftSpace-[view1(>=view1MinWidth)]-rightSpace-|",@"H:|-leftSpace-[view2(view1)]-rightSpace-|",@"V:|-view1TopSpace-[view1(view1Height)]-view2TopSpace-[view2(view1)]"];
for (int i = 0;i<constrains.count; i++) {
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constrains[i] options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];
}
}
//利用数组简化代码
- (void)demo4{
UIView *view1 = [self createView:@"UIView" addToView:self.view];
view1.backgroundColor = [UIColor orangeColor];
UIView *view2 = [self createView:@"UIView" addToView:self.view];
view2.backgroundColor = [UIColor redColor];
//2.绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//3.添加约束
//所有约束的VFL数组
NSArray *constrains = @[@"H:|-100-[view1(>=100)]-100-|",@"H:|-100-[view2(>=100)]-100-|",@"V:|-150-[view1(40)]-50-[view2(view1)]"];
for (int i = 0;i<constrains.count; i++) {
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constrains[i] options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
}
//合并有交集的竖向 简化代码
- (void)demo3{
/*
研究发现：
两个视图竖向是有交集的 -> 尝试把两个竖向的约束 放到一起
view1:
V:|-150-[view1(40)]
view2:
V:[view1]-50-[view2(view1)]
放到一起：
V:|-150-[view1(40)]-50-[view2(view1)]
*/
UIView *view1 = [self createView:@"UIView" addToView:self.view];
view1.backgroundColor = [UIColor orangeColor];
UIView *view2 = [self createView:@"UIView" addToView:self.view];
view2.backgroundColor = [UIColor redColor];
//2.绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//3.添加约束
/*
view1：
中国语言
横向：距离父视图左侧100 view1宽度最小是100 距离父视图右侧是100
竖向：距离父视图顶部150 view1的高度是40
可视化语言
H:|-100-[view1(>=100)]-100-|
V:|-150-[view1(40)]
view2:
中国语言
横向：距离父视图左侧100 view1宽度最小是100 距离父视图右侧是100
竖向：距离view1 50 view2的高度和view1相同
可视化语言：
H:|-100-[view1(>=100)]-100-|
V:[view1]-50-[view2(view1)]
*/
//view1
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
//view2
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
//利用封装好的创建视图的方法添加约束
- (void)demo2{
UIView *view1 = [self createView:@"UIView" addToView:self.view];
view1.backgroundColor = [UIColor orangeColor];
UIView *view2 = [self createView:@"UIView" addToView:self.view];
view2.backgroundColor = [UIColor redColor];
//2.绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//3.添加约束
/*
view1：
中国语言
横向：距离父视图左侧100 view1宽度最小是100 距离父视图右侧是100
竖向：距离父视图顶部150 view1的高度是40
可视化语言
H:|-100-[view1(>=100)]-100-|
V:|-150-[view1(40)]
view2:
中国语言
横向：距离父视图左侧100 view1宽度最小是100 距离父视图右侧是100
竖向：距离view1 50 view2的高度和view1相同
可视化语言：
H:|-100-[view1(>=100)]-100-|
V:[view1]-50-[view2(view1)]
*/
//view1
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
//view2
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
/**
* 创建视图的方法
*
* @param view 需要创建视图的类名字符串
* @param sView 添加到的目标父视图
*
* @return 创建好并添加到父视图上的视图
*/
- (UIView *)createView:(NSString *)view addToView:(UIView *)sView{
UIView *myView = [[NSClassFromString(view) alloc]init];
myView.translatesAutoresizingMaskIntoConstraints= NO;
[sView addSubview:myView];
return myView;
}
//普通的添加约束
- (void)demo1{
UIView *view = [[UIView alloc]init];
view.backgroundColor = [UIColor cyanColor];
//1.禁用
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
//2.绑定视图和字符串
NSDictionary *views = NSDictionaryOfVariableBindings(view);
//3.添加约束
/**
*VisualFormat:VFL 语句
*options:基于哪一个选项 (基于哪个方向去计算布局)
*metrics:绑定数值（NSNumber）与字符串
*views:绑定视图与字符串的
*/
/*
中国语言：
横向：距离父视图左侧100 视图本身的宽度最小是100 距离父视图右侧是100
竖向：距离父视图顶部150 视图本身高度是40
可视化语言：
H:|-100-[view(>=100)]-100-|
V:|-150-[view(40)]
*/
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
@end
