iOS_autoLayout_Masonry

概述

Masonry是一个轻量级的布局框架与更好的包装AutoLayout语法。

Masonry有它自己的布局方式，描述NSLayoutConstraints使布局代码更简洁易读。

Masonry支持iOS和Mac OS X。

Masonry github 地址:https://github.com/SnapKit/Masonry

目

录

对比 NSLayoutConstraints vs Masonry

示例 13个Masonry示例(用代码来说话)

对比

使用NSLayoutConstraints创建约束

@interface contrastViewController()

@property (nonatomic,strong) UIView *myView;

@end

@implementation contrastViewController

-(void)loadView

{

[super loadView];

_myView = [[UIView alloc]init];

[self.view addSubview:_myView];

}

-(void)viewDidLoad

{

[super viewDidLoad];

_myView.backgroundColor = [UIColor orangeColor];

_myView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addConstraints:@[

[NSLayoutConstraint constraintWithItem:_myView

attribute:NSLayoutAttributeTop

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeTop

multiplier:1.0

constant:10],

[NSLayoutConstraint constraintWithItem:_myView

attribute:NSLayoutAttributeLeft

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeLeft

multiplier:1.0

constant:10],

[NSLayoutConstraint constraintWithItem:_myView

attribute:NSLayoutAttributeBottom

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeBottom

multiplier:1.0

constant:-10],

[NSLayoutConstraint constraintWithItem:_myView

attribute:NSLayoutAttributeRight

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeRight

multiplier:1

constant:-10],

]];

}

@end

即使这样一个简单的示例，所需的代码量也要非常冗长；

另一个选择是使用视图形式语言(VFL)，这个少一点啰嗦；然而ASCLL类型语法有其自身的缺陷，也有些约束难以实现;

使用Masonry创建相同的约束

@interface contrastViewController()

@property (nonatomic,strong) UIView *myView;

@end

@implementation contrastViewController

-(void)loadView

{

[super loadView];

_myView = [[UIView alloc]init];

[self.view addSubview:_myView];

}

-(void)viewDidLoad

{

[super viewDidLoad];

_myView.backgroundColor = [UIColor orangeColor];

[_myView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(self.view).offset(10); // 相对于self.view 顶部 10

make.left.equalTo(self.view).offset(10); // 相对于self.view 左边 10

make.bottom.equalTo(self.view).offset(-10); // 相对于self.view 底部 -10

make.right.equalTo(self.view).offset(-10); // 相对于self.view 右边 -10

}];

}

@end

还可以更简洁

@interface contrastViewController()

@property (nonatomic,strong) UIView *myView;

@end

@implementation contrastViewController

-(void)loadView

{

[super loadView];

_myView = [[UIView alloc]init];

[self.view addSubview:_myView];

}

-(void)viewDidLoad

{

[super viewDidLoad];

_myView.backgroundColor = [UIColor orangeColor];

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

[_myView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(self.view).insets(padding);

}];

}

@end

还要注意在第一个例子中我们必须添加约束到self.view，_myView.translatesAutoresizingMaskIntoConstraints = NO；

然而Masonry将自动添加约束到适当的视图_myView.translatesAutoresizingMaskIntoConstraints = NO;

示例

示例 00

@interface _00_BasicViewController ()

@property (nonatomic) UIView *greenView;

@end

@implementation _00_BasicViewController

-(void)loadView

{

[super loadView];

_greenView = [[UIView alloc]init];

[self.view addSubview:_greenView];

}

- (void)viewDidLoad {

[super viewDidLoad];

_greenView.backgroundColor = [UIColor greenColor];

[_greenView mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(200, 200)); // 设置大小

make.center.equalTo(self.view); // 居中显示

}];

}

@end

示例01

@interface _01_BasicViewController ()

@property (nonatomic,strong) UIView *greenView;

@property (nonatomic,strong) UIView *redView;

@property (nonatomic,strong) UIView *blueView;

@end

@implementation _01_BasicViewController

-(void)loadView

