iOS開發 Masonry的簡單使用

時間 2019-11-16

標籤 ios 開發 masonry 簡單使用欄目 iOS 简体版

原文原文鏈接

首先，在正式使用Masonry以前,咱們先來看看在xib中咱們是如何使用AutoLayout函數

從圖中咱們能夠看出,只要設置相應得侷限，控制好父視圖與子視圖之間的關係就應該很ok的拖出你須要的需求。這裏就不詳細講解具體拖拽的方法.....atom

而後,咱們按着上圖的屬性來看看如何簡單得使用Masonryorm

這裏是Masonry給咱們的屬性視頻

@property (nonatomic, strong, readonly) MASConstraint *left; //左側blog

@property (nonatomic, strong, readonly) MASConstraint *top;      //上側rem

@property (nonatomic, strong, readonly) MASConstraint *right;      //右側get

@property (nonatomic, strong, readonly) MASConstraint *bottom;   //下側it

@property (nonatomic, strong, readonly) MASConstraint *leading;   //首部io

@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給咱們提供了3個方法

//新增約束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

//更新約束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

//清楚以前的全部約束,只會保留最新的約束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

合理的利用這個3個函數，基本上能夠應對任何狀況了

準備工做已經完成，咱們來看幾個小demo

1.居中一個view

    // 防止block中的循環引用
    __weak typeof (self) weakSelf = self;
    // 初始化一個View
    UIView *bgView = [[UIView alloc]init];
    bgView.backgroundColor = [UIColor redColor];
    [self.view addSubview:bgView];
    // 使用mas_makeConstraints添加約束
    [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf.view);
        make.size.mas_equalTo(CGSizeMake(200, 200));
    }]；

效果圖1

是否是很簡單，這裏有一點要必須注意下，添加約束前必需要把view添加到視圖上。

那我要是不想固定他得寬高呢，讓view的大小根據間距來控制怎麼作

咱們來設置一個基於父視圖間距爲10的view

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
}]；

這樣就ok了！！！

make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));

等同於

    make.top.equalTo(weakSelf.view).with.offset(10);
    make.left.equalTo(weakSelf.view).with.offset(10);
    make.bottom.equalTo(weakSelf.view).with.offset(-10);
    make.right.equalTo(weakSelf.view).with.offset(-10);

2.多個view

2個view橫向居中，第二個view距離第一個view間距爲10

    UIView *view1 = [[UIButton alloc]init];
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(90, 90));
        make.centerX.equalTo(weakSelf.view);
        make.top.width.offset(90);
    }];

    UIView *view2 = [[UILabel alloc]init];
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.centerX.equalTo(view1);
        make.top.equalTo(view1.mas_bottom).with.offset(20);
    }];

效果圖2

你們有沒有看到第二個view代碼中

make.top.equalTo(view1.mas_bottom).with.offset(20);

view1.mas_bottom 是什麼意思呢？若是隻寫view1，Masonry會默認是view1中最上面開始算起，也就是view2 間距view1 Y軸開始20的間距

經過這個也就能夠很方便的設置view同另外一個view之間上下左右的間距了

你們不妨試試view.mas_top view.mas_left view.mas_right 的效果是什麼樣得了

下面我附上一個完整的界面demo,你們能夠看看

效果圖3

代碼以下：

- (void)setupFrame {
    __weak typeof(self) weakSelf = self;

    //上傳頭像
    UIButton *iconBtn = [[UIButton alloc]init];
    [iconBtn setCornerRadius:45];
    [iconBtn setBackgroundImage:[UIImage imageNamed:@"huantouxiang"] forState:UIControlStateNormal];
    [iconBtn addTarget:self action:@selector(iconButton) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:iconBtn];
    self.iconBtn = iconBtn;

    [self.iconBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(90, 90));
        make.centerX.equalTo(weakSelf.view);
        make.top.width.offset(90);
    }];

    //上傳社區頭像文字提醒
    UILabel *iconLabel = [[UILabel alloc]init];
    iconLabel.textColor = c3;
    iconLabel.text = @"上傳社團頭像";
    iconLabel.font = [UIFont systemFontOfSize:15];
    [self.view addSubview:iconLabel];

    [iconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(iconBtn);
        make.top.equalTo(iconBtn.mas_bottom).with.offset(20);
    }];

    //社團編輯圖標
    UIImageView *editIcon = [[UIImageView alloc]init];
    editIcon.image = [UIImage imageNamed:@"bianxie"];
    [self.view addSubview:editIcon];

    [editIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(25, 20));
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.top.equalTo(iconLabel.mas_bottom).with.offset(30);
    }];

    //社團名
    UITextField *nameText = [[UITextField alloc]init];
    nameText.placeholder = @"請填寫社區名(社團名最多6個字)";
    [self.view addSubview:nameText];
    self.nameText = nameText;

    [nameText mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@20);
        make.centerY.equalTo(editIcon);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.left.equalTo(editIcon.mas_right).with.offset(5);
    }];

    //分割線
    UIImageView *xian = [[UIImageView alloc]init];
    xian.backgroundColor = DBColor(226, 226, 226);
    [self.view addSubview:xian];

    [xian mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@1);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(editIcon.mas_bottom).with.offset(5);
    }];

    //選擇標籤
    UILabel *tagLabel = [[UILabel alloc]init];
    tagLabel.text = @"選擇標籤";
    tagLabel.textColor = c3;
    tagLabel.font = [UIFont systemFontOfSize:15];
    [self.view addSubview:tagLabel];

    [tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@20);
        make.width.mas_equalTo(@60);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.top.equalTo(xian).with.offset(35);
    }];

    //跳轉標籤選擇
    UITextField *tagText = [[UITextField alloc]init];
    tagText.placeholder = @"美容顏";
    tagText.borderStyle=UITextBorderStyleRoundedRect;
    tagText.delegate = self;
    [tagText addTarget:self action:@selector(textTag) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:tagText];

    [tagText mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(tagLabel);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.left.equalTo(tagLabel.mas_right).with.offset(5);
    }];

    //tagView
    self.tagView = ({
        SKTagView *view = [SKTagView new];
        view.backgroundColor = [UIColor clearColor];
        view.padding    = UIEdgeInsetsMake(0, 0, 0, 0);
        view.insets    = 15;
        view.lineSpace = 10;
        __weak SKTagView *weakView = view;
        view.didClickTagAtIndex = ^(NSUInteger index){
            //Remove tag
            [weakView removeTagAtIndex:index];
        };
        view;
    });
    [self.view addSubview:self.tagView];
    [self.tagView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(tagText.mas_bottom).with.offset(10);
    }];

    //label標識語
    UILabel *label = [[UILabel alloc]init];
    label.font = [UIFont systemFontOfSize:13];
    label.textColor = [UIColor redColor];
    label.text = @"PS:成員和視頻越多得社團越容易被發現!";
    [self.view addSubview:label];

    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(self.tagView.mas_bottom).with.offset(20);
    }];

    UIButton *commitBtn = [[UIButton alloc]init];
    [commitBtn setCornerRadius:5];
    [commitBtn setBorderWidth:1 color:DBTextThemeColor];
    [commitBtn setTitleColor:DBTextThemeColor forState:UIControlStateNormal];
    commitBtn.titleLabel.font = [UIFont systemFontOfSize:15];
    [commitBtn setTitle:@"確認發佈" forState:UIControlStateNormal];
    [commitBtn addTarget:self action:@selector(commitButton) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:commitBtn];

    [commitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@30);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(label.mas_bottom).with.offset(50);
    }];
}