使用Masonry進行界面搭建吧

　　在建立iOS項目時，要對用戶界面進行處理，經常使用的方式分爲可視化編程和代碼搭建視圖兩種。

　　1.可視化編程分又爲Storyboard和xib兩種。

　　使用xib能夠進行代碼與可視化混編，在建立viewController或cell時，直接勾選also create XIB file便可使用，一個xib負責一個界面視圖的搭建。

　　而使用Storyboard則能夠在一個Storyboard文件內進行多個界面的搭建以及跳轉，控制器與界面的關聯則經過Storyboard ID(identifier)。

　　不管是xib仍是Storyboard進行界面搭建，都要使用約束進行各個空間的佈局，能夠更加直觀的看到界面搭建的效果，但想要實現代碼的管理，彷佛比較不容易。

　　2.使用代碼搭建，能夠使用CGRect，CGSize，CGPoint等相關方法，可是效率過低，容易寫死數據，適配性不太好；還能夠使用AutoLayout(自動佈局)處理，在github上有一個針對於AutoLayout的第三方：Masonry，已經將其封裝的很是好，能夠方便快捷的使用代碼對視圖進行佈局。

　　Masonry的視圖佈局，須要在子視圖已經加載在父視圖以後才能使用方法進行佈局處理。佈局代碼書寫在一個block塊中，經過鏈式語法進行方法的調用：

 1 #import "ViewController.h"
 2 #import <Masonry.h> // 使用了Cocoapods進行第三方的安裝，使用<>引用
 3 #import "UIView+EqualSpacingLine.h" // 原Masonry中沒有的，須要引用自定義的等寬排列的類目
 4 
 5 #define SIZE [UIScreen mainScreen].bounds.size
 6 
 7 @interface ViewController ()
 8 
 9 @end
10 
11 @implementation ViewController
12 
13 - (void)viewDidLoad {
14     [super viewDidLoad];
15     
16     UIView *view = [UIView new];
17     view.backgroundColor = [UIColor purpleColor];
18     [self.view addSubview:view];
19     
20     [view mas_makeConstraints:^(MASConstraintMaker *make) {
21         make.size.mas_equalTo(CGSizeMake(SIZE.width * 0.8, SIZE.height * 0.8));
22         make.center.equalTo(self.view);
23     }];
24 
25     // 等寬排列設置
26 
27     UIView *view2 = [UIView new];
28     view2.backgroundColor = [UIColor whiteColor];
29     [view addSubview:view2];
30 
31     [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
32         // 設定與對照視圖寬高比例
33         make.width.equalTo(view).multipliedBy(0.1);
34         make.height.equalTo(view).multipliedBy(0.1);
35     }];
36     
37     UIView *view3 = [UIView new];
38     view3.backgroundColor = [UIColor greenColor];
39     [view addSubview:view3];
40     
41     [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
42         make.size.equalTo(view2);
43 
44     }];
45     
46     UIView *view4 = [UIView new];
47     view4.backgroundColor = [UIColor redColor];
48     [view addSubview:view4];
49     
50     [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
51         make.size.equalTo(view2);
52 
53     }];
54     
55     UIView *view5 = [UIView new];
56     view5.backgroundColor = [UIColor cyanColor];
57     [view addSubview:view5];
58     
59     [view5 mas_makeConstraints:^(MASConstraintMaker *make) {
60         make.width.equalTo(view2);
61         make.height.equalTo(view2).multipliedBy(1.5);
62 
63     }];
64     
65     UIView *view6 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 500)];
66     view6.backgroundColor = [UIColor blueColor];
67     [view addSubview:view6];
68     
69     [view6 mas_makeConstraints:^(MASConstraintMaker *make) {
70         // 給定寬高數值
71         make.height.offset(100);
72         make.width.offset(100);
73     }];
74     
75     // 等寬排列
76     [view equalSpacingLineWithViews:@[view2, view3, view4, view5, view6] byDirection:Direction_Horizontal andBlock:^(MASConstraintMaker *make) {
77         make.bottom.equalTo(view);
78     }];
79 
80 }
81 
82 @end

 

　　效果圖：

　　

　　等寬排列類目：

 UIView+EqualSpacingLine.h

 1 #import <UIKit/UIKit.h>
 2 #import <Masonry.h> //!!! 使用前務必引用Masonry
 3 
 4 // 排列方向
 5 typedef NS_ENUM(NSInteger, Direction) {
 6     Direction_Horizontal,
 7     Direction_Vertical,
 8 };
 9 
10 @interface UIView (EqualSpacingLine)
11 
12 /**
13  * 等寬排列
14  * @param views 子視圖數組,僅設置寬高便可(使用Masonry設置)
15  * @param direction 排列方向
16  * @param block 添加masonry代碼塊，若是爲nil，則姿式圖居中
17  * @return void
18  */
19 - (void)equalSpacingLineWithViews:(NSArray<UIView*>*)views byDirection:(Direction)direction andBlock:(void(^)(MASConstraintMaker *make))block;
20 
21 @end

 

 UIView+EqualSpacingLine.m
 
 1 #import "UIView+EqualSpacingLine.h"  
 2 
 3 @implementation UIView (EqualSpacingLine)
 4 
 5 - (void)equalSpacingLineWithViews:(NSArray<UIView*>*)views byDirection:(Direction)direction andBlock:(void(^)(MASConstraintMaker *make))block{
 6     
 7     // 添加間隔視圖
 8     NSMutableArray *newViews = [NSMutableArray array];
 9     for(int i = 0; i <= views.count; i++){
10         UIView *view = [UIView new];
11         [self addSubview:view];
12         [newViews addObject:view];
13         if(i != views.count){
14             [newViews addObject:views[i]];
15         }
16     }
17 
18     // 視圖排列
19     for(int i = 0; i < newViews.count; i++){
20         [newViews[i] mas_makeConstraints:^(MASConstraintMaker *make) {
21             if(direction == Direction_Horizontal){
22                 // 橫向 左右設置
23                 make.left.equalTo(i == 0 ? self : ((UIView*)newViews[i-1]).mas_right);
24                 make.right.equalTo(i == newViews.count-1 ? self : ((UIView*)newViews[i+1]).mas_left);
25                 // 等寬
26                 if(i % 2 == 0)
27                     make.width.equalTo((UIView*)newViews[0]);
28                 if(!block)
29                     make.centerY.equalTo(self);
30             }else{
31                 // 縱向 上下設置
32                 make.top.equalTo(i == 0 ? self : ((UIView*)newViews[i-1]).mas_bottom);
33                 make.bottom.equalTo(i == newViews.count-1 ? self : ((UIView*)newViews[i+1]).mas_top);
34                 // 等高
35                 if(i % 2 == 0)
36                     make.height.equalTo((UIView*)newViews[0]);
37                 if(!block)
38                     make.centerX.equalTo(self);
39             }
40             // 添加masonry代碼塊，若爲nil，則居中
41             if(block)
42                 block(make);
43         }];
44     }
45 }
46 
47 @end