{

[super loadView];

_greenView = [[UIView alloc]init];

_redView = [[UIView alloc]init];

_blueView = [[UIView alloc]init];

[self.view addSubview:_greenView];

[self.view addSubview:_redView];

[self.view addSubview:_blueView];

}

- (void)viewDidLoad {

[super viewDidLoad];

[_greenView setBackgroundColor:[UIColor greenColor]];

[_redView setBackgroundColor:[UIColor redColor]];

[_blueView setBackgroundColor:[UIColor blueColor]];

[self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(self.view).offset(10); // 顶等于 View 顶 +10

make.left.equalTo(self.view).offset(10); // 左等于 View 左 +10

make.bottom.equalTo(_blueView.mas_top).offset(-10); // 底等于蓝色顶 -10

make.right.equalTo(_redView.mas_left).offset(-10); // 右等于红色右 -10

make.width.equalTo(_redView); // 宽等于红色宽

make.height.equalTo(_redView); // 高等于红色高

make.height.equalTo(_blueView); // 高等于蓝色高

}];

[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(_greenView); // 顶等于绿色顶

make.left.equalTo(_greenView.mas_right).offset(10); // 左等于绿色右 +10

make.bottom.equalTo(_greenView); // 底等于绿色底

make.right.equalTo(self.view).offset(-10); // 右等于 View 右 -10

make.width.equalTo(_greenView); // 宽等于绿色宽

make.height.equalTo(_greenView); // 高等于绿色高

}];

[self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(_greenView.mas_bottom).offset(10); // 顶等于绿色底 +10

make.left.equalTo(self.view).offset(10); // 左等于 View 左 +10

make.bottom.equalTo(self.view).offset(-10); // 底等于 View 底 -10

make.right.equalTo(self.view).offset(-10); // 右等于 View 右 -10

make.height.equalTo(_greenView); // 高等于绿色高

}];

}

@end

示例02

@interface _02_Update_ConstraintsViewController ()

@property (nonatomic,strong) UIButton *button;

@property (nonatomic,assign) CGSize buttonSize;

@end

@implementation _02_Update_ConstraintsViewController

-(void)loadView

{

[super loadView];

_button = [UIButton buttonWithType:UIButtonTypeSystem];

[self.view addSubview:_button];

}

- (void)viewDidLoad {

[super viewDidLoad];

[_button setTitle:@"点击" forState:UIControlStateNormal];

[_button.layer setBorderColor:[[UIColor greenColor] CGColor]];

[_button.layer setBorderWidth:3];

[_button addTarget:self action:@selector(clickWithButton:) forControlEvents:UIControlEventTouchUpInside];

_buttonSize = CGSizeMake(100, 100);

[self.view setNeedsUpdateConstraints];

}

- (void)updateViewConstraints {

[self.button mas_updateConstraints:^(MASConstraintMaker *make) {// 更新约束

make.center.equalTo(self.view); // 居中

make.width.equalTo(@(_buttonSize.width)).priorityLow(); // 宽等于 100 优先级低第一次显示的时候是100

make.height.equalTo(@(_buttonSize.height)).priorityLow(); // 高等于 100 优先级低第一次显示的时候是100

make.width.lessThanOrEqualTo(self.view); // 宽小于等于 view 当宽度大于等于 view 需满足此条件

make.height.lessThanOrEqualTo(self.view); // 高小于等于 view 当高度大于等于 view 需满足此条件

}];

[super updateViewConstraints];

}

- (void)clickWithButton:(UIButton *)button

{

_buttonSize = CGSizeMake(_buttonSize.width * 1.3, _buttonSize.height * 1.3); // 宽高乘 1.3

[self.view setNeedsUpdateConstraints];

[UIView animateWithDuration:0.4 animations:^{

[self.view layoutIfNeeded];

}];

}

@end

示例03

@interface _03_Remake_ConstraintsViewController ()

@property (nonatomic, strong) UIButton *movingButton;

@property (nonatomic, assign) BOOL topLeft;

@end

