Autolayout约束、布局、Masonry 框架的使用

一、Autolayout (xib 、storyboard方式)
1.适配

什么是适配?
适应、兼容各种不同的情况
移动开发中,适配的常见种类
系统适配
针对不同版本的操作系统进行适配

2.屏幕适配

针对不同大小的屏幕尺寸进行适配
iPhone的尺寸
3.5inch、4.0inch、4.7inch、5.5inch
iPad的尺寸
7.9inch、9.7inch
屏幕方向
竖屏    横屏

3.设备分辨率


4.什么是Autolayout

Autolayout是一种“自动布局”技术,专门用来布局UI界面的
Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广
自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能很轻松地解决屏幕适配的问题

5.简介

Autoresizing
在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成
相比之下,Autolayout的功能比Autoresizing强大很多

Autolayout的2个核心概念
参照
约束

6.Autolayout常用面板

6.1-约束处理

6.2-相对

6.3-对齐

二、代码实现Autolayout

代码实现Autolayout的步骤
利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点
要先禁止autoresizing功能,设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加约束之前,一定要保证相关控件都已经在各自的父控件上
不用再给view设置frame


NSLayoutConstraint

一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法
/**
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
*/
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

自动布局的核心计算公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value
//  ViewController.m
//  01-代码实现Autolayout
//  Copyright © 2017年 徐sir. All rights reserved.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    //不要将AutoresizingMask转为Autolayout
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:redView];
    
    /********************************* 蓝色 ***********************************/
    
    //高度约束:300
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];
    [blueView addConstraint:heightConstraint];
    
    //添加右边约束:距离右边有10的间距
    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
    [self.view addConstraint:rightConstraint];
    
    //添加左边约束:距离右边有10的间距
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:10];
    [self.view addConstraint:leftConstraint];
    
    //添加顶部约束:距离顶部有10的间距
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint];

    /********************************* 红色 ***********************************/
    
    //添加与蓝色等高
    NSLayoutConstraint *heightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:heightConstraint2];
    
    //添加左边的约束,redview的左边等于blueView中心点的X
    NSLayoutConstraint *leftConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    [self.view addConstraint:leftConstraint2];
    
    //添加顶部约束:距离有10的间距
    NSLayoutConstraint *topConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint2];

    //添加右边约束:距离右边有10的间距
    NSLayoutConstraint *rightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
    [self.view addConstraint:rightConstraint2];
}

/**
 * 宽度,高度为父控件高度的一半,中心点与父控件的一样
 */
- (void)test2{
  
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:blueView];
    
    //宽度约束:父控件的一半
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view  addConstraint:widthConstraint];
    
    //高度约束:父控件的一半
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0.0];
    [self.view  addConstraint:heightConstraint];
    
    //水平居中
    NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
    [self.view  addConstraint:centerXConstraint];
    
    //垂直居中
    NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];
    [self.view  addConstraint:centerYConstraint];
}

/**
 * 宽度,高度为100,粘着父控件右上角
 */
- (void)test1{
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:blueView];
    
    //宽度约束:300
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
    [blueView addConstraint:widthConstraint];
    
    //高度约束:300
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
    [blueView addConstraint:heightConstraint];
    
    //添加右边约束:距离右边有10的间距
    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
    [self.view addConstraint:rightConstraint];
   
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:10];
    [self.view addConstraint:topConstraint];

}
@end

添加约束的规则

规则(1)
在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1>#对于两个同层级view之间的约束关系,添加到它们的父view上
规则1.png
规则(2)
2>#对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
规则2.png
规则(3)
3>#对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
规则3.png

三、VFL语言实现自动布局

1.什么是VFL语言
VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
2.VFL示例
H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton宽72,acceptButton宽50,它们之间间距12

H:[wideView(>=60@700)]
wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)

V:[redBox][yellowBox(==redBox)]
竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)


3.VFL的使用
使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
/**
format :VFL语句
opts :约束类型
metrics :VFL语句中用到的具体数值
views :VFL语句中用到的控件
*/
创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义
NSDictionaryOfVariableBindings(...)


//  ViewController.m
//  02-代码实现Autolayout-VFL
//  Copyright © 2017年 徐sir. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIButton *loginBtn = [[UIButton alloc] init];
    loginBtn.backgroundColor = [UIColor orangeColor];
    [loginBtn setTitle:@"登  录" forState:UIControlStateNormal];
    [loginBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal] ;
    //不要将AutoresizingMask转为Autolayout
    loginBtn.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:loginBtn];
    
    UIButton *registerBtn = [[UIButton alloc] init];
    registerBtn.backgroundColor = [UIColor brownColor];
    [registerBtn setTitle:@"注  册" forState:UIControlStateNormal];
    [registerBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal] ;
    //不要将AutoresizingMask转为Autolayout
    registerBtn.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:registerBtn];
    
    //添加水平方向的约束
    NSNumber *margin = @20;
    NSString *vfl = @"H:|-margin-[registerBtn]-margin-[loginBtn(==registerBtn)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(registerBtn,loginBtn);
    NSDictionary *metrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options: kNilOptions metrics:metrics views:views];
    [self.view addConstraints:constraints];
    
    //添加竖直方向的间距
    NSNumber *height = @44;
    NSString *vfl1 = @"V:[registerBtn(height)]-margin-|";
    NSDictionary *metrics1 = NSDictionaryOfVariableBindings(margin,height);
    NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options: kNilOptions metrics:metrics1 views:views];
    [self.view addConstraints:constraints1];
    
    //添加红色剩余的余约束
   NSLayoutConstraint *redConstraint = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:registerBtn attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:redConstraint];
    
    NSLayoutConstraint *redConstraint1 = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:registerBtn attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:redConstraint1];
    
}


