- 1）AutoLayout
通过约束的方式进行布局，一个条件及代表一个约束对象，如果：视图距离父视图左边20个点，这就是一个条件，我们要创建一个对应的约束对象使用
使用时需要2个条件
1.约束要完整（能够根据约束计算出完成的x y w h）
2.约束时不能冲突
如：视图宽50 高50 父视图 宽400 高400
冲突的约束条件：
视图距离父视图左边20个点
视图在父视图中居中显示 - 2）约束对象
约束类型 NSLayoutConstrant
创建好的约束对象需添加到父视图中 - 3）如何创建约束对象
方法一：万能公式法
任何一个视图的约束都可以由下面的等式描述出来，就是把文字性的描述变成等式中的参数
view1.attr1<relation>view2.attr2 * multiplier + constant
文字性描述：视图1的右边距离视图的左边为20个点
view.right = view2.left1+(-20)
文字描述：视图距离父视图的顶部为20个点
view.top = superView.top1+20
文字性描述：视图的宽度是父视图宽度的一半加30
view.width = superView.width * 0.5 +30
约束中的等号左边，代表描述的主题，一般叫firstiem
约束中的等号右边，代表参照的视图，一般叫seconditem
multiplier和constant都是为了使等式成立的系数以及偏移量
image.png
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *myView1;
@property (weak, nonatomic) IBOutlet UIView *myView2;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//关闭了 myView1 将 autoresizing 自动转换成 约束对象的 功能
self.myView1.translatesAutoresizingMaskIntoConstraints =NO;
//关闭了 myView2 将 autoresizing 自动转换成 约束对象的 功能
self.myView2.translatesAutoresizingMaskIntoConstraints =NO;
//给 view 创建约束对象 添加到 self.view
/*************myView1的约束**************/
//1.创建左边距约束 myView1.left = self.view.left * 1 + 20
NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
//2.创建上边距约束
NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
//3.创建高边距约束
NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
//4.创建宽度约束
NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
//将创建好的约束条件 添加到 父视图中
[self.view addConstraint:c1];
[self.view addConstraint:c2];
[self.view addConstraint:c3];
[self.view addConstraint:c4];
/*************myView2的约束**************/
//1.创建左边约束
NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeRight multiplier:1 constant:10];
//2.创建顶部约束
NSLayoutConstraint *c6= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
//3.创建高度约束
NSLayoutConstraint *c7= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
//3.创建右边距约束
NSLayoutConstraint *c8= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
[self.view addConstraint:c5];
[self.view addConstraint:c6];
[self.view addConstraint:c7];
[self.view addConstraint:c8];
}
@end
练习
-
要求
A95C46C16EF135FE285BEF8D9FFE2AC6.png
ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *myView1;
@property (weak, nonatomic) IBOutlet UIView *myView2;
@property (weak, nonatomic) IBOutlet UIView *myView3;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.myView1.translatesAutoresizingMaskIntoConstraints = NO;
self.myView2.translatesAutoresizingMaskIntoConstraints = NO;
self.myView3.translatesAutoresizingMaskIntoConstraints = NO;
//myView1
//距离视图左边20点
NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
//距离视图右边20点
NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
//高边距40点
NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
//创建宽度约束
NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:-40];
[self.view addConstraint:c1];
[self.view addConstraint:c2];
[self.view addConstraint:c3];
[self.view addConstraint:c4];
//myView2
//创建宽度约束
NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
//创建高度约束
NSLayoutConstraint *c6 = [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
NSLayoutConstraint *c7= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
NSLayoutConstraint *c8= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[self.view addConstraint:c5];
[self.view addConstraint:c6];
[self.view addConstraint:c7];
[self.view addConstraint:c8];
//myView3
//创建高度约束
NSLayoutConstraint *c9 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
NSLayoutConstraint *c10 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
NSLayoutConstraint *c11 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
NSLayoutConstraint *c12 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-20];
[self.view addConstraints:@[c9,c10,c11,c12]];
}
-
效果
image.png
方法二：VFL法（Visual Format Language）
是一个具有一定格式的字符串，不同的格式能生成不同的约束对象，并且一个字符串能一次性生成很多个约束对象
如何写VFL
1.视图1和视图2之间 间隔30
VFL:[view1]-30-[view2]
2.视图1的宽度为50
VFL:[view1(==50)]或[view(50)]
3..视图1的高度为50
VFL:[view1(==50)]或[view(50)]
4.视图1的宽度为50，视图1和视图2间隔10，视图2的宽度和视图1一样
VFL：[View1(50)]-10-[View2(View1)]
5.视图1的宽度为50，视图1和视图2间隔10，视图2的宽度和视图1一样,视图1距离父视图左边20，视图2距离父视图右边20
VFL：|-20-[View1(50)]-10-[View2(View1)]-20-|
VFL特殊符号的含义：
|代表父视图边缘
H:表示水平方向 （不写默认是水平）
V：表示垂直方向
[] 代表一个子视图
()代表条件（宽或高）
-x-表示间隔为x
-表示标准间隔8
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,strong)UIView *myView1;
@property(nonatomic,strong)UIView *myView2;
@end
@implementation ViewController
-(UIView *)myView1{
if(!_myView1){
_myView1 = [[UIView alloc]init];
_myView1.backgroundColor =[UIColor redColor];
_myView1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:_myView1];
}
return _myView1;
}
-(UIView *)myView2{
if(!_myView2){
_myView2 = [[UIView alloc]init];
_myView2.backgroundColor =[UIColor redColor];
_myView2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:_myView2];
}
return _myView2;
}
-(void)vfl1{
//添加约束
//拼写约束所需的 VFL 字符串内容
NSString *hVFL = @"|-20-[view1]-10-[view2(view1)]-20-|";
NSArray *cs1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"view1":self.myView1,@"view2":self.myView2}];
//将约束数组添加到 父视图中
[self.view addConstraints:cs1];
NSString *vVFL = @"V:|-20-[view1(40)]";
NSArray *cs2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignmentMask metrics:nil views:@{@"view1":self.myView1}];
[self.view addConstraints:cs2];
}
-(void)vfl2{
UIView *myView3 = [[UIView alloc]init];
myView3.backgroundColor = [UIColor orangeColor];
myView3.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:myView3];
UIView *myView4 = [[UIView alloc]init];
myView4.backgroundColor = [UIColor blueColor];
myView4.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:myView4];
//NSDictionaryOfVariableBindings 传入的是 value对象，会根据传入的对象名称自动生成同名的key
NSDictionary *viewsDic = NSDictionaryOfVariableBindings(myView3,myView4);
//创建对照表
NSDictionary *metrics = @{@"left":@20,@"right":@20,@"space":@10,@"height":@40,};
//添加约束
//拼写约束所需的 VFL 字符串内容
NSString *hVFL = @"|-left-[myView3]-space-[myView4(myView3)]-right-|";
NSArray *cs1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:viewsDic];
//将约束数组添加到 父视图中
[self.view addConstraints:cs1];
NSString *vVFL = @"V:|-left-[myView3(height)]";
NSArray *cs2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignmentMask metrics:metrics views:viewsDic];
[self.view addConstraints:cs2];
}
- (void)viewDidLoad {
[super viewDidLoad];
//[self vfl1];
[self vfl2];
}
@end
网友评论