@implementation _03_Remake_ConstraintsViewController

-(void)loadView

{

[super loadView];

_movingButton = [UIButton buttonWithType:UIButtonTypeSystem];

[self.view addSubview:_movingButton];

}

- (void)viewDidLoad {

[super viewDidLoad];

[_movingButton setTitle:@"点击" forState:UIControlStateNormal];

_movingButton.layer.borderColor = UIColor.greenColor.CGColor;

_movingButton.layer.borderWidth = 3;

[_movingButton addTarget:self action:@selector(clickWithButton:) forControlEvents:UIControlEventTouchUpInside];

self.topLeft = YES;

[self.view setNeedsUpdateConstraints];

}

+ (BOOL)requiresConstraintBasedLayout

{

return YES;

}

- (void)updateViewConstraints {

// 重置约束会把已有的约束删除重新添加

[self.movingButton mas_remakeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(@(100));

make.height.equalTo(@(100));

if (self.topLeft) {

make.left.equalTo(self.view).offset(10);

make.top.equalTo(self.view).offset(10);

}

else {

make.bottom.equalTo(self.view).offset(-10);

make.right.equalTo(self.view).offset(-10);

}

}];

[super updateViewConstraints];

}

- (void)clickWithButton:(UIButton *)button

{

self.topLeft = !self.topLeft;

[self.view setNeedsUpdateConstraints];

[self.view updateConstraintsIfNeeded];

[UIView animateWithDuration:0.4 animations:^{

[self.view layoutIfNeeded];

}];

}

@end

示例04

@interface _04_Using_ConstantsViewController ()

@property (nonatomic,strong) UIView *purpleView;

@property (nonatomic,strong) UIView *orangeView;

@end

@implementation _04_Using_ConstantsViewController

-(void)loadView

{

[super loadView];

self.purpleView = [[UIView alloc]init];

self.orangeView = [[UIView alloc]init];

[self.view addSubview:_purpleView];

[self.view addSubview:_orangeView];

}

- (void)viewDidLoad {

[super viewDidLoad];

self.purpleView.backgroundColor = UIColor.purpleColor;

self.orangeView.backgroundColor = UIColor.orangeColor;

[self.purpleView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(@20); // 顶 20 相对于self.View

make.left.equalTo(@20); // 左 20

make.bottom.equalTo(@-20); // 底 -20

make.right.equalTo(@-20); // 右 -20

}];

[self.orangeView mas_makeConstraints:^(MASConstraintMaker *make) {

make.center.mas_equalTo(CGPointMake(0, 50)); // 中心点Y 相对于self.View Y 50

make.size.mas_equalTo(CGSizeMake(200, 100)); // 大小 200 100

}];

}

@end

示例05

@interface _05_Composite_EdgesViewController ()

@end

@implementation _05_Composite_EdgesViewController

-(void)viewWillAppear:(BOOL)animated

{

[super viewWillAppear:animated];

UIView *lastView = self.view;

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

UIView *view = [[UIView alloc]init];

view.backgroundColor = [self randomColor];

[self.view addSubview:view];

[view mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(5, 10, 15, 20));//相对于上一个View 5 10 -15 -20

}];

lastView = view;

}

- (UIColor *)randomColor {

CGFloat hue = ( arc4random() % 256 / 256.0 ); // 0.0 to 1.0

CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from white

CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from black

return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

}

@end

示例06

@interface _06_Aspect_FitViewController ()

@property (nonatomic,strong) UIView *topView;

@property (nonatomic,strong) UIView *topInnerView;

@property (nonatomic,strong) UIView *bottomView;

@property (nonatomic,strong) UIView *bottomInnerView;

@end

@implementation _06_Aspect_FitViewController

-(void)loadView

{

[super loadView];

self.topView = [[UIView alloc] init];

self.topInnerView = [[UIView alloc] init];

self.bottomView = [[UIView alloc] init];

self.bottomInnerView = [[UIView alloc] init];

[self.view addSubview:_topView];

[self.view addSubview:_topInnerView];

[self.view addSubview:_bottomView];

[self.view addSubview:_bottomInnerView];

}

