iOS UI布局-VFL语言
什么是VFL语言
VFL(Visual Format Language),“可视化格式语言”。
VFL是苹果公司为了简化autolayout的编码而推出的抽象语言。
语法说明
H:[cancelButton()]--[acceptButton()]
cancelButton宽72,acceptButton宽50,它们之间间距12 H:[wideView(>=@)]
wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束条件越先被满足) V:[redBox][yellowBox(==redBox)]
垂直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox H:|--[Find]-[FindNext]-[FindField(>=)]-|
水平方向上,Find距离父view左边缘间隔10,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边边缘的间距都是默认宽度。(竖线“|”表示superview的边缘)。
使用方法
使用VFL来创建约束数组
+(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views; format:VFL语句
opts:约束类型
metrics:VFL语句中用到的具体数值
views:VFL语句中用到的控件 创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义
NSDictionaryOfVariableBindings(...)
实例展示
效果图:
实现代码:
-(void)horizontalLayout{
//1.添加两个控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor]; blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView]; UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView]; //2.添加约束
//2.1水平方向的约束
NSString *hVFL = @"H:|-30-[blueView]-30-[redView(==blueView)]-30-|";
NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:nil views:@{@"blueView":blueView, @"redView":redView}];
[self.view addConstraints:hCons]; //2.2垂直方向的约束
NSString *vVFL = @"V:[blueView(50)]-30-|";
NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options: metrics:nil views:@{@"blueView":blueView}];
[self.view addConstraints:vCons];
} -(void)verticalLayout{
//1.添加两个控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView]; UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView]; //2.添加约束
//2.1水平方向的约束
NSString *hVFL = @"H:|-30-[blueView]-30-|";
NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options: metrics:nil views:@{@"blueView":blueView}];
[self.view addConstraints:hCons]; //2.2垂直方向的约束
NSString *vVFL = @"V:|-30-[blueView(50)]-30-[redView(==blueView)]";
NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView, @"redView":redView}];
[self.view addConstraints:vCons];
NSLayoutConstraint *redLeftCon = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:];
[self.view addConstraint:redLeftCon];
}
小结
最后对格式的字符串作一个总结介绍:
功能 | 表达式 |
水平方向 | H: |
垂直方向 | V: |
Views | [view] |
SuperView | | |
关系 | >=,==,<= |
空间,间隙 | - |
优先级 | @value |
iOS UI布局-VFL语言的更多相关文章
- iOS UI布局调试工具
查看ios软件的ui布局有三种: 1.DCIntrospect 这种方式是开源的,我从github上clone下来后运行demo,运行遇到了问题:Xcode cannot run using t ...
- iOS学习之VFL语言简介
什么是VFL语言 VFL(Visual Format Language),“可视化格式语言”. VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelBut ...
- iOS UI布局-定时器
定时器是比较常用的一个UI控件,在付款.抢购时,经常会使用到.提取成一个通用的方法 /** * 倒计时GCD通用方法 * 通常用的计时器都是用NSTimer,但是NSTimer在线程很吃紧的时候效果不 ...
- iOS UI布局总结
布局就是尺寸和位置的设置. 一.基本布局: 1)绝对布局:frame.layoutsubviews. 二.相对布局: autoresizing.autolayout.基于父视图.基于约束. 三.线性布 ...
- iOS UI布局-回到顶部
回到顶部,是比较常用的一个效果 核心代码 在ViewDidLoad中,添加回到顶部按钮 计算偏移量,如果当前显示的内容全部向上隐藏掉,则显示“回到顶部”按钮 // // ViewController. ...
- IOS VFL语言(页面布局)
● 什么是VFL语言 ● VFL全称是Visual Format Language,翻译过来是“可视化格式语言” ● VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言 VFL ...
- iOS开发~UI布局(三)深入理解autolayout
一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...
- iOS,自动布局autoresizing和auto layout,VFL语言
1.使用autoresizing 2.使用autolayout 3.VFL语言(Visual Format Language:可视化格式语言) 使用autoresizing 点击xib文件,去掉使用a ...
- iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
随机推荐
- c++基本函数
std::abs 求绝对值函数 double abs (double x); float abs (float x); long double abs (long double x); std::sw ...
- centos 下部署django nginx+uwsgi
为了建立一个工作站,也是麻烦了.... 感谢该博主: https://www.cnblogs.com/levelksk/p/7921066.html 1.安装centos 后首先安装python,下载 ...
- OpenGL开发学习指南二(glfw+glad)
版权声明:本文为博主原创文章,未经博主允许不得转载.blog.liujunliang.com.cn https://blog.csdn.net/qq_33747722/article/details/ ...
- I do think I can breakdown the problem into parts that make sense
RESTful Web APIs_2013 An API released today will be named after the company that hosts it. We talk a ...
- radio样式的写法,单选和多选如何快速的改变默认样式,纯CSS,
一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...
- cruise-control
https://github.com/linkedin/cruise-control https://engineering.linkedin.com/blog/2017/08/open-sourci ...
- LeetCode 412 Fizz Buzz 解题报告
题目要求 Write a program that outputs the string representation of numbers from 1 to n. But for multiple ...
- linux strtock()函数使用问题
strtok()原型:char * strtok(char *s, const char *delim); 函数说明:strtok()用来将字符串分割成一个个片段.参数s 指向欲分割的字符串,参数de ...
- 检测到目标URL存在http host头攻击漏洞
检测到目标URL存在http host头攻击漏洞 1.引发安全问题的原因 为了方便的获得网站域名,开发人员一般依赖于HTTP Host header.例如,在php里用_SERVER["HT ...
- 更改配置:远程访问gitlab的postgresql数据库
作为这篇文章的补充: 将gitlab中的postgresql数据库开通远程访问 https://www.cnblogs.com/andy9468/p/10609682.html 替代(二)中的2.3. ...