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来给当前控件添加约束。

你可能感兴趣的:(OC,iOS)