- (void)viewDidLoad {

[super viewDidLoad];

self.topView.backgroundColor = [UIColor redColor];

self.bottomView.backgroundColor = [UIColor blueColor];

self.topInnerView.backgroundColor = [UIColor greenColor];

self.bottomInnerView.backgroundColor = [UIColor grayColor];

[self.topView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.right.and.top.equalTo(self.view); // 左边、右边、顶部等于 self.View

}];

[self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.right.and.bottom.equalTo(self.view); // 左边、右边、底部等于 self.View

make.top.equalTo(self.topView.mas_bottom); // 顶部等于 topView 的底部

make.height.equalTo(self.topView); // 高等于 topView

// 结果：上下55分成

}];

[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3); // 宽度是高度的3倍

make.width.and.height.lessThanOrEqualTo(self.topView); // 宽度、高度小于 topView的宽度高度

make.width.and.height.equalTo(self.topView).with.priorityLow(); // 宽度、高度等于 topView的宽度高度优先级低

make.center.equalTo(self.topView); // 中心点位置等于 topView

}];

[self.bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {

make.height.equalTo(self.bottomInnerView.mas_width).multipliedBy(3);// 高度是宽度的3倍

make.width.and.height.lessThanOrEqualTo(self.bottomView); // 宽度、高度小于 bottomView的宽度高度

make.width.and.height.equalTo(self.bottomView).with.priorityLow(); // 宽度、高度等于 bottonView的宽度高度优先级低

make.center.equalTo(self.bottomView); // 中心点位置等于 bottonView

}];

}

@end

示例07

@interface _07_Basic_AnimatedViewController ()

@property (nonatomic,strong) UIView *greenView;

@property (nonatomic,strong) UIView *redView;

@property (nonatomic,strong) UIView *blueView;

@property (nonatomic,assign) NSInteger padding;

@property (nonatomic, assign) BOOL animating;

@property (nonatomic, strong) NSMutableArray *animatableConstraints;

@end

@implementation _07_Basic_AnimatedViewController

-(void)loadView

{

[super loadView];

self.greenView = [[UIView alloc]init];

self.redView = [[UIView alloc]init];

self.blueView = [[UIView alloc]init];

[self.view addSubview:self.greenView];

[self.view addSubview:self.redView];

[self.view addSubview:self.blueView];

}

- (void)viewDidLoad {

[super viewDidLoad];

_greenView.backgroundColor = UIColor.greenColor;

_redView.backgroundColor = UIColor.redColor;

_blueView.backgroundColor = UIColor.blueColor;

NSInteger padding = self.padding = 10;

_animatableConstraints = [NSMutableArray array];

UIEdgeInsets paddingInsets = UIEdgeInsetsMake(_padding,_padding,_padding,_padding); // 一开始 green,red,blue的尺寸再通过约束来改变

[_greenView mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加约束的同时添加到数组

[_animatableConstraints addObjectsFromArray:@[

make.edges.equalTo(self.view).insets(paddingInsets).priorityLow(), // 优先级低

make.bottom.equalTo(_blueView.mas_top).offset(-padding), // green bottom 相对 blue top -10

]];

make.size.equalTo(_redView); // 大小 = redView

make.height.equalTo(_blueView); // 高 = blue

}];

[_redView mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加约束的同时添加到数组

[_animatableConstraints addObjectsFromArray:@[

make.edges.equalTo(self.view).insets(paddingInsets).priorityLow(), // 优先级低

make.left.equalTo(_greenView.mas_right).offset(padding), // left 红色 green right 10

make.bottom.equalTo(_blueView.mas_top).offset(-padding), // bottom 蓝色 top -10

]];

make.size.equalTo(_greenView); // 大小 = green

make.height.equalTo(_blueView.mas_height); // 高 = blue

}];