-(void)test2{
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    //不要将AutoresizingMask转为Autolayout
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:redView];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:blueView];
    
    //添加水平方向的约束
    NSNumber *margin = @20;
    NSString *vfl = @"H:|-margin-[blueView]-margin-|";
    
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);
    NSDictionary *metrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options: kNilOptions metrics:metrics views:views];
    [self.view addConstraints:constraints];
    
    //添加竖直方向的间距
    NSNumber *height = @44;
    NSString *vfl1 = @"V:|-margin-[blueView(height)]";
    NSDictionary *metrics1 = NSDictionaryOfVariableBindings(margin,height);
    NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options: kNilOptions metrics:metrics1 views:views];
    [self.view addConstraints:constraints1];
    

}
-(void)test1{
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    //注意点,先添加到父控件
    [self.view addSubview:blueView];
    
    //添加水平方向的约束
    NSString *vfl = @"H:|-20-[abc]-20-|";
    NSDictionary *views = @{@"abc":blueView};
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options: kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraints];
    
    //添加竖直方向的间距
    NSString *vfl1 = @"V:|-20-[abc(44)]";
    NSDictionary *views1 = @{@"abc":blueView};
    NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options: kNilOptions metrics:nil views:views1];
    [self.view addConstraints:constraints1];

}

@end

Visual Format Language

Visual Format Syntax
[button]-[textField]


button-textField.png
button-textField.png

Width Constraint
[button(>=50)]

button(>=50).png
button(>=50).png

Connection to Superview
|-50-[purpleBox]-50-|

|-50-[purpleBox]-50-|.png
|-50-[purpleBox]-50-|.png

Vertical Layout
V:[topField]-10-[bottomField]

V:[topField]-10-[bottomField].png
V:[topField]-10-[bottomField].png

Flush Views
[maroonView][blueView]

[maroonView][blueView].png
[maroonView][blueView].png

Priority
[button(100@20)]

[button(100@20)].png
[button(100@20)].png

Equal Widths
[button1(==button2)]

[button1(==button2)].png
[button1(==button2)].png

Multiple Predicates
[flexibleButton(>=70,<=100)]

[flexibleButton(>=70,<=100)].png
[flexibleButton(>=70,<=100)].png

A Complete Line of Layout
|-[find]-[findNext]-[findField(>=20)]-|

The notation prefers good visualization over completeness of expressibility. Most of the constraints that are useful in real user interfaces can be expressed using visual format syntax, but there are a few that cannot. One useful constraint that cannot be expressed is a fixed aspect ratio (for example, imageView.width = 2 * imageView.height
). To create such a constraint, you must use
constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:

NOTE
For the objectOfPredicate
production, viewName
is acceptable only if the subject of the predicate is the width or height of a view. That is, you can use [view1(==view2)]
to specify that view1
and view2
have the same width.

If you make a syntactic mistake, an exception is thrown with a diagnostic message. For example:
Expected ':' after 'V' to specify vertical arrangement
V|[backgroundBox]|
^
A predicate on a view's thickness must end with ')' and the view must end with ']'
|[whiteBox1][blackBox4(blackWidth][redBox]|
^
Unable to find view with name blackBox
|[whiteBox2][blackBox]
^
Unknown relation. Must be ==, >=, or <=
V:|[blackBox4(>30)]|
^

四、Masonry 框架的使用

1.目前最流行的Autolayout第三方框架
用优雅的代码方式编写Autolayout
省去了苹果官方恶心的Autolayout代码
大大提高了开发效率

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

2.mas_equalTo和equalTo

默认情况下
mas_equalTo有自动包装功能,比如自动将20包装为@20
equalTo没有自动包装功能

如果添加了下面的宏,那么mas_equalTo和equalTo就没有区别
#define MAS_SHORTHAND_GLOBALS
// 注意:这个宏一定要添加到#import "Masonry.h"前面

3.mas_width和width

默认情况下
width是make对象的一个属性,用来添加宽度约束用的,表示对宽度进行约束
mas_width是一个属性值,用来当做equalTo的参数,表示某个控件的宽度属性

如果添加了下面的宏,mas_width也可以写成width
#define MAS_SHORTHAND
mas_height、mas_centerX以此类推

4.可有可无的用法
以下方法都仅仅是为了提高可读性,可有可无
- (MASConstraint *)with {
    return self;
}
- (MASConstraint *)and {
    return self;
}

说明:
/**
 mas_equalTo:这个方法会对参数进行包装
 equalTo:这个方法不会对参数进行包装
 mas_equalTo的功能强于 > equalTo
 */
/**
 约束的类型:
 1.尺寸:width\height\size
 2.边界:left\leading\right\trailing\top\bottom
 3.中心点:center\centerX\centerY
 4.边界:edges
 */

/**
 // 这个方法会将以前的所有约束删掉,添加新的约束
 [blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
 
 }];
 
 // 这个方法将会覆盖以前的某些特定的约束
 [blueView mas_updateConstraints:^(MASConstraintMaker *make) {
 
 }];
 */
//
//  ViewController.m
//  03-Masonry使用
//  Copyright © 2017年 徐sir. All rights reserved.

#import "ViewController.h"
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default synta
#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    
    UIView *blackView = [[UIView alloc] init];
    blackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:blackView];
   
    [redView makeConstraints:^(MASConstraintMaker *make){
        make.left.equalTo(self.view.centerX);
        make.top.equalTo(44);
        make.height.equalTo(44);
        make.right.equalTo(-20);
    }];
    
    [blackView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(redView.bottom).offset(20);
        make.left.equalTo(redView.centerX);
        make.right.equalTo(redView);
        make.height.equalTo(redView);
    }];
    
    [self test3];
}

