IOS-自动布局和视图化语言1

一、介绍（Introduction）

在苹果开发中，我们经常会因为组件的布局而头疼不已。我们所头疼的就是用同一套代码就能让组件的布局在各种平台上(iphone,ipad)显示的效果都相同。苹果让这变得很简单—-AutoLayout.
如果你想让一个button放在一个屏幕的中间，那么这中现象可以简单描述为：
- Button’s center.x is euqal to view’s center.x
- Button’s center.y is equal to view’s center.y
苹果发现大部分的UI组件都可以用以下简单的公示来表示：
object1.property1 = (object2.property2 * multiplier) + constant value
举个例子，利用这个公式，我们可以描述让一个按钮咋视图的中间：

button.center.x = (button.superview.center.x * 1) + 0button.center.y = (button.superview.center.y * 1) + 0

利用上面的公式，你可以在IOS界面开发中实现惊人的效果。在ios sdk中提供了一个叫做NSLayoutConstraint的类。每一个约束你都可以用该类进行创建。
下面晒上苹果原话：
Constraints can be created by cross views. For instance, if you have two buttons on one view and you want them to be 100 points apart vertically, you need to create the con‐ straint for this rule but add it to the common ancestor of both the buttons, which is perhaps the view that owns both of them. These are the rules:
• If the constraint is between two views that sit on a common immediate parent view, meaning that both these views have the same superview, add the constraints to the parent view.
• If the constraint is between a view and its parent view, add the constraint to the parent view.
• If the constraint is between two views that do not share the same parent view, add the constraint to the common ancestor of the views.
可以为每一个view创建一个约束。举例来说：如果有两个button在同一个视图中，你想让他们在垂直方向的距离为100像素，你需要创建一个约束，把这个约束加到他们的共同祖先（父视图）上。下面就是规则：

• 如果要约束两个view,这两个view所在的坐标中有共同的父视view，那就应该把约束加到它们的父view上。
• 如果要在一个view和他的父view上添加约束，则应该把约束添加到他的父view上。
• 如果要为两个view添加约束，它们并没有共同的父view，那么应该把约束添加到他们的祖先view上。
  如图：
  

二、让一个UI组件放到屏幕的中间

SolutionCreate two constraints: one to align the center.x position of the target view on its su‐ perview’s center.x position and the other to align the center.y position of the target view on its superview’s center.y position.

下面是代码：

////  ViewController.m//  AutoLayoutDemo////  Created by zhangqi on 11/12/2015.//  Copyright (c) 2015 zhangqi. All rights reserved.//#import "ViewController.h"@interface ViewController ()@property (nonatomic,strong)UIButton *button;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // AutoLayout Demo code1:  Make a button in the center ////  ViewController.m//  AutoLayoutDemo////  Created by zhangqi on 11/12/2015.//  Copyright (c) 2015 zhangqi. All rights reserved.//#import "ViewController.h"@interface ViewController ()@property (nonatomic,strong)UIButton *button;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // AutoLayout Demo code1:  Make a button in the center of the view    /*     Apple noticed that a lot of the positioning of UI components can be solved with a simple formula:     object1.property1 = (object2.property2 * multiplier) + constant value     For instance, using this formula, I could simply center a button on its superview like so:     button.center.x = (button.superview.center.x * 1) + 0     button.center.y = (button.superview.center.y * 1) + 0     */    /* 1) create our button */    self.button = [UIButton buttonWithType:UIButtonTypeSystem];    self.button.translatesAutoresizingMaskIntoConstraints = NO;    [self.button setTitle:@"Button" forState:UIControlStateNormal];    self.button.backgroundColor = [UIColor grayColor];    [self.view addSubview:self.button];    UIView *superview = self.button.superview;    /* 2) Create the constraint to put the button horizontally in the center */    NSLayoutConstraint *centerXConstraint =    [NSLayoutConstraint constraintWithItem:self.button   //object1                                 attribute:NSLayoutAttributeCenterX   // property1                                 relatedBy:NSLayoutRelationEqual    // =                                    toItem:superview    // object2                                 attribute:NSLayoutAttributeCenterX  // property2                                multiplier:1.0f    // multiplier                                  constant:0.0f];  // constant    NSLayoutConstraint *centerYConstraint =    [NSLayoutConstraint constraintWithItem:self.button                                 attribute:NSLayoutAttributeCenterY                                 relatedBy:NSLayoutRelationEqual                                    toItem:superview                                 attribute:NSLayoutAttributeCenterY                                multiplier:1.0f                                  constant:0.0f];    /* Add the constraints to the superview of the button */    [superview addConstraints:@[centerXConstraint,centerYConstraint]];   }- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

可以看到NSLayoutConstrant对象的创建完全是根据那个公式来的。