IOS-自動レイアウトとビュー言語1

一、紹介（Introduction）

アップルの開発では、コンポーネントのレイアウトに頭が痛くなることがよくあります.私たちが困っているのは、同じコードでコンポーネントのレイアウトをさまざまなプラットフォーム(iphone,ipad)に表示させる効果が同じであることです.りんごは簡単になりました画面の真ん中にbuttonを配置したい場合は、-Button’s centerと簡単に説明できます.x is euqal to view’s center.x - Button’s center.y is equal to view’s center.yアップルはUIコンポーネントの大部分が以下の簡単な公示で表すことができることを発見した:object 1.property 1=(object 2.property 2*multiplier)+constant valueの例を挙げると、この式を使用して、ボタンをどのように表示するかを説明できます.

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

上記の式を利用すると、IOSインタフェースの開発で驚くべき効果を実現することができます.ios sdkではNSLayoutConstraintというクラスが提供されています.各コンストレイントは、クラスで作成できます.リンゴを干して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にコンストレイントを作成できます.たとえば、同じビューに2つのbuttonがある場合、垂直方向の距離を100ピクセルにするには、共通の祖先(親ビュー)にコンストレイントを追加するコンストレイントを作成する必要があります.ルールは次のとおりです.

2 2 2つのviewをコンストレイントする場合、2つのviewが存在する座標に共通の親ビューがある場合は、コンストレイントを親viewに追加する必要があります.

ビューとその親ビューにコンストレイントを追加する場合は、コンストレイントを親ビューに追加する必要があります.

2 2 2つのviewにコンストレイントを追加する場合、共通の親viewがない場合は、コンストレイントを祖先viewに追加する必要があります.図:

二、画面の真ん中にUIコンポーネントを置く

Solution
Create 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オブジェクトの作成は、その式に完全に基づいていることがわかります.