IOS VFL语言(页面布局)
● VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
● VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
VFL示例
● canelButton宽72,acceptButton宽50,它们之间间距12
● H:[wideView(>=60@700)]
● wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)
● V:[redBox]-[yellowBox(==redBox)]
● 竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox
● H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
● 水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;
再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。
(竖线“|” 表示superview的边缘)
VFL的使用
+ (NSArray *)constraintsWithVisualFormat:(NSString
*)format options:(NSLayoutFormatOptions)opts metrics:
(NSDictionary *)metrics views:(NSDictionary *)views;
● format :VFL语句
● opts :约束类型(一般可以传0)
● metrics :VFL语句中用到的具体数值
● views :VFL语句中用到的控件
● 创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义
NSDictionaryOfVariableBindings(...)
#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// 1.添加两个控件到父控件上
// 1.1添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView]; // 1.1添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView]; // 2.禁用auturezing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO; // 3.添加约束
/*
lFormat : VFL语句
options: 对齐方式
metrics: VFL语句中用到的变量值
views: VFL语句中用到的控件
*/
// 设置蓝色View距离左边和右边有20的的间距 X 和 宽度
// NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
int margin = ;
NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-|" options: metrics:@{@"margin": @(margin)} views:@{@"blueView" : blueView}];
[self.view addConstraints:blueViewH]; // 设置蓝色View距离顶部有20的间距, 并且高度等于50 Y 和高度
// 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度
// 并且设置红色和蓝色右对齐
NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
[self.view addConstraints:blueViewV]; // 注意: 在VFL语句中, 是不支持乘除法
// NSArray *redVeiwH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView )]" options:0 metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
// [self.view addConstraints:redVeiwH]; NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:];
[self.view addConstraint:redVeiwW];
} @end
基于Autolayout的动画
● 在修改了约束之后,只要执行下面代码,就能做动画效果 [UIView animateWithDuration:1.0 animations:^{
[添加了约束的view layoutIfNeeded];
}];
IOS VFL语言(页面布局)的更多相关文章
- Redesign Your App for iOS 7 之 页面布局
Redesign Your App for iOS 7 之 页面布局 http://www.vinqon.com/codeblog/?detail/11109
- Redesign Your App for iOS 7 之 页面布局【转】
前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...
- iOS UI布局-VFL语言
什么是VFL语言 VFL(Visual Format Language),“可视化格式语言”. VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelBut ...
- iOS,自动布局autoresizing和auto layout,VFL语言
1.使用autoresizing 2.使用autolayout 3.VFL语言(Visual Format Language:可视化格式语言) 使用autoresizing 点击xib文件,去掉使用a ...
- iOS:VFL语言
VFL语言 介绍: 什么是VFL语言? VFL全称是Visual Format Language,翻译过来是“可视化格式语言” VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言 ...
- 【原】iOS学习之苹果原生代码实现Autolayout和VFL语言
1.添加约束的规则 在创建约束之后,需要将其添加到作用的view上 在添加时要注意目标view需要遵循以下规则: 1)对于 两个同层级view之间 的约束关系,添加到它们的父view上 2)对于 两个 ...
- IOS开发之自动布局--VFL语言
前言:VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言.对于纯代码发烧友,值得我们去学习和了解哦. 1.什么是VFL语言 VFL全称是Visual Format Language,翻 ...
- iOS学习之VFL语言简介
什么是VFL语言 VFL(Visual Format Language),“可视化格式语言”. VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelBut ...
- iOS开发~UI布局(三)深入理解autolayout
一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...
随机推荐
- drf之序列化器的使用
一.序列化器-Serializer 作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 完成数据校验功能 3. 反序列化,把客户端发送过来的数据,经 ...
- 转 How To Stop A Running Job Using DBMS_JOB
There is no procedure within the dbms_job package to stop a running job.You will need to determine w ...
- failed to push some refs to 'git@github.com:xxx/xxx.git' 解决方法
此时很多人会尝试下面的命令把当前分支代码上传到master分支上. $ git push -u origin master 但依然没能解决问题 会出现: failed to push some ref ...
- DB Intro - MongoDB Relations
https://www.quackit.com/mongodb/tutorial/mongodb_create_a_relationship.cfm
- 牛客网Java刷题知识点之ArrayList 、LinkedList 、Vector 的底层实现和区别
不多说,直接上干货! 这篇我是从整体出发去写的. 牛客网Java刷题知识点之Java 集合框架的构成.集合框架中的迭代器Iterator.集合框架中的集合接口Collection(List和Set). ...
- Beam编程系列之Python SDK Quickstart(官网的推荐步骤)
不多说,直接上干货! https://beam.apache.org/get-started/quickstart-py/ Beam编程系列之Java SDK Quickstart(官网的推荐步骤)
- 03-struts2获得servetAPI
1 原理 三个域合一的时候相同的键值对以小的域为准.ActionContext 对象创建:每次请求的时候都会创建一个与请求对应的 ActionContext 对象.ActionContext 销毁:请 ...
- 用js语句控制css样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 3、card 卡片
1.基本用法的使用 /* --- htm l----*/ <ion-content> <ion-card> <ion-card-header> Header < ...
- small zhishi
\\192.168.1.201\d$\Data 访问远程计算机文件资源管理器