使用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块中，通过链式语法进行方法的调用：

#import "ViewController.h"
#import <Masonry.h> // 使用了Cocoapods进行第三方的安装，使用<>引用
#import "UIView+EqualSpacingLine.h" // 原Masonry中没有的，需要引用自定义的等宽排列的类目

#define SIZE [UIScreen mainScreen].bounds.size

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:view];
    
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(SIZE.width * 0.8, SIZE.height * 0.8));
        make.center.equalTo(self.view);
    }];

    // 等宽排列设置

    UIView *view2 = [UIView new];
    view2.backgroundColor = [UIColor whiteColor];
    [view addSubview:view2];

    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 设定与对照视图宽高比例
        make.width.equalTo(view).multipliedBy(0.1);
        make.height.equalTo(view).multipliedBy(0.1);
    }];
    
    UIView *view3 = [UIView new];
    view3.backgroundColor = [UIColor greenColor];
    [view addSubview:view3];
    
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(view2);

    }];
    
    UIView *view4 = [UIView new];
    view4.backgroundColor = [UIColor redColor];
    [view addSubview:view4];
    
    [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(view2);

    }];
    
    UIView *view5 = [UIView new];
    view5.backgroundColor = [UIColor cyanColor];
    [view addSubview:view5];
    
    [view5 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(view2);
        make.height.equalTo(view2).multipliedBy(1.5);

    }];
    
    UIView *view6 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 500)];
    view6.backgroundColor = [UIColor blueColor];
    [view addSubview:view6];
    
    [view6 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 给定宽高数值
        make.height.offset(100);
        make.width.offset(100);
    }];
    
    // 等宽排列
    [view equalSpacingLineWithViews:@[view2, view3, view4, view5, view6] byDirection:Direction_Horizontal andBlock:^(MASConstraintMaker *make) {
        make.bottom.equalTo(view);
    }];

}

@end

 

　　效果图：

　　

　　等宽排列类目：

   UIView+EqualSpacingLine.h

 1 #import <UIKit/UIKit.h>
#import <Masonry.h> //!!! 使用前务必引用Masonry

// 排列方向
typedef NS_ENUM(NSInteger, Direction) {
    Direction_Horizontal,
    Direction_Vertical,
};

@interface UIView (EqualSpacingLine)

/**
 * 等宽排列
 * @param views 子视图数组,仅设置宽高即可(使用Masonry设置)
 * @param direction 排列方向
 * @param block 添加masonry代码块，如果为nil，则姿势图居中
 * @return void
 */
- (void)equalSpacingLineWithViews:(NSArray<UIView*>*)views byDirection:(Direction)direction andBlock:(void(^)(MASConstraintMaker *make))block;

@end

 

   UIView+EqualSpacingLine.m
 
 1 #import "UIView+EqualSpacingLine.h"  

@implementation UIView (EqualSpacingLine)

- (void)equalSpacingLineWithViews:(NSArray<UIView*>*)views byDirection:(Direction)direction andBlock:(void(^)(MASConstraintMaker *make))block{
    
    // 添加间隔视图
    NSMutableArray *newViews = [NSMutableArray array];
    for(int i = 0; i <= views.count; i++){
        UIView *view = [UIView new];
        [self addSubview:view];
        [newViews addObject:view];
        if(i != views.count){
            [newViews addObject:views[i]];
        }
    }

    // 视图排列
    for(int i = 0; i < newViews.count; i++){
        [newViews[i] mas_makeConstraints:^(MASConstraintMaker *make) {
            if(direction == Direction_Horizontal){
                // 横向 左右设置
                make.left.equalTo(i == 0 ? self : ((UIView*)newViews[i-1]).mas_right);
                make.right.equalTo(i == newViews.count-1 ? self : ((UIView*)newViews[i+1]).mas_left);
                // 等宽
                if(i % 2 == 0)
                    make.width.equalTo((UIView*)newViews[0]);
                if(!block)
                    make.centerY.equalTo(self);
            }else{
                // 纵向 上下设置
                make.top.equalTo(i == 0 ? self : ((UIView*)newViews[i-1]).mas_bottom);
                make.bottom.equalTo(i == newViews.count-1 ? self : ((UIView*)newViews[i+1]).mas_top);
                // 等高
                if(i % 2 == 0)
                    make.height.equalTo((UIView*)newViews[0]);
                if(!block)
                    make.centerX.equalTo(self);
            }
            // 添加masonry代码块，若为nil，则居中
            if(block)
                block(make);
        }];
    }
}

@end