ios中autolayout的使用

 

@implementation MJViewController

 

- (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];

}

 

- (void)test1

{

    // 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];

    

    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];

    [self.view addConstraint:redWidth];

}

 

@end

 

 

@implementation MJViewController

 

- (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];

}

 

/**

 *  某个控件居中

 */

- (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];

}

@end