iOS編程(雙語版)-視圖-Autolayout代碼初步

一談到Autolayout,初學者確定想到的是IB中使用拖拽啊，pin啊各類鼠標操做來進行添加各類約束。

今天咱們要聊得是如何利用代碼來添加視圖間的約束。

咱們來看一個例子：

(Objective-C代碼)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(100, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [UIView new];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
UIView* v3 = [UIView new];
v3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
[mainview addSubview: v1];
[v1 addSubview: v2];
[v1 addSubview: v3];

v2.translatesAutoresizingMaskIntoConstraints = NO;
v3.translatesAutoresizingMaskIntoConstraints = NO;

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeLeft
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeLeft
        multiplier:1 constant:0]];
        
[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeRight
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeRight
        multiplier:1 constant:0]];
    
[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeTop
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeTop
        multiplier:1 constant:0]];

[v2 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeHeight
        relatedBy:0
        toItem:nil attribute:0
        multiplier:1 constant:10]];

[v3 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeWidth
        relatedBy:0
        toItem:nil attribute:0
        multiplier:1 constant:20]];

[v3 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeHeight
        relatedBy:0
        toItem:nil attribute:0
        multiplier:1 constant:20]];

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeRight
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeRight
        multiplier:1 constant:0]];

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeBottom
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeBottom
        multiplier:1 constant:0]];

(Swift代碼 iOS9)

let v1 = UIView(frame:CGRectMake(100, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView()
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
let v3 = UIView()
v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
v1.addSubview(v3)

v2.translatesAutoresizingMaskIntoConstraints = false
v3.translatesAutoresizingMaskIntoConstraints = false

v1.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Leading,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Leading,
        multiplier: 1, constant: 0)
)

v1.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Trailing,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Trailing,
        multiplier: 1, constant: 0)
)

v1.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Top,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Top,
        multiplier: 1, constant: 0)
)

v2.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Height,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1, constant: 10)
)

v3.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Width,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1, constant: 20)
)

v3.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Height,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1, constant: 20)
)

v1.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Trailing,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Trailing,
        multiplier: 1, constant: 0)
)

v1.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Bottom,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Bottom,
        multiplier: 1, constant: 0)
)

運行效果:

(豎屏)

(橫屏)

 看了以上代碼後，你確定要瘋了，那麼多約束。。。

下面，咱們就來逐一分析：

 咱們先來看一下這段代碼

OC

v3 = [[UIView alloc] initWithFrame:CGRectMake(v1.bounds.size.width-20,
    v1.bounds.size.height-20,
    20, 20)];

Swift

let v3 = UIView(frame:CGRectMake(
    v1.bounds.width-20, v1.bounds.height-20, 20, 20))

 這段代碼很清楚地表達了：v3是寬高各20，而且位置在v1的右下角，其原點距離v1的右下角

座標x,y各偏移20，也就是咱們上圖中看到的大紅色矩形。

 

約束的API語句有時候是很冗長的，看上去很難懂。

爲此，Apple發明了可視化格式(Visual Format)來便於理解。

看看下面的這個例子：

@"V:|[v2(10)]"

上面的表達式中，V:表示是垂直方向上的約束，同理，H:表示水平方向上約束。

管道符|表明父視圖。

中括號內是要添加約束的視圖變量名。

因此，這裏的約束清晰地表達： v2和父視圖頂端對齊，而且v2的高度是10。