【轉】IOS AutoLayout詳解（三）用代碼實現(附Demo下載)

時間 2019-11-12

標籤 ios autolayout 詳解代碼實現 demo 下載欄目 iOS 简体版

原文原文鏈接

轉載自：blog.csdn.net/hello_hwc
IOS SDK詳解php

前言：css

在開發的過程當中，有時候建立View沒辦法經過Storyboard來進行，又須要AutoLayout，這時候用代碼建立就派上用場了，這篇文章我會詳解用代碼實現的兩個主要函數，而後講解一個Demo，最後Demo我會附上下載連接。html

用代碼實現的函數一

第一個函數經過描述兩個view的參考線之間的約束來建立約束，例若有一個label和一個textfield。約束這樣描述ios

label的右邊參考線和textfield的右邊參考線距離恆定爲10markdown

函數app

1 + (instancetype)constraintWithItem:(id)view1
2                          attribute:(NSLayoutAttribute)attr1
3                          relatedBy:(NSLayoutRelation)relation
4                             toItem:(id)view2
5                          attribute:(NSLayoutAttribute)attr2
6                         multiplier:(CGFloat)multiplier
7                           constant:(CGFloat)c

參數的意義：

參數	意義
view1	左手邊的受約束視圖
attr1	左手邊的受約束視圖的參考參數
relation	約束的關係
view2	右手邊的受約束視圖
multiplier	The constant multiplied with the attribute on the right-hand side of the constraint as part of getting the modified attribute.
attr2	The constant added to the multiplied attribute value on the right-hand side of the constraint to yield the final modified attribute.

一般，multiplier的值爲1.0。這個不太好翻譯，我舉個例子就懂了。ide

舉個例子
若是，我想要一個View的寬度爲另外一個View的一半，則函數

1 [NSLayoutConstraint
2       constraintWithItem:self.view1
3                attribute:NSLayoutAttributeWidth
4                relatedBy:NSLayoutRelationEqual
5                   toItem:self.view2
6                attribute:NSLayoutAttributeWidth
7               multiplier:0.5
8                 constant:0.0]];

這裏有個計算公式ui

attribute1 == multiplier × attribute2 + constant
也就是說，在這裏
view1.width = view2.width * 0.5 + 0.0url

這樣，更可以理解上述函數中兩個參數的含義了吧。
再舉個例子：
我想讓一個View距離右上角（30，30）而且保持本身的長寬不變。實現代碼

 1   NSLayoutConstraint * h_c = [NSLayoutConstraint constraintWithItem:self.view
 2                                                             attribute:NSLayoutAttributeRight
 3                                                             relatedBy:NSLayoutRelationEqual
 4                                                                toItem:self.testview
 5                                                             attribute:NSLayoutAttributeRight
 6                                                            multiplier:1.0
 7                                                              constant:30];
 8     NSLayoutConstraint * v_c = [NSLayoutConstraint constraintWithItem:self.testview
 9                                                             attribute:NSLayoutAttributeTop
10                                                             relatedBy:NSLayoutRelationEqual
11                                                                toItem:self.view
12                                                             attribute:NSLayoutAttributeTop
13                                                            multiplier:1.0
14                                                              constant:30];
15     NSLayoutConstraint * e_w = [NSLayoutConstraint constraintWithItem:self.testview
16                                                             attribute:NSLayoutAttributeWidth
17                                                             relatedBy:NSLayoutRelationEqual
18                                                                toItem:nil
19                                                             attribute:NSLayoutAttributeWidth
20                                                            multiplier:1.0 constant:CGRectGetWidth(self.testview.frame)];
21     NSLayoutConstraint * e_h = [NSLayoutConstraint constraintWithItem:self.testview
22                                                             attribute:NSLayoutAttributeHeight
23                                                             relatedBy:NSLayoutRelationEqual
24                                                                toItem:nil
25                                                             attribute:NSLayoutAttributeHeight
26                                                            multiplier:1.0 constant:CGRectGetHeight(self.testview.frame)];
27     [self.view addConstraints:@[h_c,v_c,e_h,e_w]];

效果如圖:

用代碼實現的方法二

方法二使用可視化語言VFL

可視化語言的Apple文檔連接以下 :
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html

