Masonry框架使用示例(轉載)

前期準備:
下載Masonry並導入到工程中;
將Masonry.h導入當前控制器。
案例一:
要求:
無論在什麼尺寸的設備上(包括橫豎屏切換),紅色view都居中顯示。

最終效果
實現:

#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 防止block中的循環引用
    __weak typeof(self) weakSelf = self;
    
    // 初始化view並設置背景
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor redColor];
    [self.view addSubview:view];(注意:在添加約束前,要先添加到父控件中)
    
    // 使用mas_makeConstraints添加約束
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 添加大小約束(make就是要添加約束的控件view
        make.size.mas_equalTo(CGSizeMake(100, 100));
        // 添加居中約束(居中方式與self相同)
        make.center.equalTo(weakSelf.view);
    }];
}
@end
案例二:
要求:
無論在什麼尺寸的設備上(包括橫豎屏切換),黑色view的左、上邊距、大小都不變;
灰色view的右邊距不變
寬、高、上邊距黑色view相等

最終效果
實現:

#import "ViewController2.h"
#import "Masonry.h"
@interface ViewController2 ()
@end
@implementation ViewController2
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 初始化黑色view
    UIView *blackView = [UIView new];
    blackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:blackView];
    
    // 給黑色view添加約束
    [blackView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 添加大小約束
        make.size.mas_equalTo(CGSizeMake(100, 100));
        // 添加左、上邊距約束(左、上約束都是20
        make.left.and.top.mas_equalTo(20);
    }];
    
    // 初始化灰色view
    UIView *grayView = [UIView new];
    grayView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:grayView];
    
    // 給灰色view添加約束
    [grayView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 大小、上邊距約束與黑色view相同
        make.size.and.top.equalTo(blackView);
        // 添加右邊距約束(這裏的間距是有方向性的,左、上邊距約束爲正數,右、下邊距約束爲負數)
        make.right.mas_equalTo(-20);
    }];
}
@end
在上面的案例中,涉及以下內容:
1.?在Masonry中,and,with都沒有具體操作,僅僅是爲了提高程序的可讀性

make.left.and.top.mas_equalTo(20);
等價於

make.left.top.mas_equalTo(20);
2.?equalTo與mas_equalTo
如果約束條件是數值或者結構體等類型,可以使用mas_equalTo進行包裝。關於這個問題,我也不是很清楚,可以看看官方的解釋:
Instead of using NSNumber, you can use primitives and structs to build your constraints.By default, macros which support autoboxing are prefixed with mas_. Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS before importing Masonry.
我一般將數值類型的約束用mas_equalTo,而相對於某個控件,或者某個控件的某個約束,我會使用equalTo,如:

make.size.mas_equalTo(CGSizeMake(100, 100));
make.center.equalTo(weakSelf.view);
 
案例三:
要求:
有兩個view,黑色與灰色;
黑色view的左、上、右邊距均爲20,下邊距灰色view 20,寬度自適應,高度與灰色view平分整個界面;
灰色view寬度爲黑色view的一半(即左邊以中線起始),右、下邊距與黑色view相同,高度與黑色view相同。

最終效果
實現:

#import "ViewController3.h"
#import "Masonry.h"
@interface ViewController3 ()
@end
@implementation ViewController3
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    __weak typeof(self) weakSelf = self;
    
    // 初始化黑色view
    UIView *blackView = [UIView new];
    blackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:blackView];
    
    // 給黑色view添加約束
    [blackView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 添加左、上邊距約束
        make.left.and.top.mas_equalTo(20);
        // 添加右邊距約束
        make.right.mas_equalTo(-20);
    }];
    
    // 初始化灰色view
    UIView *grayView = [UIView new];
    grayView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:grayView];
    
    // 給灰色view添加約束
    [grayView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 添加右、下邊距約束
        make.bottom.and.right.mas_equalTo(-20);
        // 添加高度約束,讓高度等於黑色view
        make.height.equalTo(blackView);
        // 添加上邊距約束(上邊距 = 黑色view的下邊框 + 偏移量20
        make.top.equalTo(blackView.mas_bottom).offset(20);
        // 添加左邊距(左邊距 = 父容器縱軸橫軸中心 + 偏移量0
        make.left.equalTo(weakSelf.view.mas_centerX).offset(0);
    }];
}
案例四:
要求:
當鍵盤擋住輸入框時,輸入框自動向上彈到鍵盤上方。
實現:
這裏需要使用到Masonry的另外一個方法mas_updateConstraints。這個方法用於更新控件約束。
具體的實現方式可以下載Demo來看,這裏只貼出鍵盤彈出時的處理代碼:

- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {
    
    // 獲取鍵盤基本信息(動畫時長與鍵盤高度)
    NSDictionary *userInfo = [notification userInfo];
    CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
    CGFloat keyboardHeight = CGRectGetHeight(rect);
    CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    
    // 修改下邊距約束
    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {
        
        make.bottom.mas_equalTo(-keyboardHeight);
    }];
    
    // 更新約束
    [UIView animateWithDuration:keyboardDuration animations:^{
        
        [self.view layoutIfNeeded];
    }];
}
總結:
可以給控件添加left/right/top/bottom/size/height/width/insert約束;
庫提供了三個方法,mas_makeConstraints添加約束,mas_updateConstraints修改約束,mas_remakeConstraints清除以前約束並添加新約束;
可以通過view.mas_bottom獲得view的某個約束;
在約束的block中,使用make來給當前控件添加約束。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章