[_blueView mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加约束的同时添加到数组

[self.animatableConstraints addObjectsFromArray:@[

make.edges.equalTo(self.view).insets(paddingInsets).priorityLow(), // 优先级低

]];

make.height.equalTo(_greenView);

}];

[self.view layoutIfNeeded];

// 可以注释此部分，查看没有动画时的效果

if (self.view) {

_animating = YES;

[self animateWithInvertedInsets:NO];

}

- (void)animateWithInvertedInsets:(BOOL)invertedInsets {

if (!_animating) return; // 是否需要动画

NSInteger padding = invertedInsets ? 100 : _padding; // Yes 就缩小100 否 10

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

for (MASConstraint *constraint in _animatableConstraints) {

constraint.insets = paddingInsets;

}

[UIView animateWithDuration:1 animations:^{

[self.view layoutIfNeeded];

} completion:^(BOOL finished) {

[self animateWithInvertedInsets:!invertedInsets]; // 取相反值无限循环执行动画

}];

}

@end

示例08

@interface _08_Bacony_LabelsViewController ()

@property (nonatomic,strong) UILabel *longLabel;

@property (nonatomic,strong) UILabel *shortLabel;

@property (nonatomic,strong) UILabel *contentLable;

@end

@implementation _08_Bacony_LabelsViewController

- (void)loadView

{

[super loadView];

_longLabel = [[UILabel alloc]init];

_shortLabel = [[UILabel alloc]init];

_contentLable = [[UILabel alloc]init];

[self.view addSubview:_longLabel];

[self.view addSubview:_shortLabel];

[self.view addSubview:_contentLable];

}

- (void)viewDidLoad {

[super viewDidLoad];

self.title = @"08_Bacony Labels";

_longLabel.numberOfLines = 0;

_longLabel.font =[UIFont systemFontOfSize:13];

_longLabel.backgroundColor = [UIColor redColor];

_longLabel.textColor = [UIColor darkGrayColor];

_longLabel.lineBreakMode = NSLineBreakByTruncatingTail;

_longLabel.text = @"Bacon ipsum dolor sit amet spare ribs fatback kielbasa salami, tri-tip jowl pastrami flank short loin rump sirloin. Tenderloin frankfurter chicken biltong rump chuck filet mignon pork t-bone flank ham hock.";

_shortLabel.numberOfLines = 1;

_shortLabel.textColor = [UIColor purpleColor];

_shortLabel.backgroundColor = [UIColor yellowColor];

_shortLabel.lineBreakMode = NSLineBreakByTruncatingTail;

_shortLabel.text = @"Bacon";

_contentLable.numberOfLines = 0;

_contentLable.font =[UIFont systemFontOfSize:13];

_contentLable.backgroundColor = [UIColor greenColor];

_contentLable.textColor = [UIColor darkGrayColor];

_contentLable.lineBreakMode = NSLineBreakByTruncatingTail;

_contentLable.text = @"枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客枫子的博客";

// 只设置left top

[_longLabel mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(self.view).offset(10);

make.top.equalTo(self.view).offset(10);

}];

// 只设置 centerY right

[_shortLabel mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.equalTo(_longLabel); //

make.right.equalTo(self.view).offset(-10);

}];

// top left right 根据文字多少自动计算高度

[_contentLable mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(_longLabel.mas_bottom).offset(10);

make.left.equalTo(@10);

make.right.equalTo(self.view).offset(-10);

}];

}

-(void)viewDidLayoutSubviews

{

[super viewDidLayoutSubviews];

CGFloat width = CGRectGetMinX(self.shortLabel.frame)-10;

width -= CGRectGetMinX(self.longLabel.frame);

self.longLabel.preferredMaxLayoutWidth = width;

}

@end

示例09

@interface _09_UIScrollViewViewController ()

@property (nonatomic,strong) UIScrollView *scrollView;

@property (nonatomic,strong) UIView *contentView;

@end

@implementation _09_UIScrollViewViewController

-(void)loadView