利用到的函數爲:

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views

參數的的意義

參數	意義
format	NSString類型的可視語言描述
opts	描述可視化語言中對象的layout方向
metrics	描述可視化語言中String表明的常量值，字典類型，key爲String，value爲NSNumber類型
views	描述可視化語言中String表明的對象，字典類型，key爲String，value爲layout約束的對象

舉個例子就懂了，例如，惰性初始化下面一個View，不難看出，這個View我沒有指定大小，大小我要用約束來建立

 1 -(UIView *)testview{
 2     if (!_testview) {
 3         _testview = [[UIView alloc] init];
 4         _testview.backgroundColor = [UIColor blueColor];
 5     }
 6     return _testview;
 7 }
 8 
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11     [self.view addSubview:self.testview];
12 }

而後，我用約束的方式，讓View的大小恆定爲100＊100

 1    NSArray *c_v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testview(==100)]"
 2                                                                     options:0
 3                                                                     metrics:nil
 4                                                                       views:@{@"testview":self.testview}];
 5 
 6     NSArray *c_h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testview(==100)]"
 7                                                                     options:0
 8                                                                     metrics:nil
 9                                                                       views:@{@"testview":self.testview}];
10 
11     [self.view addConstraints:c_h];
12     [self.view addConstraints:c_v];

而後，我再把View約束到距離右上角（30＊30）的位置

1     NSArray *l_v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-hdistance-[testview]"
2                                                            options:0
3                                                            metrics:@{@"hdistance":@(30)}
4                                                              views:@{@"testview":self.testview}];
5 
6     NSArray *l_h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testview]-vdistance-|"
7                                                            options:0
8                                                            metrics:@{@"vdistance":@(30)}
9                                                              views:@{@"testview":self.testview}];

這樣，約束後的效果如圖 :

關於可視化語言的建議:

我的而言，比較喜歡用可視化語言的方式來出建立約束。並且也不用刻意去學，一開始使用的時候打開一個連接放在旁邊，不會的時候參考下。多用幾回，天然就會了。

三一個Demo

我用上述兩種方式實現相似的同一組約束，效果以下 :

這裏，ImageView的中心始終在view的中心，兩個button分別距離ImageView距離爲標準距離8，而且分別左右對齊。

