iOS开发之Masonry占位视图初探

在上一篇中我们试着学习了下使用AutoLayout的方式来使用占位视图来对界面进行自定布局()，那么这次我们尝试着用下github上很火的一个第三个框架Masonry来对上一个实例进行编码布局。好了，开始干活吧！

一切的需求还是像上篇那样

• 我们现在只能确定我们控件的宽高以及左右的边距，需要对上下进行自动适应。
• 假设我们现在有四个控件，需要布局的界面是这个样子的

竖屏效果

Snip20150630_2.png

横屏效果：

Snip20150630_1.png

通过上一个实例的练习，我们已经大概了解需要添加一些怎样的约束了，那么剩下的就剩干活了哈

第一步：在我们的控制器中导入Masonry所需要的文件

#define MAS_SHORTHAND
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"

第二步：在控制器中添加以下三个占位视图并设置颜色

    //上面的占位视图
    UIView *topView = UIView.new;
    topView.backgroundColor = [UIColor redColor];
    [self.view addSubview:topView];
    //中间的占位视图
    UIView *centerView = UIView.new;
    centerView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:centerView];
    //下面的占位视图
    UIView *bottomView = UIView.new;
    bottomView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:bottomView];

第三步：开始分别给三个占位视图添加约束

    //给上面的占位视图添加约束
    [topView makeConstraints:^(MASConstraintMaker *make) {       //头部及左边距分别为0
        make.top.left.equalTo(self.view).offset(0);
        //三个占位视图的高度等高
        make.height.equalTo(@[centerView,bottomView]);
        //设置top视图的高度
        make.width.equalTo(100);
    }];
    //中间视图的需要添加以下约束，高度、左边以及与上方占位视图的关系
     [centerView makeConstraints:^(MASConstraintMaker *make) {
        //左边的约束
        make.left.equalTo(self.view).offset(0);
        //设置三个占位视图等高
        make.width.equalTo(@[topView,bottomView]);
        //设置中间占位视图与上方视图的关联约束
        make.top.equalTo(topView.bottom).offset(150);

    }];
    //下面的约束主要设置下面的与中间视图的约束以及本身左边距的约束
    [bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.left.bottom.equalTo(self.view).offset(0);
        make.top.equalTo(centerView.bottom).offset(150);

    }];

到了，这里。我们的三个占位视图已经基本完成了。那么让我们运行一下看下效果：

Snip20150701_27.png

由此我们发现中间空出的部分正好就是我们控件所需的位置了，那么下面我们就开始进行对控件的布局了。首先还是添加需要的左边的控件

     UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
    [self.view addSubview:imageView1];
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
    [self.view addSubview:imageView2];

    //然后对这两个控件进行布局

    [imageView1 makeConstraints:^(MASConstraintMaker *make) {
        //分别设置起宽高
       make.width.height.equalTo(150);
        //左边的边距
       make.left.equalTo(self.view).offset(0);
       //设置其与上面占位视图和下面占位视图的间距
       make.top.equalTo(topView.bottom).offset(0);
       make.bottom.equalTo(centerView.top).offset(0);
    //控件2同上。
    [imageView2 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.left.equalTo(self.view).offset(0);
        make.top.equalTo(centerView.bottom).offset(0);
        make.bottom.equalTo(bottomView.top).offset(0);

    }];

代码到了这里左边的控件约束基本布局完成了，让我们来看一下运行的效果吧。

Snip20150701_28.png

到了这里我们就可以对右边的控件进行布局了。基于之前的经验我们就会发现右边的约束只需要添加本身的宽、高和右边边距以及基于左边控件的centerY值就足够了。好了，我们开始吧。

    UIImageView *imageView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
    [self.view addSubview:imageView3];
    UIImageView *imageView4 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
    [self.view addSubview:imageView4];

    //该控件与左边的控件的关联
    [imageView3 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.right.equalTo(self.view).offset(0);
        make.centerY.equalTo(imageView1);

    }];
    //同上
    [imageView4 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.right.equalTo(self.view).offset(0);
        make.centerY.equalTo(imageView2);

    }];

到了这里基本上是大功告成了，到了这里只需要要把三个占位视图的背景颜色设置为透明就好了。

    //另外两个也是
  bottomView.backgroundColor = [UIColor clearColor];

运行效果如图：

20.gif

到了这里我们基本上就把基本的占位视图的介绍了联系完了。通过联系你可能会发现，无论是在StoryBoary上添加约束还是通过编码进行的智能布局都是基于对父控件或者对其他控件进行的关联。当然了如果你对AutoLayout的编码布局的话就可能就会觉得Masonry真的是好用的爆了。当然了，这么强大的Masonry，提供的功能也是很多的，这些就要靠大家来探索了，嘿嘿。