iOS-佈局-Masonry

一.說明：demo中的舉例視圖介紹

 UIView        *_blackView;     做爲父視圖

 UIView        *_redView;       與父視圖內邊距爲10

 UIView        *_orangeView1;   父視圖的內左視圖

 UIView        *_orangeView2;   父視圖的內右視圖

 

二.先上演示截圖

1黑色父視圖

2.在黑色父視圖上添加距父視圖內邊距爲10的紅色視圖

3.在黑色父視圖上添加兩個橘黃色視圖

4.在黑色父視圖上添加三個等邊距的視圖

5.在黑色視圖上添加滑動視圖

 (1)滑動視圖的頭視圖

(2)滑動視圖的尾部視圖

三.解惑

1.關鍵詞

make                   須要添加約束的對象

and                      無具體意義的語句連貫詞

with                     無具體意義的語句連貫詞

offset                   邊距

equalTo                相對於，等同於

multipliedBy    倍數

舉例：make.width.equalTo(self.view.mas_width).multipliedBy(0.5);//設置寬度爲self.view的一半，multipliedBy是倍數的意思，也就是，使寬度等於self.view寬度的0.5倍

 

2.make的屬性

// 左側
@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;
// 中心點x
@property (nonatomic, strong, readonly) MASConstraint *centerX;
// 中心點y
@property (nonatomic, strong, readonly) MASConstraint *centerY;
// 文本基線
@property (nonatomic, strong, readonly) MASConstraint *baseline;

 

 3.分類

分類	含義	舉例
size	尺寸，包含(wdith,height)	make.size.mas_equalTo(CGSizeMake(300, 300));
edges	邊距，包含(top,left,right,bottom)	make.edges.equalTo(_blackView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10)); 能夠寫成 make.top.equalTo(_blackView).with.offset(10);       make.left.equalTo(_blackView).with.offset(10);     make.bottom.equalTo(_blackView).with.offset(-10);     make.right.equalTo(_blackView).with.offset(-10); 或者 make.top.left.bottom.and.right.equalTo(_blackView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
center	中心，包含(centerX,centerY)	make.center.equalTo(self.view);

 

4.對比

 

其中leading與left trailing與right 在正常狀況下是等價的 可是當一些佈局是從右至左時(好比阿拉伯文?沒有相似的經驗) 則會對調 換句話說就是基本能夠不理不用 用left和right就行了。

 

 

 

以上說明了上下左右等屬性的對應替代屬性。

 

 

四.三個添加約束的方法

 //設置約束

 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block;

 

 //若是以前已經有約束,則更新新的約束,若是沒有約束,則添加約束

 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *))block;

 

//將以前的約束所有刪除,添加新的約束

 - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

 

五.添加控件

(

 1.須要把控件先添加到父視圖上，不然會報錯。

 2.不須要 _blackView.translatesAutoresizingMaskIntoConstraints = NO;已經封裝進去了

 3.只須要設置一些與控件frame無關的就能夠了

)

_blackView = [UIView new];

_blackView.backgroundColor = [UIColor blackColor];

// 在作autoLayout 以前 必定要先將view添加到superView上， 不然會報錯

[self.view addSubview:_blackView];

 

六.給控件添加約束

效果：控件的bounds(0,0,300,300).控件的中心在self.view的中心上。兩個約束肯定了控件的位置。

 //mas_makeConstrains就是Masonry的autoLayout添加函數 將所需的約束添加到block中就好了

    [_blackView mas_makeConstraints:^(MASConstraintMaker *make) {

        //居中

        make.center.equalTo(self.view);

        //將size設置成(300,300);

        make.size.mas_equalTo(CGSizeMake(300, 300));

    }];

 

