iOS ------自动布局之Masonry的使用

2024-05-31 11:18

本文主要是介绍iOS ------自动布局之Masonry的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

 

 

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

#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 same
make.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 <= 400
make.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 + 10
make.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 autoboxing 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 view2
make.edges.equalTo(view2);// make top = superview.top + 5, left = superview.left + 10,
//      bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size-----根据

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

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

// make centerX and centerY = button1
make.center.equalTo(button1)// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.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 superview
make.left.right.and.bottom.equalTo(superview);//如果几个值都一样可以连写。
make.top.equalTo(otherView);

 

 

******报错:

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

​​​​​​​

这篇关于iOS ------自动布局之Masonry的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1017798

相关文章

使用Python将PDF表格自动提取并写入Word文档表格

《使用Python将PDF表格自动提取并写入Word文档表格》在实际办公与数据处理场景中,PDF文件里的表格往往无法直接复制到Word中,本文将介绍如何使用Python从PDF文件中提取表格数据,并将... 目录引言1. 加载 PDF 文件并准备 Word 文档2. 提取 PDF 表格并创建 Word 表格

使用Python实现局域网远程监控电脑屏幕的方法

《使用Python实现局域网远程监控电脑屏幕的方法》文章介绍了两种使用Python在局域网内实现远程监控电脑屏幕的方法,方法一使用mss和socket,方法二使用PyAutoGUI和Flask,每种方... 目录方法一:使用mss和socket实现屏幕共享服务端(被监控端)客户端(监控端)方法二:使用PyA

Python使用Matplotlib和Seaborn绘制常用图表的技巧

《Python使用Matplotlib和Seaborn绘制常用图表的技巧》Python作为数据科学领域的明星语言,拥有强大且丰富的可视化库,其中最著名的莫过于Matplotlib和Seaborn,本篇... 目录1. 引言:数据可视化的力量2. 前置知识与环境准备2.1. 必备知识2.2. 安装所需库2.3

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻:当你的API接口又双叒崩了!2️⃣ 神兵天降:3行代码解决验证难题3️⃣ 深度

Linux内核定时器使用及说明

《Linux内核定时器使用及说明》文章详细介绍了Linux内核定时器的特性、核心数据结构、时间相关转换函数以及操作API,通过示例展示了如何编写和使用定时器,包括按键消抖的应用... 目录1.linux内核定时器特征2.Linux内核定时器核心数据结构3.Linux内核时间相关转换函数4.Linux内核定时

python中的flask_sqlalchemy的使用及示例详解

《python中的flask_sqlalchemy的使用及示例详解》文章主要介绍了在使用SQLAlchemy创建模型实例时,通过元类动态创建实例的方式,并说明了如何在实例化时执行__init__方法,... 目录@orm.reconstructorSQLAlchemy的回滚关联其他模型数据库基本操作将数据添

Spring配置扩展之JavaConfig的使用小结

《Spring配置扩展之JavaConfig的使用小结》JavaConfig是Spring框架中基于纯Java代码的配置方式,用于替代传统的XML配置,通过注解(如@Bean)定义Spring容器的组... 目录JavaConfig 的概念什么是JavaConfig?为什么使用 JavaConfig?Jav

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

Springboot3 ResponseEntity 完全使用案例

《Springboot3ResponseEntity完全使用案例》ResponseEntity是SpringBoot中控制HTTP响应的核心工具——它能让你精准定义响应状态码、响应头、响应体,相比... 目录Spring Boot 3 ResponseEntity 完全使用教程前置准备1. 项目基础依赖(M

Java使用Spire.Barcode for Java实现条形码生成与识别

《Java使用Spire.BarcodeforJava实现条形码生成与识别》在现代商业和技术领域,条形码无处不在,本教程将引导您深入了解如何在您的Java项目中利用Spire.Barcodefor... 目录1. Spire.Barcode for Java 简介与环境配置2. 使用 Spire.Barco