iOS_AutoLayout

1、使用代码创建AutoLayout
必须先禁用autoresizing
/**
 *  某个控件在父控件中居中
 */
- (void)centerTest
{
    // 1.添加控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 2.添加约束
    // 关闭autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    /**
     宽高:100
     位置:在父控件中居中
     */
    // blueView的width == 100
    NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];
    [blueView addConstraint:width];
    
    // blueView的height == 100
    NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];
    [blueView addConstraint:height];
    
    // blueView的CenterX == self.view的CenterX * 1.0 + 0.0
    NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
    [self.view addConstraint:centerX];
    
    // blueView的CenterY == self.view的CenterY * 1.0 + 0.0
    NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];
    [self.view addConstraint:centerY];
}


技术分享
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.添加控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 2.约束蓝色
    // 2.1.高度
    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];
    [blueView addConstraint:blueHeight];
    // 2.2.左边间距
    CGFloat margin = 20;
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];
    [self.view addConstraint:blueLeft];
    // 2.3.顶部间距
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];
    [self.view addConstraint:blueTop];
    // 2.4.右边间距
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];
    [self.view addConstraint:blueRight];
    
    // 3.约束红色
    // 3.1.让红色右边 == 蓝色右边
    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
    [self.view addConstraint:redRight];

    // 3.2.让红色高度 == 蓝色高度
    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:redHeight];
    
    // 3.3.让红色顶部 == 蓝色底部 + 间距
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];
    [self.view addConstraint:redTop];
    
    // 3.4.让红色宽度 == 蓝色宽度 * 0.5
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:redWidth];
}


技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
2、使用VFL语言创建AutoLayout中的约束
示例1的效果和代码如下:
技术分享
// 顶部一个blueView 下面一个redView,其中redView的左边和blueView的中心对齐
- (void)VFLtest1
{
    // 1.添加控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 2.VFL生成约束,注意,对象必须用[]括起来
    NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:conts];
    
    NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:conts2];
    
    // 3.注意,VFL暂时不支持 a = b*0.5这样的语法
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:redWidth];
}


示例2的效果和代码   如下:
技术分享
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.添加控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 2.VFL生成约束,注意使用下面的宏,必须保证键值对的名称一样
    NSDictionary *mertrics = @{@"margin" : @20}; // 参数\数值
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
    
    NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:@{@"blueHeight" : @40, @"margin" : @20} views:views];
    [self.view addConstraints:conts];
    [self.view addConstraints:conts2];
}


技术分享
技术分享
技术分享
技术分享
技术分享
3、使用AutoLayout中的约束创建动画
将storyboard中的约束 拖到.m文件中,使之成为IBOutlet对象,例如:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftMarginConstraint;

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *widthConstraint;

当事件触发时,改变其constant值,然后调用约束所在的对象的 layoutIfNeeded方法,固定的~ 例如:

self.leftMarginConstraint.constant = 100;

    self.widthConstraint.constant = 200;

[UIView animateWithDuration:2.0 animations:^{

        [self.view layoutIfNeeded];

        [self.redView layoutIfNeeded];

    }];


4、建议上边距 使用Top Layout Guide,即状态栏下边线,因为iOS6是以状态栏下边线为原点,而iOS7以上是以屏幕的左上角为原点



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。