【iOS开发】Mansory自动布局(autolayout)使用教程

一、简介

Mansory

Mansory是一个轻量级的自动布局库，采用独特的链式语法进行代码封装，具有高可用性和阅读性等特点，支持iOS和Mac OS X。

先上点官方的代码，当当开胃菜。

Heres the same constraints created using MASConstraintMaker。

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

Or even shorter

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

上面两段代码是等价的，让一个view的各个边缘距离父视图分别为10的间距。实际效果是一样的，只是方法上面有优略而已。

二、实践

看mansory里面的view支持哪些属性

MASViewAttribute	NSLayoutAttribute	描述
view.as_left	NSLayoutAttributeLeft	左边
view.mas_right	NSLayoutAttributeRight	右边
view.mas_top	NSLayoutAttributeTop	上边
view.mas_bottom	NSLayoutAttributeBottom	下边
view.mas_leading	NSLayoutAttributeLeading	头部
view.mas_trailing	NSLayoutAttributeTrailing	尾部
view.mas_width	NSLayoutAttributeWidth	宽
view.mas_height	NSLayoutAttributeHeight	高
view.mas_centerX	NSLayoutAttributeCenterX	横向中点
view.mas_centerY	NSLayoutAttributeCenterY	纵向中点
view.mas_baseline	NSLayoutAttributeBaseline	文本基线

---

下面通过一些Demo来进一步介绍如何使用mansory。

1.【初阶】居中显示一个UIView

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *t_view = [UIView new];
    t_view.backgroundColor = [UIColor redColor];

    // 记得在添加约束之前,一定要先view添加到superView上面，否则会出现崩溃
    [self.view addSubview:t_view];

    [t_view mas_makeConstraints:^(MASConstraintMaker *make) {
        // t_view居中
        make.center.equalTo(self.view);

        // t_view的size
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
}

2.【初阶】让一个view略小于其superView(边距为20)

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *t_view2 = [UIView new];
    t_view2.backgroundColor = [UIColor greenColor];
    [self.view addSubview:t_view2];

    [t_view2 mas_makeConstraints:^(MASConstraintMaker *make) {

//  等价于      //make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));

//   等价于     //make.top.bottom.left.and.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));

        make.top.equalTo(self.view).with.offset(20);
        make.bottom.equalTo(self.view).with.offset(-20);
        make.left.equalTo(self.view).with.offset(20);
        make.right.equalTo(self.view).with.offset(-20);


    }];

}

3.【初阶】让两个宽度为200的view 垂直居中且等宽等间距的排列 (自动计算高度)

- (void)viewDidLoad
{
    [super viewDidLoad];

    int padding = 30;

    UIView *t_view3 = [UIView new];
    t_view3.backgroundColor = [UIColor blueColor];
    [self.view addSubview:t_view3];

    UIView *t_view4 = [UIView new];
    t_view4.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:t_view4];


    [t_view3 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerX.mas_equalTo(self.view.mas_centerX);

        make.top.equalTo(self.view.mas_top).with.offset(padding);

        make.bottom.equalTo(t_view4.mas_top).with.offset(-padding);

        make.height.equalTo(t_view4);

        make.width.mas_equalTo(@200);
    }];


    [t_view4 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerX.mas_equalTo(self.view.mas_centerX);

        make.top.equalTo(t_view3.mas_bottom).with.offset(padding);

        make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding);

        make.height.equalTo(t_view3);

        make.width.mas_equalTo(@200);
    }];

}

4.【中阶】在UIScrollView中顺序排列一些view并自动计算contentSize
注意：scrollView计算contentSize的时候，要先用一个containView填满整个scrollView，这样约束才能够准确计算。

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIScrollView *scrollView = [UIScrollView new];
    scrollView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:scrollView];
    [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

    // 这个containView是用来先填充整个scrollView的,到时候这个containView的size就是scrollView的contentSize
    UIView *containView = [UIView new];
    containView.backgroundColor = [UIColor blackColor];
    [scrollView addSubview:containView];
    [containView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(scrollView);
        make.width.equalTo(scrollView);
    }];



    UIView *lastView = nil;

    for (int i = 0; i < 6; i++) {

        UIView *sub_view = [UIView new];
        sub_view.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
                                              saturation:( arc4random() % 128 / 256.0 ) + 0.5
                                              brightness:( arc4random() % 128 / 256.0 ) + 0.5
                                                   alpha:1];
        [containView addSubview:sub_view];


        [sub_view mas_makeConstraints:^(MASConstraintMaker *make) {

            make.left.and.right.equalTo(containView);

            make.height.mas_equalTo(@(30*i));


            if (lastView)
            {
                make.top.mas_equalTo(lastView.mas_bottom);
            }else
            {
                make.top.mas_equalTo(containView.mas_top);
            }

        }];

        lastView = sub_view;
    }

    // 最后更新containView
    [containView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView.mas_bottom);
    }];

}

5.【高阶】

。。。。。。。。

Demo github地址：Demo_Mansory