【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支持哪些属性

MASViewAttributeNSLayoutAttribute描述view.as_leftNSLayoutAttributeLeft左边view.mas_rightNSLayoutAttributeRight右边view.mas_topNSLayoutAttributeTop上边view.mas_bottomNSLayoutAttributeBottom下边view.mas_leadingNSLayoutAttributeLeading头部view.mas_trailingNSLayoutAttributeTrailing尾部view.mas_widthNSLayoutAttributeWidth宽view.mas_heightNSLayoutAttributeHeight高view.mas_centerXNSLayoutAttributeCenterX横向中点view.mas_centerYNSLayoutAttributeCenterY纵向中点view.mas_baselineNSLayoutAttributeBaseline文本基线

---

下面通过一些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