VFL语言

 
介绍:

什么是VFL语言?
VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
 
VFL示例:
H:[cancelButton(72)]-12-[acceptButton(50)]
cancelButton宽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的使用:
使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

format :VFL语句
opts :约束类型
metrics :VFL语句中用到的具体数值
views :VFL语句中用到的控件
 
创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义

NSDictionaryOfVariableBindings(...)

具体实例如下:

练习一:

在控制器view底部添加2个view,1个蓝色,1个红色

2个view宽度、高度永远相等

距离父控件左边、右边、下边间距和2个view之间的间距相等

 在ViewController.m文件的-(void)viewDidLoad{........}方法中代码如下:
//创建两个视图view1和view2,view1为蓝色,view2为红色
    //创建view1
UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor blueColor];
view1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view1]; //创建view2
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor redColor];
view2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view2];
//使用VFL语言生成view1、view2的约束
    //使用VFL语言生成约束
NSDictionary *metrics = @{@"margin":@,@"height":@}; //NSDictionary *views = @{@"view1":view1,@"view2":view2}; //作用与下面的字典一样
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//获取view1、view2水平方向上的约束
NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-[view2(==view1)]-margin-|" options: metrics:metrics views:views];

//获取view1竖直方向的约束
NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1(height)]-margin-|" options: metrics:metrics views:views];

//获取view2竖直方向上的约束
NSArray *conts3 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2(==view1)]-margin-|" options: metrics:metrics views:views];
//将生成的约束添加到它们的父视图中
    //在父视图上添加VFL语言生成的约束
[self.view addConstraints:conts];
[self.view addConstraints:conts2];
[self.view addConstraints:conts3];
旋转屏幕的演示结果为:
 
 
练习二:
在控制器view顶部添加2个view,1个蓝色,1个红色
2个view高度永远相等
红色view和蓝色view右边对齐
蓝色view距离父控件左边、右边、上边间距相等
蓝色view距离红色view间距固定
红色view的左边和父控件的中点对齐
 
 
分析:虽然VFL语言简化了AutoLayout布局的代码量,但是它也有一个缺陷,那就是它无法生成视图与中心点处的约束,此时,需要再搭配AutoLayout的代码,才能完成这个需求。才上面的题可以看出,对view2需要使用
 
 在ViewController.m文件的-(void)viewDidLoad{........}方法中代码如下:
创建视图view1和view2
    //创建view1
UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor blueColor];
view1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view1]; //创建view2
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor redColor];
view2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view2];
使用VFL语言生成view1水平方向的约束、view1和view2竖直方向的约束
    //使用VFL语言生成view1的约束
NSDictionary *metrics = @{@"height":@,@"margin":@};
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);

//获取水平方向上view1的约束
NSArray *constr = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-|" options: metrics:metrics views:views]; //获取竖直方向上view1和view2的约束
NSArray *constr2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margin-[view1(height)]-margin-[view2(==view1)]" options: metrics:metrics views:views];
使用Autolayout创建view2的约束
    #pargma mark -使用Autolayout给view2创建约束

    //创建view2右边与父视图右边的约束
NSLayoutConstraint *lcRight = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-];
//创建view2左边与父视图中心处的约束
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:];
添加约束
    //将AutoLayout创建的约束添加到父视图中
[self.view addConstraints:@[lcRight,constraint]]; //将VFL生成的约束添加到父视图中
[self.view addConstraints:constr];
[self.view addConstraints:constr2];
旋转屏幕的演示结果如下:

 

iOS:VFL语言的更多相关文章

  1. IOS VFL语言(页面布局)

    ● 什么是VFL语言 ● VFL全称是Visual Format Language,翻译过来是“可视化格式语言” ● VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言     VFL ...

  2. 【原】iOS学习之苹果原生代码实现Autolayout和VFL语言

    1.添加约束的规则 在创建约束之后,需要将其添加到作用的view上 在添加时要注意目标view需要遵循以下规则: 1)对于 两个同层级view之间 的约束关系,添加到它们的父view上 2)对于 两个 ...

  3. IOS开发之自动布局--VFL语言

    前言:VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言.对于纯代码发烧友,值得我们去学习和了解哦. 1.什么是VFL语言 VFL全称是Visual Format Language,翻 ...

  4. iOS,自动布局autoresizing和auto layout,VFL语言

    1.使用autoresizing 2.使用autolayout 3.VFL语言(Visual Format Language:可视化格式语言) 使用autoresizing 点击xib文件,去掉使用a ...

  5. iOS UI布局-VFL语言

    什么是VFL语言 VFL(Visual Format Language),“可视化格式语言”. VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelBut ...

  6. iOS学习之VFL语言简介

    什么是VFL语言 VFL(Visual Format Language),“可视化格式语言”. VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelBut ...

  7. iOS多语言备选机制

    近期伊书突然接到一些外国用户的投诉,说伊书界面变成了中文,但他们系统语言不是中文,是法文俄文日文等,伊书只支持中文跟英文,在不支持系统所用语言的时候,理应会自动选用英文,不知为什么会选成了中文,经过艰 ...

  8. VFL语言

    VFL语言 VFL即Visual Format Language,可视化格式语言 NSDictionaryOfVariableBindings(testViewA, testViewB):此为一个宏, ...

  9. iOS OC语言原生开发的IM模块--RChat

    iOS OC语言原生开发的IM模块,用于项目中需要原生开发IM的情况,具备发送文字.表情.语音.图片.视频等完整功能,包含图片预览视频播放等功能,此项目将会长期更新如有问题可以提出,我的邮箱:fshm ...

随机推荐

  1. 测试web数据库的分布式事务atomikos 的三种数据源 SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSourceBean

    这2天学习了atomikos事务控制框架,其中看到有3种数据源,分别是,SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSou ...

  2. github实践操作

    一.本地仓库的创建和提交 1.下载并安装Git http://msysgit.github.io/,安装完成后在本地电脑创建一个git仓库并初始化本地仓库 2.在git目录下创建一个Readme.tx ...

  3. 【Symmetric Tree】cpp

    题目: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). F ...

  4. php图形图像处理之生成验证码

    \(^o^)/~ 现在网上越来越离不开验证码了,不知道小伙伴们知不知利用php的GD库就可以生成验证码,Σ(⊙▽⊙"a ...... 首先介绍几个需要用的函数. 1.imagesetpixe ...

  5. How to join a Ubuntu to Windows Domain

    My testing environment: Windows Server 2012 R2 Essentials: With AD and standalone DC in one single b ...

  6. spring--注入类型--构造方法(不常用)

    3.3.1.1. Constructor Injection Constructor-based DI is effected by invoking a constructor with a num ...

  7. String str=new String("a")和String str = "a"有什么区别?

    问:String str=new String("a")和String str = "a"有什么区别? 答:String str = "a" ...

  8. 说说Thread.Sleep(0)的那些奇怪的事

    写在前面 最近在弄一个传输组件,用到很多多线程的知识,其中有个问题,困扰我很久,不知道是什么原因,脑子一热,在传输过程中,添加了一句代码Thread.Sleep(0).那个问题竟然解决了,耗费我一上午 ...

  9. 关于JS APP

    多屏screen, JS如何路由,如何换页,导航.通过JS来实现. 当前页面的逻辑通过JS来实现.HTML DOM, Event, Widget. 核心在于function. JS 不仅仅是DOM, ...

  10. 【☆】javascript数据类型拾遗

    一.Array对象 1.两个数组能用< > == ===做比较吗? 答:数组可以用> <进行矩阵比较,比如a=[1,2,3] b=[1,2,4],那么a<b,如果a的数值 ...