不管是是界面創建約束還是代碼創建約束，蘋果官方提供的方式都比較繁瑣。所以出現了第三方框架。
Masonry 在github地址如下：
https://github.com/SnapKit/Masonry
如果需要通過代碼手動添加約束，Masonry真的是一個不錯的選擇，大大增加開發效率，何樂而不為呢。
Autolayout - Masonry
-
使用步驟
- 添加Masonry文件夾的所有源代碼到項目中
- 添加2個宏、導入主頭文件
1 // 只要添加了這個宏，就不用帶mas_前綴 2 #define MAS_SHORTHAND 3 // 只要添加了這個宏，equalTo就等價於mas_equalTo 4 #define MAS_SHORTHAND_GLOBALS 5 // 這個頭文件一定要放在上面兩個宏的后面 6 #import "Masonry.h"
-
添加約束的方法
1 // 這個方法只會添加新的約束 2 [view makeConstraints:^(MASConstraintMaker *make) { 3 4 }]; 5 6 // 這個方法會將以前的所有約束刪掉，添加新的約束 7 [view remakeConstraints:^(MASConstraintMaker *make) { 8 9 }]; 10 11 // 這個方法將會覆蓋以前的某些特定的約束 12 [view updateConstraints:^(MASConstraintMaker *make) { 13 14 }];
-
約束的類型
1.尺寸：width\height\size 2.邊界：left\leading\right\trailing\top\bottom 3.中心點：center\centerX\centerY 4.邊界：edges -
示例代碼1：
居中顯示1 // 居中顯示 2 UIView *redView = [[UIView alloc] init]; 3 redView.backgroundColor = [UIColor redColor]; 4 [self.view addSubview:redView]; 5 6 // 可以使用三個方法來添加約束。 7 [redView mas_makeConstraints:^(MASConstraintMaker *make) { 8 make.centerX.equalTo(self.view); 9 make.centerY.equalTo(self.view); 10 make.height.equalTo(100); 11 make.width.equalTo(200); 12 }];
-
示例代碼2：
並排位於底部，間距201 //並排位於底部，間距20 2 3 UIView *redView = [[UIView alloc] init]; 4 redView.backgroundColor = [UIColor redColor]; 5 [self.view addSubview:redView]; 6 7 UIView *blueView= [[UIView alloc] init]; 8 blueView.backgroundColor = [UIColor blueColor]; 9 [self.view addSubview:blueView]; 10 11 // 添加約束 12 [redView makeConstraints:^(MASConstraintMaker *make) { 13 make.left.equalTo(self.view.left).offset(20); // 左邊間距20 14 make.right.equalTo(blueView.left).offset(-20); // 右邊和blueView間距20 15 make.bottom.equalTo(self.view.bottom).offset(-20); // 底部間距20 16 17 make.height.equalTo(200); // 高度200 18 19 }]; 20 21 [blueView makeConstraints:^(MASConstraintMaker *make) { 22 make.right.equalTo(self.view.right).offset(-20); // 右邊間距20 23 make.bottom.equalTo(redView.bottom); // 和redView底部間距相同 24 25 make.height.equalTo(redView); // 等寬 26 make.width.equalTo(redView); // 等高 27 }];
-
示例代碼3：
四個View，平分整個屏幕
1 //四個View，平分整個屏幕 2 //紅色 3 UIView *redView = [[UIView alloc] init]; 4 redView.backgroundColor = [UIColor redColor]; 5 [self.view addSubview:redView]; 6 // 藍色 7 UIView *blueView= [[UIView alloc] init]; 8 blueView.backgroundColor = [UIColor blueColor]; 9 [self.view addSubview:blueView]; 10 // 黑色 11 UIView *blackView = [[UIView alloc] init]; 12 blackView.backgroundColor = [UIColor blackColor]; 13 [self.view addSubview:blackView]; 14 // 綠色 15 UIView *greenView= [[UIView alloc] init]; 16 greenView.backgroundColor = [UIColor greenColor]; 17 [self.view addSubview:greenView]; 18 19 20 // autolayout 21 [redView makeConstraints:^(MASConstraintMaker *make) { 22 make.left.and.top.equalTo(self.view); 23 make.right.equalTo(self.view.centerX); 24 make.bottom.equalTo(self.view.centerY); 25 }]; 26 27 [blueView makeConstraints:^(MASConstraintMaker *make) { 28 make.left.equalTo(redView.right); 29 make.right.equalTo(self.view); 30 make.height.equalTo(redView); 31 32 }]; 33 34 [blackView makeConstraints:^(MASConstraintMaker *make) { 35 make.top.equalTo(redView.bottom); 36 make.height.equalTo(redView); 37 make.width.equalTo(redView); 38 }]; 39 40 [greenView makeConstraints:^(MASConstraintMaker *make) { 41 make.top.equalTo(blueView.bottom); 42 make.left.equalTo(blackView.right); 43 make.height.equalTo(blueView); 44 make.width.equalTo(blueView); 45 }]; 46 47 // 紅色View內部 48 UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"010.png"]]; 49 UILabel *name = [[UILabel alloc] init]; 50 name.text = @"紅色"; 51 name.textAlignment = NSTextAlignmentCenter; 52 name.backgroundColor = [UIColor purpleColor]; 53 [redView addSubview:image]; 54 [redView addSubview:name]; 55 [image makeConstraints:^(MASConstraintMaker *make) { 56 make.center.equalTo(redView.center).offset(-20); 57 }]; 58 [name makeConstraints:^(MASConstraintMaker *make) { 59 make.left.right.equalTo(redView.left); 60 make.bottom.equalTo(redView.bottom); 61 make.height.equalTo(40); 62 }];
1 // masonry 自動布局 2 UIView *redView = [[UIView alloc] init]; 3 redView.backgroundColor = [UIColor redColor]; 4 [self.view addSubview:redView]; 5 6 UIView *blueView= [[UIView alloc] init]; 7 blueView.backgroundColor = [UIColor blueColor]; 8 [self.view addSubview:blueView]; 9 10 11 [redView makeConstraints:^(MASConstraintMaker *make) { 12 // 大小100*100，居中顯示 13 //make.size.equalTo(100); 14 //make.center.equalTo(self.view); 15 16 //居中顯示，直接設置距離四面的距離 17 UIEdgeInsets eda = {100,100,100,100}; 18 make.edges.insets(eda); 19 // 20 }]; 21 22 // blueView位於redView中間 23 [blueView makeConstraints:^(MASConstraintMaker *make) { 24 make.center.equalTo(redView); 25 make.height.equalTo(redView.height).multipliedBy(0.5); // 乘法 26 make.width.equalTo(redView.width).dividedBy(3).offset(20); // 除法+偏移量 27 }];
總結：
和蘋果自帶的約束添加方法相比，蘋果的約束方法簡直無法直視啊。這樣給控件添加約束簡單快捷，主要是條理清晰，言簡意賅。
今日如此，明日依舊。
2015-06-04