博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS ------自动布局之Masonry的使用
阅读量:4289 次
发布时间:2019-05-27

本文共 6629 字,大约阅读时间需要 22 分钟。

 

 

 

============基本用法

#import "ViewController.h"

 

// 解决 mas_

//define this constant if you want to use Masonry without the 'mas_' prefix

#define MAS_SHORTHAND

 

// 解决对数据的自动装箱

//define this constant if you want to enable auto-boxing for default syntax

#define MAS_SHORTHAND_GLOBALS

 

#warning  宏定义一定要放到导入头文件之前 ,不然会影响编译

 

// 导入头文件

#import "Masonry.h"

 

 

@interface ViewController ()

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [superviewDidLoad];

    

#warning Mansory 会自动的帮我们把autoresizing给关闭

    

    UIView *redView = [[UIViewalloc]init];

    redView.backgroundColor = [UIColorredColor];

    

    [self.viewaddSubview:redView];

    

    /**

     第一种写法

     

     [redView mas_makeConstraints:^(MASConstraintMaker *make) {

     // make 在这里就代表被约束的view

     // 顶部

     make.top.equalTo(self.view.mas_top).offset(20);

     // 设置左侧

     make.left.equalTo(self.view.mas_left).offset(20);

     // 设置右侧

     make.right.equalTo(self.view.mas_right).offset(-20);

     

     // 设置高度 ,这里使用的时候:装箱

     make.height.mas_equalTo(40);

     

     }];

     */

    

    

    /**

     第二种写法

     如果被约束view的属性和参照view的属性相同的话可以省略掉

     [redView mas_makeConstraints:^(MASConstraintMaker *make) {

     make.top.equalTo(self.view).offset(20);

     make.left.equalTo(self.view).offset(20);

     make.right.equalTo(self.view).offset(-20);

     make.height.mas_equalTo(40);

     }];

     */

    

    // 如果想要省略掉 mas_ 导入  #define MAS_SHORTHAND

    

//    [redView makeConstraints:^(MASConstraintMaker *make) {

//        make.top.equalTo(self.view).offset(20);

//        make.left.equalTo(self.view).offset(20);

//        make.right.equalTo(self.view).offset(-20);

//        make.height.equalTo(40);

//    }];

 

    

    

    /**

     如果,被约束view两个属性的值是相同的,可以连写

     

     [redView mas_makeConstraints:^(MASConstraintMaker *make) {

     

     make.top.left.equalTo(self.view).offset(20);

     make.right.equalTo(self.view).offset(-20);

     make.height.mas_equalTo(40);//自己的高度

     

     }];

     */

    

    

    /**相对于父view设置UIEdgeInset---就是相对于父view的四条边的距离

     [redView mas_makeConstraints:^(MASConstraintMaker *make) {

     make.edges.mas_equalTo(UIEdgeInsetsMake(20, 20, 20, 20));//相当于

    make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));这里的with可以省略掉;

     }];

     */

    

    // 默认的参照view 就是自己的父view

    [redView makeConstraints:^(MASConstraintMaker *make) {

        make.top.left.offset(20);//相对于父view的上边,左边都偏移20;

        make.right.offset(-20);

        make.height.equalTo(40);

    }];

    

    // 蓝色的view

    

    UIView *blueView = [[UIViewalloc]init];

    blueView.backgroundColor = [UIColorblueColor];

    

    [self.viewaddSubview:blueView];

    

    [blueView makeConstraints:^(MASConstraintMaker *make) {

     make.top.equalTo(redView.bottom).offset(20);//blueview的上边等于redview的上边偏移20;

        make.right.equalTo(redView).offset(0);//blueview的右边等于redview的右边偏移0;

        make.height.equalTo(redView);//blueview和redview的高度一样;

       make.width.equalTo(redView).multipliedBy(0.5);//blueView的宽度是redview宽度的一半;

        

        

    }];

    

    

    /**

     更新约束 ,在原有的基础上 ,对要更新的约束进行修改

     如果使用 makeConstraints就会造成约束冲突

     [redView updateConstraints:^(MASConstraintMaker *make) {

     make.height.equalTo(80);

     }];

    */

    

    /**

     重新设置约束

     把原有的约束都清空掉,然后设置新的

     

     [redView remakeConstraints:^(MASConstraintMaker *make) {

     

     make.height.equalTo(50);

     }];

     */

      

}

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);[view1 mas_makeConstraints:^(MASConstraintMaker *make) {    make.top.equalTo(superview.mas_top).with.offset(padding.top); //view1的top相对于父 view的top偏移多少,这里with也可以省略掉;
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);    make.right.equalTo(superview.mas_right).with.offset(-padding.right);}];

 

