UI框架Masonry 一

Masonry 框架
https://blog.csdn.net/dragongd/article/details/61432393?utm_source=blogxgwz4目标

理解 Masonry 框架的基本使用
差不多是使用最为广泛的自动布局框架
下载地址：https://github.com/SnapKit/Masonry
掌握 Masonry 的三个核心函数
知道 Masonry 的两个宏
/// 构建约束
mas_makeConstraints

/// 更新约束 - 修改已经建立的约束，如果约束不存在，会在控制台输出错误
mas_updateConstraints

/// 会删除已经建立的所有约束，然后重新生成约束
mas_remakeConstraints
等于函数
equalTo(参照对象) // 参照属性相同可以省略
equalTo(参照对象.mas_参照属性) // 参照属性
偏移函数
offset(CGFloat) // 偏移量
mas_offset(结构体) // 偏移结构题
添加框架
将 Masonry-master 下的 Masonry 拖拽到项目中
引入头文件

import "Masonry.h"

案例
案例1 —— 居中视图
要求
定义一个视图 200 * 50
在任何设备上都摆放在屏幕的中心点
代码演练
准备工作

  • (void)viewDidLoad {
    [super viewDidLoad];

    [self layoutDemo1];
    }

/**

  • 定义一个视图 200 * 50
  • 在任何设备上都摆放在屏幕的中心点
    */

  • (void)layoutDemo1 {

    UIView *v = [[UIView alloc] init];
    v.backgroundColor = [UIColor redColor];
    [self.view addSubview:v];

}
设置布局
[v mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 50));
make.center.equalTo(self.view);
}];
一定要先将视图添加到 view 中，然后再添加约束

案例2 —— 居中视图
要求
创建一个全屏的视图
四周的边距都为 20
代码实现
代码准备

  • (void)layoutDemo2 {

    UIView *v = [[UIView alloc] init];
    v.backgroundColor = [UIColor redColor];
    [self.view addSubview:v];
    }
    第一种方法
    // 第一种方法
    [v mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view).offset(20);
    make.left.equalTo(self.view).offset(20);
    make.bottom.equalTo(self.view).offset(-20);
    make.right.equalTo(self.view).offset(-20);
    }];
    第二种方法 —— 函数式编程，链式编程
    // 第二种方法 —— 函数式编程，链式编程
    [v mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.left.equalTo(self.view).offset(20);
    make.right.bottom.equalTo(self.view).offset(-20);
    }];
    第三种方法
    // 第三种方法
    [v mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view).mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));
    }];
    案例3 —— 登录界面
    要求
    定义两个 UITextField 水平距离左右两边 20 点
    第一个 UITextField 垂直距离顶边 20 点
    第二个 UITextField 垂直距离第一个 20 点
    代码实现
    代码准备

  • (void)layoutDemo3 {
    UITextField *tf1 = [[UITextField alloc] init];
    tf1.borderStyle = UITextBorderStyleRoundedRect;
    [self.view addSubview:tf1];

    UITextField *tf2 = [[UITextField alloc] init];
    tf2.borderStyle = UITextBorderStyleRoundedRect;
    [self.view addSubview:tf2];

}
文本框1的自动布局
[tf1 mas_makeConstraints:^(MASConstraintMaker make) {
make.left.top.equalTo(self.view).offset(20);
make.right.equalTo(self.view).offset(-20);
}];
文本框2的自动布局
[tf2 mas_makeConstraints:^(MASConstraintMaker make) {
make.left.right.equalTo(tf1);
make.top.equalTo(tf1.mas_bottom).offset(20);
}];
案例4 —— 布局动画
要求
实现布局动画
代码实现
代码准备
/
布局动画
*/

  • (void)layoutDemo4 {
    UIView v = [[UIView alloc] init];
    v.backgroundColor = [UIColor redColor];
    [self.view addSubview:v];
    }
    添加按钮和监听方法
    /    *
    布局动画
    */

  • (void)layoutDemo4 {
    UIView *v = [[UIView alloc] init];
    v.backgroundColor = [UIColor redColor];
    [self.view addSubview:v];

    // 添加按钮
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd];
    btn.center = self.view.center;
    [btn addTarget:self action:@selector(startAnimation) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];

}

  • (void)startAnimation {

}
添加布局
// 添加视图布局
[v mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(self.view).offset(20);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
定义属性
@property (nonatomic, weak) UIView *demoView;
使用属性记录局部变量
// 使用属性记录局部变量
self.demoView = v;
实现按钮监听方法

  • (void)startAnimation {

    // 更改约束
    [self.demoView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(200, 200));
    }];

    [UIView animateWithDuration:2.0 animations:^{
    [self.view layoutIfNeeded];
    }];
    }
    注意：mas_updateConstraints 只能修改已经建立的约束

以下代码虽然能够执行，但是在控制台会输出错误

// 更改约束
[self.demoView mas_updateConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 200));
// mas_updateConstraints 只能更新已经建立的约束，如果约束不存在，会在控制台输出错误
make.right.mas_equalTo(self.view).offset(-20);
}];
重建约束
// 重建约束
[self.demoView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.right.bottom.equalTo(self.view).offset(-20);
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
提示：mas_remakeConstraints 会删除已经建立的所有约束，然后重新生成约束

两个宏
//define this constant if you want to use Masonry without the 'mas_' prefix
// 如果不希望使用 mas_ 前缀，可以定义此常量

define MAS_SHORTHAND

//define this constant if you want to enable auto-boxing for default syntax
// 如果希望启动自动装箱，可以定义此常量
// 所谓自动装箱，就是能够自动将结构体包装成 NSValue，而无需再使用 mas_equalTo

define MAS_SHORTHAND_GLOBALS

关于这两个宏知道即可，避免工作中遇到不知道如何处理

为什么不建议使用
iOS 的框架越来越多，框架是否带前缀已经成为识别框架专业度的标记
没有方法前缀，一旦发生冲突是非常糟糕的事情
Masonry 团队还使用 Swift 开发了另外一套自动布局框架 SnapKit，习惯了简写会不习惯 SnapKit

作者：F-国龙
来源：CSDN
原文：https://blog.csdn.net/dragongd/article/details/61432393
版权声明：本文为博主原创文章，转载请附上博文链接！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 明白这三点，你的人生也可以优雅的活！
    岁月如梭，恍然已到了30+的年龄，如今科技的发达，互联网的带动，人与人之间的距离越来越近，每天都能接收到太多信息...
    拉芳_7dd0阅读 418评论 0赞 0
  • 抑郁症，不是矫情病
    因为它，中国每年有30万人自杀 9月4日，峨眉山景区，一个年仅的21岁女生，却选择在此处结束自己的生命。 海明威，...
    柿子柠檬阅读 304评论 0赞 0
  • 其实我们都没有好好爱自己
    最近几天的情绪变化让我不知从哪说起。因为一会好一会坏的，有时候过了一会自己就好了，有时候会把这件事想很久，还是想...
    羊毛与花少年阅读 726评论 0赞 0
  • 未连续站桩第23天
    从前天站桩之后感觉我的愤怒都出来了，昨天下午强烈感觉到身体里有很多能量出不来，烦燥，嗓子疼，发炎没有任何好转的迹象...
    橙味道阅读 307评论 0赞 0
  • 2018-05-07
    2018-05-7 姓名：郭祥华 组别：315期六项精进努力一组 【日精进打卡第191】 【知～学习】 背诵《六项...
    华英雄_712d阅读 210评论 0赞 0

友情链接更多精彩内容