美文网首页自己尝试等装一下复制粘贴将来跳槽用
iOS-基础视图约束--Masonry的简单使用总结

iOS-基础视图约束--Masonry的简单使用总结

作者: 云之君兮鹏 | 来源:发表于2016-06-21 21:18 被阅读2123次
    更深月色半人家,北斗阑干南斗斜<小火猴>

    简介:

    <strong>Masonry<strong> 是一个轻量级的布局框架 ( 是一个用代码写iOS或OS界面的第三方库,可以代替Auto layout。是目前最流行的AutoLayout框架.) 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Mac OS X。能实现 AutoLayout 的效果,也就是给我们想要的 View 视图进行约束,以满足不同尺寸设备和其他场景的屏幕适配.

    下面是操作的一些属性,我们可以在AutoLayout 里面对应找到可以结合思考

    @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;//文本基线```
    
    ---------------------
    ####简单的语法总结:
    >with和and
    基本没用过,方法的结果是返回对象本身,就是对其没有任何的操作.有人说就是为了代码的可读性,我道行太浅感觉有与没有差别不大.
    
    -----
    >mas_equalTo 和 equalTo 区别:
    masequalTo 比equalTo多了类型转换操作,一般来说,大多数时候两个方法都是 通用的,但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理,使用equalTo。
    >>mas_equalTo:这个方法会对参数进行封装( 可以跟数据和对象 )
     equalTo:这个方法不会对参数进行封装( 后面括号里面必须是对象 )
    现在的 mas_equalTo: > equalTo:
    
    ------
    >mas_makeConstraints 负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
    >>给view添加约束,约束方式有几种,分别是边距,宽,高,左上右下距离,基准线。添加过约束后可以有修正,修正有offset(位移)修正和multipliedBy(倍率)修正。(语法有`make.equalTo or make.greaterThan Or EqualTo or make.lessThanOrEqualTo + 倍数和位移修正`。使用 mas_makeConstraints方法的元素必须事先添加到父元素的中)
    
    >mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
    mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
    
    ------------
    ####使用的步骤:
    >1.把Masonry的文件包拉进工程
    2.在需要的地方引入头文件 `#import "Masonry.h"`
    3.建立视图并添加到父视图之中
    4.调用Masonry封装的方法进行约束
    
    ---------------
    ####简单例子太难得我现在也短时间写不出来
    1.首先写个宏定义:
    
     ```object
    #define MS(MyWeakSelf)  __weak __typeof(&*self)MyWeakSelf = self;
    

    解释下:这是一个带参数的宏定义,前面 MS(MyWeakSelf)代替后面的__weak __typeof(&*self)MyWeakSelf = self; 其实就是定义一个与当前self同一个类型的变量(名为你输入的参数)并且是用__weak修饰的.其目的为了在Block里面进行视图的一些操作.

    2.创建视图并添加到父视图上
    // 一个背景蓝色的View长宽均是400中心在屏幕中心

    UIView *centerViewBlue = [UIView new];
        centerViewBlue.backgroundColor = [UIColor blueColor];
        [self.view addSubview:centerViewBlue];
    
    

    3.使用Masonry方法进行约束

    
     MS(MS);// 先走一下这个宏定义方法 相当于弱引用MS替代self
    
    // mas_makeConstraints:这个方法只会添加新的约束
        [centerViewBlue mas_makeConstraints:^(MASConstraintMaker *make) {
    
    // 在这个block里面利用make对象创建新的约束
    // 尺寸约束
       make.size.mas_equalTo(CGSizeMake(400, 400));
    
    // 位置约束
            make.centerX.mas_equalTo(MS.view.mas_centerX);
            make.centerY.mas_equalTo(MS.view.mas_centerY);
    //等价 :make.center.mas_equalTo(CGPointMake(0, 0));这句话的意思是在相对于父视图偏移量均0也可以写成make.center.mas_equalTo(MS.view);
            
        }];
    
    
    蓝色View的中心在屏幕中心而且长宽固定400

    4.加一个红色视图View并约束使其四边距离蓝色的都是100

        UIView *redView = [UIView new];
        redView.backgroundColor = [UIColor redColor];
        [self.view addSubview:redView];
        __weak UIView *blueView = centerViewBlue;
        [redView mas_makeConstraints:^(MASConstraintMaker *make) {
    
    // 四边的边距都是固定值
            make.left.equalTo(blueView).offset(100);  // 向右100间距
            make.right.equalTo(blueView).offset(-100); // 向左100间距
            make.top.equalTo(blueView).offset(100); // 向下100间距
            make.bottom.equalTo(blueView).offset(-100); // 向左100间距
    
    //效果和下面的代码是一样的
      make.edges.equalTo(blueView).with.insets(UIEdgeInsetsMake(100, 100, 100, 100)
        }];
    
    
    红色的View距离蓝色的View四面边距都是100

    5,加一个绿色的大小是红色的一半,位于红色的中心
    // 绿色的控件

        UIView *greeView = [UIView new];
        
        greeView.backgroundColor = [UIColor greenColor];
        
        [self.view addSubview:greeView];
    
        __weak UIView *redViewTemp = redView;
        
       [greeView mas_makeConstraints:^(MASConstraintMaker *make) {
            // 宽高是红色视图的0.5倍
            make.size.mas_equalTo(redViewTemp).multipliedBy(0.5);
            // 中心是红色视图的中心
            make.center.mas_equalTo(redViewTemp);
      
        }];
    
    
    绿色View长宽是红色View的一半中心一样

    难的,我也掌握不好,有时间再写点其他复杂的

    '

    相关文章

      网友评论

        本文标题:iOS-基础视图约束--Masonry的简单使用总结

        本文链接:https://www.haomeiwen.com/subject/jwygdttx.html