浅谈Autolayout-02代码实现Autolayout

代码实现Autolayout

• 用代码生成的控件，就不能使用Storyboard，必须使用代码才能实现Autolayout。

代码实现Autolayout的步骤

• 利用NSLayoutConstraint类创建具体的约束对象
• 添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点

• 要先禁止autoresizing功能，设置view的下面属性为NO

- view.translatesAutoresizingMaskIntoConstraints = NO;

• 添加约束之前，一定要保证相关控件都已经在各自的父控件上
• 不用再给view设置frame

约束类：NSLayoutConstraint

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

• 创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

• view1 ：要约束的控件
• attr1 ：约束的类型（做怎样的约束）
• relation ：与参照控件之间的关系
• view2 ：参照的控件
• attr2 ：约束的类型（做怎样的约束）
• multiplier ：乘数
• c ：常量

自动布局的核心计算公式

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

添加约束的规则

• 在创建约束之后，需要将其添加到作用的view上
  在添加时要注意目标view需要遵循以下规则：
  1）对于两个同层级view之间的约束关系，添加到它们的父view上

  2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
  3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

用代码实现如下效果

• 竖屏
  
• 横屏
  
• ViewController.m 文件源代码

////  ViewController.m//  01-w33-代码实现Autolayout////  Created by Kavee DJ on 16/5/11.//  Copyright © 2016年 Kavee DJ. All rights reserved.//#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    // 不要将AutoresizingMask转为Autolayout的约束    blueView.translatesAutoresizingMaskIntoConstraints = NO;    [self.view addSubview:blueView];    UIView *redView = [[UIView alloc] init];    redView.backgroundColor = [UIColor redColor];    // 不要将AutoresizingMask转为Autolayout的约束    redView.translatesAutoresizingMaskIntoConstraints = NO;    [self.view addSubview:redView];    /**     *  蓝色View     */    // 添加宽度约束：100    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];    [blueView addConstraint:widthConstraint];    // 添加高度约束：40    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];    [blueView addConstraint:heightConstraint];    // 添加左边约束：blueView的左边距离父控件左边有20的间距    NSLayoutConstraint *leftContraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];    [self.view addConstraint:leftContraint];    // 添加右边约束：blueView的右边距离父控件右边有20的间距    NSLayoutConstraint *rightContraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];    [self.view addConstraint:rightContraint];    // 添加顶部约束：blueView的顶部距离父控件顶部有20的距离    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];    [self.view addConstraint:topConstraint];    /**     *  红色     */    // 添加高度约束：蓝色等高    NSLayoutConstraint *heightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];    [self.view addConstraint:heightConstraint2];    //添加左边约束：redView的左边 == 父控件的中心x    NSLayoutConstraint *leftConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];    [self.view addConstraint:leftConstraint2];    // 添加顶部约束：redView的顶部距离blueView的地步有20的间距    NSLayoutConstraint *topConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];    [self.view addConstraint:topConstraint2];    // 添加右边约束：redView的右边 == blueView的右边    NSLayoutConstraint *rightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];    [self.view addConstraint:rightConstraint2];}@end