{

[super loadView];

_scrollView = [[UIScrollView alloc]init];

_contentView = [[UIView alloc]init];

[self.view addSubview:_scrollView];

[self.scrollView addSubview:_contentView];

}

- (void)viewDidLoad {

[super viewDidLoad];

self.title = @"09_UIScrollView";

_scrollView.backgroundColor = [UIColor grayColor];

[_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(self.view); // self.view一样大小

}];

_contentView.backgroundColor = [UIColor greenColor];

[_contentView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(_scrollView); // 大小 = _scrollView

make.width.equalTo(_scrollView); // width = _scrollView

}];

UIView *lastView;

CGFloat height = 25;

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

UIView *view = [[UIView alloc]init];

view.backgroundColor = [self randomColor];

[_contentView addSubview:view];

// 点击改变透明度

UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap:)];

[view addGestureRecognizer:singleTap];

[view mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(lastView ? lastView.mas_bottom : @0); // 第一个View top = 0;

make.left.equalTo(@0); // left 0

make.width.equalTo(_contentView); // width = _contentView;

make.height.equalTo(@(height)); // heinght = height

}];

height += 25; // += 25;

lastView = view;

}

[_contentView mas_makeConstraints:^(MASConstraintMaker *make) {

make.bottom.equalTo(lastView); // bottom = lastView

}];

}

- (UIColor *)randomColor {

CGFloat hue = ( arc4random() % 256 / 256.0 ); // 0.0 to 1.0

CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from white

CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from black

return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

}

- (void)singleTap:(UITapGestureRecognizer*)sender {

[sender.view setAlpha:sender.view.alpha / 1.20]; // To see something happen on screen when you tap :O

[self.scrollView scrollRectToVisible:sender.view.frame animated:YES];

};

示例10

static CGFloat const kArrayExampleIncrement = 10.0;

@interface _10_ArrayViewController ()

@property (nonatomic,strong) UIView *line;

@property (nonatomic,strong) UIButton *raiseButton;

@property (nonatomic,strong) UIButton *centerButton;

@property (nonatomic,strong) UIButton *lowerButton;

@property (nonatomic, assign) CGFloat offset;

@property (nonatomic, strong) NSArray *buttonViews;

@end

@implementation _10_ArrayViewController

-(void)loadView

{

[super loadView];

_line = [[UIView alloc]init];

_raiseButton = [UIButton buttonWithType:UIButtonTypeSystem];

_centerButton = [UIButton buttonWithType:UIButtonTypeSystem];

_lowerButton = [UIButton buttonWithType:UIButtonTypeSystem];

[self.view addSubview:_line];

[self.view addSubview:_raiseButton];

[self.view addSubview:_centerButton];

[self.view addSubview:_lowerButton];

}

- (void)viewDidLoad {

[super viewDidLoad];

_line.backgroundColor = [UIColor redColor];

[_raiseButton setTitle:@"Raise" forState:UIControlStateNormal];

[_centerButton setTitle:@"Center" forState:UIControlStateNormal];

[_lowerButton setTitle:@"Lower" forState:UIControlStateNormal];

[_raiseButton addTarget:self action:@selector(raiseAction) forControlEvents:UIControlEventTouchUpInside];

[_centerButton addTarget:self action:@selector(centerAction) forControlEvents:UIControlEventTouchUpInside];

[_lowerButton addTarget:self action:@selector(lowerAction) forControlEvents:UIControlEventTouchUpInside];

// 添加跟中线，方便查看按钮的移动

[_line mas_makeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(self.view);

make.height.equalTo(@1);

make.center.equalTo(self.view);

}];

[_raiseButton mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(self.view).with.offset(10.0);

}];

[_centerButton mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerX.equalTo(self.view);

}];

[_lowerButton mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.equalTo(self.view).with.offset(-10);

}];

self.buttonViews = @[_raiseButton, _lowerButton, _centerButton];

}

- (void)centerAction {

self.offset = 0.0;

}

- (void)raiseAction {

self.offset -= kArrayExampleIncrement;

}