- (void)test3{

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    UIView *blackView = [[UIView alloc] init];
    blackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:blackView];
    
    [redView makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(30);
        make.bottom.equalTo(self.view.mas_bottom).offset(-30);
        make.right.equalTo(blackView.mas_left).offset(-30);
        make.width.equalTo(blackView.mas_width);
        make.height.equalTo(@44);
    }];
    
    [blackView makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.view.mas_right).offset(-30);
        make.top.equalTo(redView.mas_top);
        make.bottom.equalTo(redView.mas_bottom);
    }];

}

//2.尺寸:width\height\size
- (void)t2{

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    //简写4
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        
//        make.size.mas_equalTo(CGSizeMake(100, 100));
//        make.center.mas_equalTo(self.view);
//        
//    }];
    
    //简写3
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        
//        make.width.height.mas_equalTo(100);
//        make.center.mas_equalTo(self.view);
//        
//    }];
    
    //简写2
    //mas_equalTo:会自动包装传入的参数为对象类型
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        
//        make.width.mas_equalTo(100);
//        make.height.mas_equalTo(@100);
//        make.centerX.mas_equalTo(self.view.mas_centerX);
//        make.centerY.mas_equalTo(self.view.mas_centerY);
//        
//    }];
    
    //简写1
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {   
//        make.width.equalTo(@100);       
//        make.height.equalTo(@100);
//        make.centerX.equalTo(self.view);       
//        make.centerY.equalTo(self.view);
//    }];
    
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        
//        make.width.equalTo(@100);
//        
//        make.height.equalTo(@100);
//        make.centerX.equalTo(self.view.mas_centerX);
//        
//        make.centerY.equalTo(self.view.mas_centerY);
//    }];


}

//1.边界:left\leading\right\trailing\top\bottom\edges
- (void)edges{
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));

    }];

    
//    简写3
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {       
//        make.top.left.offset(20);        
//        make.right.bottom.offset(-20);        
//    }];
    
//    简写2
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {       
//        make.top.offset(20);       
//        make.left.offset(20);       
//        make.right.offset(-20);       
//        make.bottom.offset(-20);
//    }];
    
//    简写1
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//
//        make.top.equalTo(self.view).offset(20);
//
//        make.left.equalTo(self.view).offset(20);
//
//        make.right.equalTo(self.view).offset(-20);
//
//        make.bottom.equalTo(self.view).offset(-20);
//    }];
    
    
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        
//        make.top.equalTo(self.view.mas_top).offset(20);
//        
//        make.left.equalTo(self.view.mas_left).offset(20);
//        
//        make.right.equalTo(self.view.mas_right).offset(-20);
//        
//        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//    }];
}

@end
竖屏截图.png

横屏截图.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • 潇潇对晓杰表白成功,在双十一的前一天晚上,潇潇说,“和我在一起,怎么样?” 晚上在全民零点零零狂欢的时候,在朋友圈...
    浅柳荨阅读 484评论 2 4
  • 有时候不开心,不知道怎么倾诉,只想一个人呆着,可是现在又变了。 只想买买买,那通过各种各样的东西去安慰心灵,其实那...
    Ewen呵呵阅读 134评论 0 0
  • --安生成了安稳的七月,七月成了流浪着的安生。 --阳光和风无声地在空荡荡的屋檐穿行。那一刻,幸福被摧毁得灰飞烟灭...
    OnTheRoad8阅读 225评论 0 0
  • 上幼儿园时,每天都要走过2条长长的街,路上会经过电影院,餐馆,小门面,供销社等。 记得供销社是我最喜欢的地方,里面...
    AnnaFan阅读 150评论 0 0
  • 大学时期因为喜欢看电影选择了学校开设的一门关于电影的选修课,想着是能学习一些关于电影鉴赏的一些理论,但是没想到来世...
    StayHungry阅读 415评论 4 2