zoukankan      html  css  js  c++  java
  • iOS-使用代码约束布局(Masonry)

      一、引子

      学完了可视化编程的Xib和Storyboard,LZ对它们的感受就是的就是UI控件创建直接拖拽,尺寸适配加约束,Storyboard的页面跳转逻辑清晰可见,比起代码布局节省了很多的工作量。但是LZ相信还是很多人喜欢用纯代码来编写一个程序的(LZ就是一个,用代码写出来东西的成就感很足!),所以今天在这里给喜爱纯代码编程的程序猿们介绍一下纯代码约束布局的工具——Masonry。

      二、Masonry介绍

      Masonry源码下载地址:https://github.com/SoleMY/Masonry

      Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。

      Masonry支持的属性:

    /// 左侧
    @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;
    /// 横向中点
    @property (nonatomic, strong, readonly) MASConstraint *centerX;
    /// 纵向中点
    @property (nonatomic, strong, readonly) MASConstraint *centerY;
    /// 文本基线
    @property (nonatomic, strong, readonly) MASConstraint *baseline;
    
    // 在Masonry的源码中我们可以看到他们对应的NSLayoutAttribute的属性对应如下
    - (MASConstraint *)left {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
    }
    
    - (MASConstraint *)top {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTop];
    }
    
    - (MASConstraint *)right {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeRight];
    }
    
    - (MASConstraint *)bottom {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeBottom];
    }
    
    - (MASConstraint *)leading {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeading];
    }
    
    - (MASConstraint *)trailing {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTrailing];
    }
    
    - (MASConstraint *)width {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeWidth];
    }
    
    - (MASConstraint *)height {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeHeight];
    }
    
    - (MASConstraint *)centerX {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterX];
    }
    
    - (MASConstraint *)centerY {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterY];
    }
    
    - (MASConstraint *)baseline {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeBaseline];
    }

      iOS8之后Masonry新出了几个属性:

    /// 距离边框的距离,等同于选中Storyboard的Constrain to margins后加约束
    @property (nonatomic, strong, readonly) MASConstraint *leftMargin;
    @property (nonatomic, strong, readonly) MASConstraint *rightMargin;
    @property (nonatomic, strong, readonly) MASConstraint *topMargin;
    @property (nonatomic, strong, readonly) MASConstraint *bottomMargin;
    @property (nonatomic, strong, readonly) MASConstraint *leadingMargin;
    @property (nonatomic, strong, readonly) MASConstraint *trailingMargin;
    @property (nonatomic, strong, readonly) MASConstraint *centerXWithinMargins;
    @property (nonatomic, strong, readonly) MASConstraint *centerYWithinMargins;
    
    - (MASConstraint *)leftMargin {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeftMargin];
    }
    
    - (MASConstraint *)rightMargin {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeRightMargin];
    }
    
    - (MASConstraint *)topMargin {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTopMargin];
    }
    
    - (MASConstraint *)bottomMargin {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeBottomMargin];
    }
    
    - (MASConstraint *)leadingMargin {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeadingMargin];
    }
    
    - (MASConstraint *)trailingMargin {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTrailingMargin];
    }
    
    - (MASConstraint *)centerXWithinMargins {
        return [self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterXWithinMargins];
    }

      三、代码示例

    #import "RootViewController.h"
    // 引入头文件
    #import "Masonry.h"
    @interface RootViewController ()
    
    @end
    
    @implementation RootViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        
    #pragma mark label
        
        // 添加约束,不需要设置frame
        UILabel *label = [UILabel new];
        label.backgroundColor = [UIColor redColor];
        // 添加父视图,视图添加完成后才能进行布局
        [self.view addSubview:label];
        
        // 布局实现label方法
        [label mas_makeConstraints:^(MASConstraintMaker *make) {
            // 距离上边50
            // make:相当于你要布局的视图
            // equalTo(参照视图对象),如果参照视图是self.view,可以不设置参照视图的属性
            // offset(距离数值)
            make.top.equalTo(self.view).offset(50);
            
            // 距离左边100
            make.left.equalTo(self.view).offset(100);
            
            // 距离右边100
            make.right.equalTo(self.view).offset(-100);
            
            // 距离下边500
            make.bottom.equalTo(self.view).offset(-500);
            
        }];
    #pragma mark label1
        UILabel *label1 = [UILabel new];
        label1.backgroundColor = [UIColor greenColor];
        [self.view addSubview:label1];
        
        // 布局实现label1方法
        // 先布局参照视图,否则约束容易丢失
        [label1 mas_makeConstraints:^(MASConstraintMaker *make) {
            // equalTo(自定义视图),需要设置视图的属性
            // 如果数值为0,可以不写offset()
            make.top.equalTo(label.mas_bottom).offset(50);
            make.leading.equalTo(label.mas_leading);
            make.trailing.equalTo(label.mas_trailing);
            // 高度60
            // mas_equalTo(数值)
            make.height.mas_equalTo(60);
            
        }];
        
    #pragma mark label2
        UILabel *label2 = [UILabel new];
        label2.backgroundColor = [UIColor grayColor];
        [self.view addSubview:label2];
        
        // 设置距离参照视图的内边距 (上左下右)
        UIEdgeInsets padding = UIEdgeInsetsMake(400, 100, 100, 100);
        
        // 布局实现label2方法
        // 先布局参照视图,否则约束容易丢失
        [label2 mas_makeConstraints:^(MASConstraintMaker *make) {
            // 设置约束视图的边界距离self.view的边界值
            make.edges.equalTo(self.view).insets(padding);
            
    //        make.top.equalTo(self.view).offset(400);
    //        make.left.equalTo(self.view).offset(100);
    //        make.right.equalTo(self.view).offset(-100);
    //        
    //        make.bottom.equalTo(self.view).offset(-100);
            
        }];
    #pragma mark label3
        UILabel *label3 = [UILabel new];
        label3.backgroundColor = [UIColor orangeColor];
        [self.view addSubview:label3];
        
        [label3 mas_makeConstraints:^(MASConstraintMaker *make) {
            // 设置中心点一致
            make.center.equalTo(label2);
            
            // 设置大小
            // make.width = label2.width - 40
            // make.heigth = label2.height - 60
            make.size.equalTo(label2).sizeOffset(CGSizeMake(-40, -60));
        }];
    
        
    }
    
    @end

      在这里只是给大家举几个简单的例子(效果图):

  • 相关阅读:
    oracle 用户密码过期
    求字符串的长度
    oracle 行列装置
    SQL Server 2005参考:PIVOT
    SOAP 入门
    SQL Server 2005参考:数据汇总
    Silverlight 参考: 几何图形 MSDN
    jQuery参考:jquery中的$(document).ready()与window.onload的区别
    Silverlight开源项目与第三方控件收集
    Silverlight 项目开发准则参考
  • 原文地址:https://www.cnblogs.com/soley/p/5553448.html
Copyright © 2011-2022 走看看