Masonry框架使用示例(转载)

4 篇文章 0 订阅
前期准备:
下载Masonry并导入到工程中;
将Masonry.h导入当前控制器。
    案例一:
    要求:
    无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。
    计算机生成了可选文字:O O O iOS Simulator - iPhone 5 - iPhone 5 / ... Carrier 4:21 PM
    最终效果
    实现:

    #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相等
      计算机生成了可选文字:O O O iOS Simulator - iPhone 5 - iPhone 5 / ... Carrier 4:52 PM
      最终效果
      实现:

      #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相同。
        计算机生成了可选文字:O O O iOS Simulator - iPhone 5 - iPhone 5 / ... Carrier 10:53 PM
        最终效果
        实现:

        #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来给当前控件添加约束。
          • 1
            点赞
          • 0
            收藏
            觉得还不错? 一键收藏
          • 1
            评论
          评论 1
          添加红包

          请填写红包祝福语或标题

          红包个数最小为10个

          红包金额最低5元

          当前余额3.43前往充值 >
          需支付:10.00
          成就一亿技术人!
          领取后你会自动成为博主和红包主的粉丝 规则
          hope_wisdom
          发出的红包
          实付
          使用余额支付
          点击重新获取
          扫码支付
          钱包余额 0

          抵扣说明:

          1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
          2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

          余额充值