七.代碼

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()
{
    UIView        *_blackView;
    UIView        *_redView;
    UIView        *_orangeView1;
    UIView        *_orangeView2;
    UIScrollView  *_scrolView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    [self addBlackView];
   
    //[self addRedView];
   
    //[self addTwoOrangeColorView];
   
    //[self addMoreView];
   
    [self addScrolView];
}
#pragma mark 添加黑色視圖
- (void)addBlackView
{
    _blackView = [UIView new];
    _blackView.backgroundColor = [UIColor blackColor];
   
    // 在作autoLayout 以前 必定要先將view添加到superView上， 不然會報錯
    [self.view addSubview:_blackView];
  
    //mas_makeConstrains就是Masonry的autoLayout添加函數 將所需的約束添加到block中就好了
    [_blackView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        //居中
        make.center.equalTo(self.view);
      
        //將size設置成(300,300);
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
}
#pragma mark 添加紅色視圖
- (void)addRedView
{
    _redView = [UIView new];
    _redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_redView];
   
    [_redView mas_makeConstraints:^(MASConstraintMaker *make) {
 
        //這三種方式等價
       

//方式一：
        make.edges.equalTo(_blackView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

//方式二：        
//        make.top.equalTo(_blackView).with.offset(10);
//        make.left.equalTo(_blackView).with.offset(10);
//        make.bottom.equalTo(_blackView).with.offset(-10);
//        make.right.equalTo(_blackView).with.offset(-10);

//方式三：
//        make.top.left.bottom.and.right.equalTo(_blackView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];
}
#pragma mark 添加倆橘色視圖
- (void)addTwoOrangeColorView
{
    //定義邊距爲10
    int padding1 = 10;
   
    _orangeView1 = [UIView new];
    _orangeView1.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:_orangeView1];
   
    _orangeView2 = [UIView new];
    _orangeView2.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:_orangeView2];
   
    [_orangeView1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(_blackView.mas_centerY);
        make.left.equalTo(_blackView.mas_left).with.offset(padding1);
        make.right.equalTo(_orangeView2.mas_left).with.offset(-padding1);
        make.height.mas_equalTo(@150);
        make.width.equalTo(_orangeView2);
    }];

   
    [_orangeView2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(_blackView.mas_centerY);
        make.left.equalTo(_orangeView1.mas_right).with.offset(padding1);
        make.right.equalTo(_blackView.mas_right).with.offset(-padding1);
        make.height.mas_equalTo(@150);
        make.width.equalTo(_orangeView1);
    }];
}
#pragma mark 添加多個等間距的視圖
- (void)addMoreView
{
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor redColor];
    [_blackView addSubview:view1];
   
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor yellowColor];
    [_blackView addSubview:view2];
   
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor greenColor];
    [self.view addSubview:view3];
   
   
    int padding = 10;
   
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        //設置豎直方向約束
        // 設置view1的Y中心點
        make.centerY.mas_equalTo(_blackView);
        // 設置高度
        make.height.mas_equalTo(@150);
       
        //設置水平方向約束
        // 設置左側距離父視圖10
        make.left.equalTo(_blackView).with.offset(padding);
        // 設置右側距離和view2的左側相隔10
        make.right.equalTo(view2.mas_left).with.offset(-padding);
        // 寬度設置和view2以及view3相同
        make.width.equalTo(@[view2, view3]);
    }];
   
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(_blackView);
        make.height.mas_equalTo(view1);
        make.width.equalTo(@[view1, view3]);
    }];
   
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(_blackView);
        make.left.equalTo(view2.mas_right).with.offset(padding);
        make.right.equalTo(_blackView).with.offset(-padding);
        make.height.mas_equalTo(view1);
        make.width.equalTo(@[view2, view1]);
    }];
}
#pragma mark 添加滑動視圖
- (void)addScrolView
{
    _scrolView = [UIScrollView new];
    _scrolView.backgroundColor = [UIColor whiteColor];
    [_blackView addSubview:_scrolView];
    [_scrolView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(_blackView).with.insets(UIEdgeInsetsMake(5, 5, 5, 5));
    }];
   
    UIView * container = [UIView new];
    [_scrolView addSubview:container];
    [container mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(_scrolView);
        make.width.equalTo(_scrolView);
    }];
   
    int count = 10;
    UIView * lastView = nil;
    for (int i = 0; i <= count; i ++)
    {
        UIView * subView = [UIView new];
        [container addSubview:subView];
        subView.backgroundColor = [UIColor colorWithHue:(arc4random() % 156 / 256.0) saturation:(arc4random() % 128 / 256.0) brightness:(arc4random() % 128 / 256.0) alpha:1];
        [subView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.and.right.equalTo(container);
            make.height.equalTo(@(20*i));
           
            if (lastView) {
                make.top.mas_equalTo(lastView.mas_bottom);
            }
            else
            {
                make.top.mas_equalTo(container.mas_top);
            }
        }];
        lastView = subView;
    }
    [container mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView.mas_bottom);
    }];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
   
    NSLog(@"_blackView.frame: %@",NSStringFromCGRect(_blackView.frame));
   
    NSLog(@"_blackView1.frame: %@",NSStringFromCGRect(_blackView.frame));
   
    NSLog(@"_orangeView1.frame: %@",NSStringFromCGRect(_orangeView1.frame));
   
    NSLog(@"_orangeView2.frame: %@",NSStringFromCGRect(_orangeView2.frame));
   
    NSLog(@"_scrolView.frame: %@",NSStringFromCGRect(_scrolView.frame));
}

@end