- (void)lowerAction {

self.offset += kArrayExampleIncrement;

}

- (void)setOffset:(CGFloat)offset {

_offset = offset;

[self.view setNeedsUpdateConstraints];

[UIView animateWithDuration:0.2 animations:^{

[self.view layoutIfNeeded];

}];

}

- (void)updateViewConstraints {

// 同时更新多个按钮的约束

[self.buttonViews mas_updateConstraints:^(MASConstraintMaker *make) {

make.baseline.equalTo(self.view.mas_centerY).with.offset(self.offset); // buttonViews的底线

}];

[super updateViewConstraints];

}

@end

示例11

@interface _11_Attribute_ChainingViewController ()

@property (nonatomic,strong) UIView *greenView;

@property (nonatomic,strong) UIView *redView;

@property (nonatomic,strong) UIView *blueView;

@end

@implementation _11_Attribute_ChainingViewController

-(void)loadView

{

[super loadView];

_greenView = [[UIView alloc]init];

_redView = [[UIView alloc]init];

_blueView = [[UIView alloc]init];

[self.view addSubview:_greenView];

[self.view addSubview:_redView];

[self.view addSubview:_blueView];

}

- (void)viewDidLoad {

[super viewDidLoad];

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

_greenView.backgroundColor = UIColor.greenColor;

[_greenView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.and.left.equalTo(self.view).insets(padding); // 顶部15 左边 10

make.bottom.equalTo(_blueView.mas_top).insets(padding); // 底部与蓝色 15

make.width.equalTo(_redView.mas_width); // 宽度与红色相等

make.height.equalTo(@[_redView, _blueView]); // 高度与红蓝相等

}];

_redView.backgroundColor = UIColor.redColor;

[_redView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.and.right.equalTo(self.view).insets(padding); // 顶部15 右边 10

make.left.equalTo(_greenView.mas_right).insets(padding);// 左边与绿色 10

make.bottom.equalTo(_blueView.mas_top).insets(padding); // 底部与蓝色 15

make.width.equalTo(_greenView.mas_width); // 宽度与红色相等

make.height.equalTo(@[_greenView, _blueView]); // 高度与绿蓝相等

}];

_blueView.backgroundColor = UIColor.blueColor;

[_blueView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(_greenView.mas_bottom).insets(padding); // 顶部绿色 15

make.left.right.and.bottom.equalTo(self.view).insets(padding); // 左边 10 右边 10 底部 15

make.height.equalTo(@[_greenView, _redView]); // 高度与红绿相等

}];

}

@end

示例12

@interface _12_Layout_GuidesViewController ()

@property (nonatomic,strong) UIView *topView;

@property (nonatomic,strong) UIView *bottomView;

@end

@implementation _12_Layout_GuidesViewController

-(void)loadView

{

[super loadView];

_topView = [[UIView alloc]init];

_bottomView = [[UIView alloc]init];

[self.view addSubview:_topView];

[self.view addSubview:_bottomView];

}

- (void)viewDidLoad {

[super viewDidLoad];

_topView.backgroundColor = UIColor.greenColor;

[_topView mas_makeConstraints:^(MASConstraintMaker *make) {

UIView *topLayoutGuide = (id)self.topLayoutGuide; //显示屏幕内容的垂直程度最高,使用自动布局的约束。(只读)

make.top.equalTo(topLayoutGuide.mas_bottom);

make.left.equalTo(self.view);

make.right.equalTo(self.view);

make.height.equalTo(@40);

}];

_bottomView.backgroundColor = UIColor.redColor;

[_bottomView mas_makeConstraints:^(MASConstraintMaker *make) {

UIView *bottomLayoutGuide = (id)self.bottomLayoutGuide;

make.bottom.equalTo(bottomLayoutGuide.mas_top);

make.left.equalTo(self.view);

make.right.equalTo(self.view);

make.height.equalTo(@40);

}];

}

@end

最后编辑于：2017.12.04 04:15:27

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342

iOS_autoLayout_Masonry

推荐阅读更多精彩内容