所谓的VFL语言其实就是Visual format language 的缩写,是一种使用代码添加约束的方式,类似于Masonry  SDAutolayout的效果,但是操作起来可能要相对简单。一行代码就可以实现。

  举一个例子:

UIView *ive1=[UIView new];

ive1.translatesAutoresizingMaskIntoConstraints=NO;

ive1.backgroundColor=[UIColor redColor];

[self.view addSubview:ive1];

UIView *ive2=[UIView new];

ive2.translatesAutoresizingMaskIntoConstraints=NO;

ive2.backgroundColor=[UIColor blueColor];

[self.view addSubview:ive2];

  因为要使用VFL语言,所以就不需要指定固定的frame,但是需要注意的是控件必须先添加到视图上去。

  

NSArray *ive1Arr= [NSLayoutConstraint

constraintsWithVisualFormat:@"H:|-20-[ive1]-20-|" //这个是水平方向的约束,'|'表示父视图

options:NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom //这是个对齐方式

metrics:nil//这里返回的是一个字典,意思是将约束中的某些值用字符串来代替,字典中给多对应的字符串赋值,方便修改

views:NSDictionaryOfVariableBindings(blueView)];//跟上边相似,返回字典,可用字符串代替,然后给出名字。

//上边的式子等同于

NSArray *ive1Arr =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-toLeft-[testView]-20-|"options:NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom metrics:@{@"toLeft":@20} views:@{@"testView":ive1}];

[self.view addConstraints:ive1Arr];//给添加水平方向的约束数组

//给添加垂直方向的数组,高度为五十,距离底边距为10 这种写法会简单一些

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[ive1(50)]-10-|"

options:NSLayoutFormatDirectionLeadingToTrailing

metrics:nil

views:NSDictionaryOfVariableBindings(ive1)]];

注意一个问题,Visual format language 语言里不能出现乘除法,否则会崩溃。这种情况下只能使用另外一个方法

举例(ive1的宽度是ive2宽度的一半):

NSLayoutConstraint *constraintIve1=[NSLayoutConstraint

constraintWithItem:ive1       //目标item

attribute:NSLayoutAttributeWidth //约束类型

relateBy:NSLayoutRelationEqual  //等同于

toItem:ive2             //对比item

attribute:NSLayoutAttributeWidth

multiplier:0.5           //对比的倍数

constant:0.0            //获取到响应的倍数以后增加固定量

];

上边内容为手打字母,直接copy可能会有字符错误。请理解代码意思以后自行书写。

Visual format language的更多相关文章

  1. IOS使用 Visual Format Language 定义水平和垂直约束

    定义限制条件来改变一个 UI 组件在其父视图的水平和垂直方向布局的方法. 可以使用方程式里 H:方向符号代表水平方向的边距,使用 V:方向符号代表垂直方向的边 距. 转载请注明,本文转自:http:/ ...

  2. 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

    使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 2014-12-09 10:56 编辑: zhiwupei 分类:iOS开发 来源:机智的新手 ...

  3. iOS开发-VFL(Visual format language)和Autolayout

    AutoLayout不管是在StoryBorad还是在xib中都相对来说比较简单,VFL(Visual  fromat  language)可视化语言基本上用到的比较少,在xCode4时候自动布局的概 ...

  4. 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局【转】

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...

  5. 转载自@机智的新手:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...

  6. 【转】使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...

  7. VFL(Visual Format Language)语言

    VFL的使用 使用VFL来创建约束数组: +(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFor ...

  8. 转载:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...

  9. 使用Auto Layout中的VFL(Visual format language)——代码实现自动布局

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:api介绍 1.NSLayoutConstraint API NSL ...

随机推荐

  1. A类型物料必须为装配拉式,供应子库为B仓

    应用 Oracle Bill Of   Materiel 层 Level Function 函数名 Funcgtion Name MT_BOMFDBOM 表单名 Form Name BOMFDBOM ...

  2. perl 跨行匹配;

    <pre name="code" class="html"><pre name="code" class="ht ...

  3. vagrant打造自己的开发环境

    vagrant打造自己的开发环境 缘由: 在网上看到斌哥,爽神都写了关于vagrant的博客,都在说很强大,所以很好奇这玩意怎么个强大,然后也就自己来一发玩玩看看. 真实缘由: 说实话是电脑配置太低, ...

  4. 提示text还能输入多少字节

    1.添加jQuery自定义扩展 $(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function( ...

  5. C语言入门(1)——C语言概述

    1.程序与编程语言 我们使用计算机离不开程序,程序告诉计算机应该如何运行.程序(Program)是一个精确说明如何进行计算的指令序列.这里的计算可以是数学运算,比如通过一些数学公式求解,也可以是符号运 ...

  6. [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设(四)

    通过前面的操作,我们已经可以创建一个带有我们自己的PCI的watchdog外设qemu 虚拟机了. 目的: 1. 了解我们的外设情况. 2. 为在guest中开发我们自己的linux PCI驱动程序做 ...

  7. 使用sphinx索引mysql数据

    数据库表如下 mysql> select * from tb_account; +----+-------+------+ | id | name | age | +----+-------+- ...

  8. MySQL 5.6.19 二进制安装

    1.        操作系统 CentOS release 6.2 (Final) 2.        创建用户和组 [root@mymaster1 ~]# groupadd mysql [root@ ...

  9. Android入门——UI(7)——Fragment

    先上fragment静态加载的代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  10. wing 5.0 注册机

    输入License id 进入下一页获得request key ,输入request key 后点击生成,即可生成激活码,亲测可用 下载链接 密码:adwj