【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