IOS - 自动布局

简介

在 iOS 6.0中引入的自动布局，我们只能支持6.0和更高的部署目标。它可以帮助我们创建接口，可用于多个方向和多个设备。

我们例子的目标

我们将添加两个按钮，将屏幕的中心一定距离放置。我们也将尝试将放置有一定距离，从上面的按钮，添加一个可调整大小的文本字段。

我们的方案

我们将添加文本字段和两个按钮的代码，随着它们的约束。每个UI元素的约束将被创建并添加超级视图，并为我们添加的每一个UI元素，以获得所需的结果，我们将关闭自动调整大小。

涉及的步骤

1. 创建一个简单的应用程序。

2.我们将只修改 ViewController.m 的文件内容，它是如下：

#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIButton *leftButton;
@property (nonatomic, strong) UIButton *rightButton;
@property (nonatomic, strong) UITextField *textfield;

@end
@implementation ViewController

- (void)viewDidLoad{
    [super viewDidLoad];
    UIView *superview = self.view;
    /*1. Create leftButton and add to our view*/
    self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.leftButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal];
    [self.view addSubview:self.leftButton];    
    /* 2. Constraint to position LeftButton's X*/
    NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
    constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];
    /* 3. Constraint to position LeftButton's Y*/
    NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint 
    constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY 
    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
    NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];   
    /* 4. Add the constraints to button's superview*/
    [superview addConstraints:@[ leftButtonXConstraint,
    leftButtonYConstraint]];    
    /*5. Create rightButton and add to our view*/
    self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.rightButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal];
    [self.view addSubview:self.rightButton];    
    /*6. Constraint to position RightButton's X*/
    NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint 
    constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f];
    /*7. Constraint to position RightButton's Y*/
    rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh;
    NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint 
    constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
    [superview addConstraints:@[centerYMyConstraint,
    rightButtonXConstraint]];
   //8. Add Text field
    self.textfield = [[UITextField alloc]initWithFrame:
    CGRectMake(0, 100, 100, 30)];
    self.textfield.borderStyle = UITextBorderStyleRoundedRect;
    self.textfield.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.textfield];
    //9. Text field Constraints
    NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview 
    attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f];
    NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton 
    attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f];
    NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft 
    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
    NSLayoutAttributeLeft multiplier:1.0 constant:30.0f];
    NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeRight 
    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
    NSLayoutAttributeRight multiplier:1.0 constant:-30.0f];
    [superview addConstraints:@[textFieldBottomConstraint ,
    textFieldLeftConstraint, textFieldRightConstraint, 
    textFieldTopConstraint]];   
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

我们在这里做的是什么呢？

在标有1，5和8的步骤，我们只是以编程方式添加两个按钮和一个文本字段。在其余的步骤中，我们创建约束，这些约束各自的超视图(supper view)，这实际上是self.view。当看着左边的按钮，如下图所示的约束之一

    NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
    constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

实际上，我们有constraintWithItem 和 toItem之间决定的UI元素，我们创建约束。该属性决定在什么样的基础上，这两个元素联系在一起。关系决定属性有多少元素之间的效果。乘法器的乘法系数和常数将被添加到乘数。在这里，X的左键总是大于或等于-60像素相对于超视图的中心。同样，其他约束的定义。

输出

现在，当我们运行应用程序在iPhone模拟器，我们将得到下面的输出。

当我们改变方向的模拟器观察方向，我们将得到下面的输出。

当我们iPhone 5的模拟器上运行相同的应用程序，我们将得到下面的输出。

当我们改变方向的模拟器观察方向，我们将得到下面的输出。