关于自动布局Masonry学习小结

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

//
//  ViewController.m
//  Masonry自动布局
//
//  Created by 王木木 on 15/11/18.
//  Copyright © 2015年 王木木. All rights reserved.
//学习自http://www.cocoachina.com/ios/20141219/10702.html
/*
 @property (nonatomic, strong, readonly) MASConstraint *left;      左侧
 @property (nonatomic, strong, readonly) MASConstraint *top;       上侧
 @property (nonatomic, strong, readonly) MASConstraint *right;     右侧
 @property (nonatomic, strong, readonly) MASConstraint *bottom;    下侧
 @property (nonatomic, strong, readonly) MASConstraint *leading;   首部
 @property (nonatomic, strong, readonly) MASConstraint *trailing;  尾部
 @property (nonatomic, strong, readonly) MASConstraint *width;     宽
 @property (nonatomic, strong, readonly) MASConstraint *height;    高
 @property (nonatomic, strong, readonly) MASConstraint *centerX;   横向中点
 @property (nonatomic, strong, readonly) MASConstraint *centerY;   纵向中点
 @property (nonatomic, strong, readonly) MASConstraint *baseline;  文本基线
 */


/*
 首先在Masonry中能够添加autolayout约束有三个函数
 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
 - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
 mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
 mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
 mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
 三种函数善加利用 就可以应对各种情况了
 */

#import "ViewController.h"
#import "View+MASAdditions.h"
#import "View+MASShorthandAdditions.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //    设置约束前
    
    [self view1];
    
}
//1. [基础] 居中显示一个view
-(void)view1{
    
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor blackColor];
    [self.view addSubview:view];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
}
//2让一个view略小于其superView(边距为10)
-(void)view2{
    
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor blackColor];
    //在做autoLayout之前 一定要先将view添加到superview上 否则会报错
    [self.view addSubview:view];
    //mas_makeConstraints就是Masonry的autolayout添加函数 将所需的约束添加到block中行了
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        //将sv居中
        make.center.equalTo(self.view);
        //将size设置成(300,300)
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
    UIView *view1 = [UIView new];
    view1.backgroundColor = [UIColor redColor];
    [view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        //        make.edges.equalTo(view).width.insets(UIEdgeInsetsMake(10, 10, 10, 10));
        /**********************************************************************/
        /*
         这里有意思的地方是and和with 其实这两个函数什么事情都没做
         - (MASConstraint *)with {
         return self;
         }
         - (MASConstraint *)and {
         return self;
         }
         但是用在这种链式语法中 就非常的巧妙和易懂 不得不佩服作者的心思(虽然我现在基本都会省略)
         */
        make.top.equalTo(view.mas_top).with.offset(20);
        make.left.equalTo(view).with.offset(20);
        make.bottom.equalTo(view).with.offset(-20);
        make.right.equalTo(view).with.offset(-20);
        /**********************************************************************/
        //        make.top.left.bottom.and.right.equalTo(view).with.insets(UIEdgeInsetsMake(30, 30, 30, 30));
        /**********************************************************************上面三种效果一样*/
    }];
    
    
}
//3. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度)
-(void)view3{
    //括号里面是数字或定值时用 mas_equalTo  括号里面是量词 对象的时候用equalTo
    int padd = 10;
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor blackColor];
    UIView *view1 = [UIView new];
    view1.backgroundColor = [UIColor yellowColor];
    UIView *view2 = [UIView new];
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view];
    [view addSubview:view1];
    [view addSubview:view2];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(view.mas_centerY);
        make.left.equalTo(view.mas_left).with.offset(padd);
        make.right.equalTo(view2.mas_left).with.offset(-padd);
        make.height.mas_equalTo(@150);
        make.width.equalTo(view2);
        
    }];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(view.mas_centerY);
        make.left.equalTo(view1.mas_right).with.offset(padd);
        make.right.equalTo(view.mas_right).with.offset(-padd);
        make.height.mas_equalTo(@150);
        make.width.mas_equalTo(view1.mas_width);
        
    }];
    
    
    
    
    
}

//4. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize
-(void)view4{
    
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor blackColor];
    UIScrollView *scroll = [UIScrollView new];
    scroll.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:view];
    [view addSubview:scroll];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
    [scroll mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(view).width.insets(UIEdgeInsetsMake(5, 5, 5, 5));
    }];

}

-(void)view5{
    UITextField *pwdTextField = [UITextField new];
    pwdTextField.backgroundColor = [UIColor blackColor];
    [self.view addSubview:pwdTextField];
    UITextField *twopwdTextField = [UITextField new];
    twopwdTextField.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:twopwdTextField];
    twopwdTextField.placeholder = @"请再次输入密码";
    twopwdTextField.layer.masksToBounds = YES;
    twopwdTextField.layer.cornerRadius = 5;
    
    [pwdTextField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
    
    [twopwdTextField mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.center.equalTo(self.view);
        make.top.equalTo(pwdTextField.mas_bottom).with.offset(20);
//        make.centerY.mas_equalTo(pwdTextField.mas_centerY);
        make.left.mas_equalTo(pwdTextField.mas_left);
        make.right.mas_equalTo(pwdTextField.mas_right);
        make.width.mas_equalTo(pwdTextField.mas_width);
        make.height.mas_equalTo(pwdTextField.mas_height);
    }];
    

}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end