=======================高级用法

2. UIView/NSView

if you want view.left to be greater than or equal to label.left :

//these two constraints are exactly the samemake.left.greaterThanOrEqualTo(label);make.left.greaterThanOrEqualTo(label.mas_left);

3. NSNumber----设置区间

Auto Layout allows width and height to be set to constant values. if you want to set view to have a minimum and maximum width you could pass a number to the equality blocks:

//width >= 200 && width <= 400make.width.greaterThanOrEqualTo(@200);make.width.lessThanOrEqualTo(@400)

However Auto Layout does not allow alignment attributes such as left, right, centerY etc to be set to constant values. So if you pass a NSNumber for these attributes Masonry will turn these into constraints relative to the view’s superview ie:

//creates view.left = view.superview.left + 10make.left.lessThanOrEqualTo(@10)

Instead of using NSNumber, you can use primitives and structs to build your constraints, like so:

make.top.mas_equalTo(42);make.height.mas_equalTo(20);make.size.mas_equalTo(CGSizeMake(50, 100));make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

By default, macros which support  are prefixed with mas_. Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS before importing Masonry.

4. NSArray

An array of a mixture of any of the previous types

make.height.equalTo(@[view1.mas_height, view2.mas_height]);make.height.equalTo(@[view1, view2]);make.left.equalTo(@[view1, @100, view3.right]);

 

 

Learn to prioritize----设置优先级

.priority allows you to specify an exact priority

.priorityHigh equivalent to UILayoutPriorityDefaultHigh

.priorityMedium is half way between high and low

.priorityLow equivalent to UILayoutPriorityDefaultLow

Priorities are can be tacked on to the end of a constraint chain like so:

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();make.top.equalTo(label.mas_top).with.priority(600);

Composition, composition, composition

Masonry also gives you a few convenience methods which create multiple constraints at the same time. These are called MASCompositeConstraints

edges---------设置内边距来约束,一般只针对父 view;

// make top, left, bottom, right equal view2make.edges.equalTo(view2);// make top = superview.top + 5, left = superview.left + 10,//      bottom = superview.bottom - 15, right = superview.right - 20make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size-----根据

// make width and height greater than or equal to titleLabelmake.size.greaterThanOrEqualTo(titleLabel)// make width = superview.width + 100, height = superview.height - 50make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50));//对相应的宽和高作加减;

center-------根据中心来设置

// make centerX and centerY = button1make.center.equalTo(button1)// make centerX = superview.centerX - 5, centerY = superview.centerY + 10make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10));//对中心点作偏移

You can chain view attributes for increased readability:

// All edges but the top should equal those of the superviewmake.left.right.and.bottom.equalTo(superview);//如果几个值都一样可以连写。make.top.equalTo(otherView);

 

 

******报错:

'couldn't find a common superview for 出现这个错误的原因是,你所设置约束的这个控件和所依赖的控件没有共同的父视图。因为没有共同的视图作为参照,frame 就不能转换到一个相同的坐标系。这个问题经常会出现在,我们创建了要设置约束的视图,而没有将它添加到父控件中,又或者,要设置约束的这个视图和所依赖的视图没有共同的父视图,也就是你遇到的这种情况。

​​​​​​​

你可能感兴趣的文章
yum配置与使用(很详细)
查看>>
yum的使用
查看>>
./configure 的配置和用法
查看>>
web.config
查看>>
web.xml
查看>>
web.xml(简介介绍)
查看>>
asp.net控件
查看>>
Java 面试题
查看>>
Java 代码安全(Coding Safe)
查看>>
正则表达式
查看>>
常用正则表达式大全
查看>>
JDK1.5(jdk5.0)新特性
查看>>
JDK1.6(jdk6.0)新特性
查看>>
java中的集合存储结构
查看>>
java中的集合存储结构
查看>>
Java基础——对象和类,类中的变量和方法
查看>>
谈谈JDBC
查看>>
jdbc_API中的说明
查看>>
jdbc_javax包
查看>>
Android 6.0 APIs_新特性(google官方)
查看>>