iOS开发 - 第06篇 - 实用技术 - 01 - Auto Layout

1、关于Auto Layout使用的博客整理：

1、开始iOS 7中自动布局教程

原文(英文)：

Beginning Auto Layout Tutorial in iOS 7: Part 1

Beginning Auto Layout Tutorial in iOS 7: Part 2

翻译：

开始iOS 7中自动布局教程(一)

开始iOS 7中自动布局教程(二)

2、Auto Layout 入门教程

Auto Layout 入门教程

Auto Layout 入门教学

3、Auto Layout自动布局教程

Auto Layout自动布局教程(1)-浅谈Auto Layout

Auto Layout自动布局教程(2)-初识Auto Layout

Auto Layout自动布局教程(3)-等宽等高等中心

Auto Layout自动布局教程(4)-Label文字自动适应大小宽度

Auto Layout自动布局教程(5)-修改约束的值 & 延迟加载

Auto Layout自动布局教程(6)-淘宝客户端iPhone 6/6 Plus设计适配方案

Auto Layout自动布局教程(7)-底部顶部baseLine基线对齐

Auto Layout自动布局教程(8)-VisualFormat可视化格式语言创建约束

Auto Layout自动布局教程(9)-VisualFormat可视化格式字符串构成

4、Auto Layout 使用心得系列

Auto Layout 使用心得系列

5、Auto Layout 界面自动布局系列

Auto Layout 界面自动布局系列

2、代码实现Auto Layout(了解即可)

代码实现Auto Layout的步骤：

1>利用NSLayoutConstraint类创建具体的约束对象

2>添加约束对象到相应的view上

-(void)addConstraint:(NSLayoutConstraint *)constraint;

-(void)addConstraints:(NSArray *)constraints;

注1：代码实现Auto Layout的注意要先禁止autoresizing功能，设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints= NO;

注2：添加约束之前，一定要保证相关控件都已经在各自的父控件上

注3：不用再给view设置frame

一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法

+(id)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relationtoItem:(id)view2 attribute:(NSLayoutAttribute)attr2multiplier:(CGFloat)multiplier constant:(CGFloat)c;

view1：要约束的控件

attr1：约束的类型（做怎样的约束）

relation：与参照控件之间的关系

view2：参照的控件

attr2：约束的类型（做怎样的约束）

multiplier：乘数

c：常量

注：自动布局有个核心公式

obj1.property1 =（obj2.property2 * multiplier）+ constant value

如让一个View居中显示代码实现如下

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

3、补充

3.1 UILabel使用Auto Layout

3.2 使用Auto Layout制作动画

在修改了约束之后，只要执行下面代码，就能做动画效果

[UIViewanimateWithDuration:1.0 animations:^{

    [添加了约束的viewlayoutIfNeeded];

}];

@interface ViewController ()

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftMargin;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *width;
@property (weak, nonatomic) IBOutlet UIView *redView;

@end

@implementation ViewController

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    self.leftMargin.constant = 100;
    self.width.constant = 200;
    
    [UIView animateWithDuration:2.0 animations:^{
        [self.view layoutIfNeeded];
        [self.redView layoutIfNeeded];
    }];
}
@end