iOS UI-自动布局（AutoLayout）

  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