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// 添加约束,不需要设置frameUILabel *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);// 距离左边100make.left.equalTo(self.view).offset(100);// 距离右边100make.right.equalTo(self.view).offset(-100);// 距离下边500make.bottom.equalTo(self.view).offset(-500);}]; #pragma mark label1UILabel *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 label2UILabel *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 label3UILabel *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 - 60make.size.equalTo(label2).sizeOffset(CGSizeMake(-40, -60));}];}@end
在这里只是给大家举几个简单的例子(效果图):
转载于:https://www.cnblogs.com/soley/p/5553448.html
iOS-使用代码约束布局(Masonry)相关推荐
- 第三方框架-纯代码布局:Masonry的简单使用
Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者API.系统AutoLayout支持的操作,Masonry都支持,相比系统AP ...
- iOS 布局 Masonry详解
现在iPhone手机屏幕越来越多, 屏幕适配也越来越重要. Masonry就是为屏幕适配而生的三方框架. Masonry基础API mas_makeConstraints() 添加约束 mas_rem ...
- ios怎么引入masonry_iOS自动布局——Masonry详解
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环.代码的布局是设计语言与用户视觉感受沟 ...
- iOS 快速定位约束冲突
iOS 快速定位约束冲突 什么是约束冲突 当你使用 AutoLayout 布局,你添加的约束不满足或者会造成系统布局冲突的时候,控制台就会打印冲突日志. 约束冲突示例 [LayoutConstrain ...
- android鸿洋布局,Android基础ConstrainLayout约束布局的介绍和使用
写在前面:之前稍微复杂的设计实现,我们都可能会借助于嵌套实现,我们知道嵌套越多,性能就越低.而我们布局一般都是在xml里面进行实现,拖拽的话估计现在android开发者都不会去使用.为了提升开发者的可 ...
- Android开发笔记(一百四十九)约束布局ConstraintLayout
约束布局ConstraintLayout是Android Studio 2.2推出的新布局,并从Android Studio 2.3开始成为默认布局文件的根布局,由此可见Android官方对其寄予厚望 ...
- 约束布局管理器 CAConstraintLayoutManager 以及其不起作用
当使用 CABasicAnimation时,CAConstraintLayoutManager不起作用,原因未知 CoreAnimation编程指南(九)图层布局 发布日期:2012-11-21 浏览 ...
- Android基础ConstrainLayout约束布局的介绍和使用
写在前面:之前稍微复杂的设计实现,我们都可能会借助于嵌套实现,我们知道嵌套越多,性能就越低.而我们布局一般都是在xml里面进行实现,拖拽的话估计现在android开发者都不会去使用.为了提升开发者的可 ...
- 约束布局ConstraintLayout看这一篇就够了
目录 1.介绍 2.为什么要用ConstraintLayout 3.如何使用ConstraintLayout 3.1 添加依赖 3.2 相对定位 3.3 角度定位 3.4 边距 3.5 居中和偏移 3 ...
最新文章
- 技术图文:如何爬取一个地区的气象数据(下)?
- EdgeX Foundry理论篇
- 最长公共子序列Java代码实现
- 红旗Linux软件开发技术,中科红旗闷声研发下一代红旗Linux 11操作系统
- android系统自动构建,[系统集成] Android 自动构建系统
- 初识Microsoft Hyper-v Server
- C语言 数据结构 链表的增删查改
- springmvc简单示例
- opencv 霍夫直线检测
- Pandas玩转数据透视表,用它就够了!
- 反射系数、驻波比、S参数之间的关系!
- 开源开放 | 欧若科技通过 OpenKG 开放 Nebula Graph 图数据库
- 【Python】在Windows 10 中,安装django-bootstrap-modal-forms
- VS2017生成可执行程序,执行提示“不是有效的win32应用程序”
- 控制/ 状态寄存器(RCC_CSR) 复位
- OpenStack配置分布式路由(neutron)
- 非对称加密-区块链核心技术之一
- 英语四六级翻译10:四大名著
- flush=true 的含义
- c语言 long long %d,定义一个long long类型,用%d打印的结果
热门文章
- 去越南旅游一个人玩一个月需要多少人民币?
- 给你揭密一个爆款文案套路,各行各业,谁用谁火
- 最近围绕生鲜社区团购的一些事
- 新媒体运营的“钱途”在哪里?
- power bi 实时_Power BI中的实时流
- ubuntu 安装sql_在Ubuntu上进行SQL Server安装和故障排除
- 服务器运行多个jdk版本_如何使用中央管理服务器运行多个查询
- power bi 地图_如何使用Power BI创建地理地图-填充地图和气泡地图
- azure云数据库_Azure Data Studio中Windows的数据库管理工具扩展
- redis数据库操作(3)