用方式一實現的代碼：

 1 [self.view addSubview:self.imageview];
 2     [self.imageview setTranslatesAutoresizingMaskIntoConstraints:NO];
 3     NSLayoutConstraint * hc = [NSLayoutConstraint
 4                                constraintWithItem:self.view
 5                                attribute:NSLayoutAttributeCenterX
 6                                relatedBy:NSLayoutRelationEqual
 7                                toItem:self.imageview
 8                                attribute:NSLayoutAttributeCenterX
 9                                multiplier:1.0
10                                constant:0.0];
11     NSLayoutConstraint * vc = [NSLayoutConstraint constraintWithItem:self.view
12                                                            attribute:NSLayoutAttributeCenterY
13                                                            relatedBy:NSLayoutRelationEqual
14                                                               toItem:self.imageview
15                                                            attribute:NSLayoutAttributeCenterY
16                                                           multiplier:1.0
17                                                             constant:0.0];
18     NSLayoutConstraint * equalW = [NSLayoutConstraint constraintWithItem:self.imageview
19                                                                attribute:NSLayoutAttributeWidth
20                                                                relatedBy:NSLayoutRelationEqual
21                                                                   toItem:nil
22                                                                attribute:0
23                                                               multiplier:1.0
24                                                                 constant:CGRectGetWidth(self.imageview.frame)];
25     NSLayoutConstraint * equalH = [NSLayoutConstraint constraintWithItem:self.imageview
26                                                                attribute:NSLayoutAttributeHeight
27                                                                relatedBy:NSLayoutRelationEqual
28                                                                   toItem:nil
29                                                                attribute:0
30                                                               multiplier:1.0
31                                                                 constant:CGRectGetHeight(self.imageview.frame)];
32     [self.view addConstraints:@[hc,vc,equalH,equalW]];
33      [self.view addSubview:self.button_1];
34      [self.button_1 setTranslatesAutoresizingMaskIntoConstraints:NO];
35     NSLayoutConstraint * b1_image_v = [NSLayoutConstraint constraintWithItem:self.imageview
36                                                                    attribute:NSLayoutAttributeTop
37                                                                    relatedBy:NSLayoutRelationEqual
38                                                                       toItem:self.button_1
39                                                                    attribute:NSLayoutAttributeBottom
40                                                                   multiplier:1.0
41                                                                     constant:8.0];
42     NSLayoutConstraint * b1_image_h = [NSLayoutConstraint constraintWithItem:self.button_1
43                                                                    attribute:NSLayoutAttributeLeft
44                                                                    relatedBy:NSLayoutRelationEqual
45                                                                       toItem:self.imageview
46                                                                    attribute:NSLayoutAttributeLeft
47                                                                   multiplier:1.0
48                                                                     constant:0.0];
49 
50     [self.view addConstraints:@[b1_image_h,b1_image_v]];
51 
52     [self.view addSubview:self.button_2];
53     [self.button_2 setTranslatesAutoresizingMaskIntoConstraints:NO];
54     NSLayoutConstraint * b2_image_v = [NSLayoutConstraint constraintWithItem:self.button_2
55                                                                    attribute:NSLayoutAttributeTop
56                                                                    relatedBy:NSLayoutRelationEqual
57                                                                       toItem:self.imageview
58                                                                    attribute: NSLayoutAttributeBottom
59                                                                   multiplier:1.0
60                                                                     constant:8.0];
61     NSLayoutConstraint * b2_image_h = [NSLayoutConstraint constraintWithItem:self.button_2
62                                                                    attribute:NSLayoutAttributeRight
63                                                                    relatedBy:NSLayoutRelationEqual
64                                                                       toItem:self.imageview
65                                                                    attribute:NSLayoutAttributeRight
66                                                                   multiplier:1.0
67                                                                     constant:0.0];
68 
69     [self.view addConstraints:@[b2_image_h,b2_image_v]];


用可視化語言VFL的代碼

 1 [self.imageview setTranslatesAutoresizingMaskIntoConstraints:NO];
 2     NSArray * v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[superview]-(<=1)-[imageview]"
 3                                                           options:NSLayoutFormatAlignAllCenterX
 4                                                           metrics:nil
 5                                                             views:@{@"superview":self.view,@"imageview":self.imageview}];
 6     NSArray * h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[superview]-(<=1)-[imageview]"
 7                                                           options:NSLayoutFormatAlignAllCenterY
 8                                                           metrics:nil
 9                                                             views:@{@"superview":self.view,@"imageview":self.imageview}];
10     NSArray * ew = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageview(==imageviewWidth)]"
11                                                            options:0
12                                                            metrics:@{@"imageviewWidth":@(CGRectGetHeight(self.imageview.frame))}
13                                                              views:@{@"imageview":self.imageview}];
14     NSArray * eh = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageview(==imageviewHeight)]"
15                                                            options:0
16                                                            metrics:@{@"imageviewHeight":@(CGRectGetWidth(self.imageview.frame))}
17                                                              views:@{@"imageview":self.imageview}];
18     [self.view addConstraints:v];
19     [self.view addConstraints:h];
20     [self.view addConstraints:ew];
21     [self.view addConstraints:eh];
22 
23     [self.view addSubview:self.button_1];
24     [self.button_1 setTranslatesAutoresizingMaskIntoConstraints:NO];
25     NSArray * b1_image = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button1]-[imageview]"
26                                                                    options:NSLayoutFormatAlignAllLeft
27                                                                    metrics:nil
28                                                                      views:@{@"button1":self.button_1,
29                                                                              @"imageview":self.imageview}];
30     [self.view addConstraints:b1_image];
31 
32 
33     [self.view addSubview:self.button_2];
34     [self.button_2 setTranslatesAutoresizingMaskIntoConstraints:NO];
35     NSArray * b2_image = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button2]-[imageview]"
36                                                                    options:NSLayoutFormatAlignAllRight
37                                                                    metrics:nil
38                                                                      views:@{@"button2":self.button_2,
39                                                                              @"imageview":self.imageview}];
40     [self.view addConstraints:b2_image];