使用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