其实很早就像整理出一份VFL的总结出来,觉得有很多东西可以写,但是真正去总结的时候发现,VFL也并没有很多东西,其实应该是在布局的过程中直接用VFL语句思考的过程比较难以形成,多数布局问题其实是在实际操作中才会有越来越深的体会,关键在用。可能有些词不达意,不多说了,以下将VFL的基本表达列出。
 
AutoLayout,顾名思义,是自动布局,自动布局的实现有很多种,我之前在开发过程中比较多用到的是VFL和Mansory;但是一般情况下,不是很复杂的布局控件会直接使用frame进行计算,所以事实上也不是整个项目都在使用VFL,而且很多时候VFL也有其局限性,比如我要设置一个比例的高度,就要自己写NSLayoutConstraint,也挺复杂,而一般情况下,我都会先实现UIView的分类,简化对于frame进行操作的方法,这样可以直接获取或者设置height,而不需要从view.frame...的一层层去取,所以如果在这种情况下,会有一些布局即使使用了VFL也并没有简化多少(也有可能是我对VFL还没有精深到一定境界吧);但是很多复杂一些的布局,VFL和Mansory的使用确实会节省很多时间。
 
1、VFL的语法含义:
               H:  ->  水平方向;
                V:  ->  竖直方向;
           [aaa]  ->  views参数中key值为aaa的view控件;
                  |  ->  父视图的边界;
   >=,==,<=  ->  关系;
                  -  ->  间隔,当设置30的间隔时为 -30- ,不设置时会显示默认间隔;而当使用matrics来设置数值时,30这个数值也可以直接使用matrics中设置的key值;
           @100  ->  优先级,优先级最高为1000,数值越高约束的优先级越高;
 
2、VFL的示例解释:
     H:|-10-[aView(60)]-40-[bView]-30-|   
              
第一个"|"表示左边距,"-10-"表示距左边距10像素,"[aView(60)]"表示aView对应的控件宽度为60,"-40-"表示aView和bView的间隔为40,"-30-"则表示距离右边距30,其中,bView并未设置宽度,会有已有条件剩余的部分作为宽度来显示;
        事实上,在理解VFL的语句时,倒不妨就把语句当成屏幕,只不过把控件的水平方向的排布分离出来用一种格式化的方式表示而已。
 
    
V:|[aView(>=60@900)]-50-[bView(>=400@899)]-30@901-|
               @后面的表示优先级,当多个条件有冲突时,会确保高优先级的条件;
 
 
3、使用步骤
           创建VFL语句  ->  创建约束(NSLayoutConstraint.constraintsWithVisualFormat)  ->  将约束添加到父视图;
 
4、代码示例:
        self.view.backgroundColor = UIColor.greenColor()

        let superView = UIView(frame: CGRect(x: , y: , width: , height: ))
superView.backgroundColor = UIColor.blueColor()
self.view.addSubview(superView) let label_01 = UILabel()
label_01.text = "label_01"
label_01.backgroundColor = UIColor.redColor()
superView.addSubview(label_01) let label_02 = UILabel()
label_02.text = "label_02"
label_02.backgroundColor = UIColor.grayColor()
superView.addSubview(label_02) let label_03 = UILabel()
label_03.text = "label_03"
label_03.backgroundColor = UIColor.brownColor()
superView.addSubview(label_03) let label_04 = UILabel()
label_04.text = "label_04"
label_04.backgroundColor = UIColor.cyanColor()
superView.addSubview(label_04) label_01.translatesAutoresizingMaskIntoConstraints = false
label_02.translatesAutoresizingMaskIntoConstraints = false
label_03.translatesAutoresizingMaskIntoConstraints = false
label_04.translatesAutoresizingMaskIntoConstraints = false //当屏宽大于两个按钮的宽度时,两个按钮的间隔的优先级会降低;
//使用AlignAllLeft会提示Options mask required views to be aligned on a horizontal edge, which is not allowed for layout that is also horizontal.; 也就是说当我写水平方向时的布局时,其实只能使用水平相关的NSLayoutFormatOptions限定,否则会因为VFL语句解析出错;
//设置了左右边距、间隔与宽度;则左右边距和宽度优先;
let hVFL = "H:|-10-[label_01(60)]-40-[label_02]-30-|"
let hCons = NSLayoutConstraint.constraintsWithVisualFormat(hVFL, options: NSLayoutFormatOptions.AlignAllTop, metrics: nil, views: ["label_01":label_01, "label_02":label_02])
superView.addConstraints(hCons) let vVFL1 = "V:|-80-[label_01]"
let vCons1 = NSLayoutConstraint.constraintsWithVisualFormat(vVFL1, options: NSLayoutFormatOptions.AlignAllTop, metrics: nil, views: ["label_01":label_01, "label_02":label_02])
superView.addConstraints(vCons1) //水平方向如果指定了上边距与下边距 和高度 则以上边距和高度为优先;
//水平方向只是简单居中
let hVFL2 = "H:|-[label_03]-|"
let hCons2 = NSLayoutConstraint.constraintsWithVisualFormat(hVFL2, options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["label_03":label_03])
superView.addConstraints(hCons2) let hVFL3 = "H:|-[label_04(==label_03)]-|"
let hCons3 = NSLayoutConstraint.constraintsWithVisualFormat(hVFL3, options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["label_03":label_03, "label_04":label_04])
superView.addConstraints(hCons3) let vVFL3 = "V:|[label_03(>=60@900)]-50-[label_04(>=400@899)]-30@901-|"
let vCons3 = NSLayoutConstraint.constraintsWithVisualFormat(vVFL3, options: NSLayoutFormatOptions.AlignAllLeft, metrics: nil, views: ["label_03":label_03, "label_04":label_04])
superView.addConstraints(vCons3)
______________________________________________________________________________________________________________

12.15补充:
其实如果一个布局中使用VFL,不可避免的整个布局约束的语句甚至比布局还要多,因为要对不同的布局关系进行处理和限制,而涉及到动态修改就会更加麻烦;在我的项目中,很少再用到VFL了,但是有些场景不得不说VFL更方便;如今,我的做法是扩展了UIView的方法,用一些基本的方法做布局,虽然理论上还是使用frame进行的,但是如果能够有一个清晰的视图层次和便于使用的分类方法,即便是很复杂的设计图,也可以很清晰的进行排布,因为注释以及策略选用得当,一者维护起来也并不会困难,二者仍能够适配各种机型,最主要我不需要去写很多的约束代码,以及去备注各个相关约束间的关系; 但自动布局也并不是就毫无用武之地,怎么说呢,这个应该是哪一种使用更加熟练,哪一种就更为适用,当然是以维护和满足设计要求的前提下。

AutoLayout - VFL的更多相关文章

  1. iOS 进阶 第二十一天(0531)

    0531 - Autolayout 不仅可以做屏幕适配还可以做系统适配 uidynamic 做物理动画.能做的效果如下图: Autolayout Autolayout 是一种“自动布局”技术,专门用来 ...

  2. QF——网络之知识碎片

    1.URL中文问题: URL不支持中文.若出现中文,需要对URL进行utf-8编码. NSString *urlString = [kULRSTRING stringByAddingPercentEs ...

  3. Masonry1.0.2 源码解析

    在了解Masonry框架之前,有必要先了解一下自动布局的概念.在iOS6之前,UI布局的方式是通过frame属性和Autoresizing来完成的,而在iOS6之后,苹果公司推出了AutoLayout ...

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

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

  5. Autolayout(VFL)

    Autolayout(VFL) 1.NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format opt ...

  6. Autolayout及VFL经验分享

    http://www.cocoachina.com/industry/20131108/7322.html 这篇不是什么教程.Cocoa autolayout出来蛮久了.以前多次想去深入研究一下,每次 ...

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

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

  8. AutoLayout自动布局之VFL语言代码实现(一个神奇的语言)

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

  9. Autolayout和VFL

    Autolayout,開始于iOS6.0   一.什么时候用autolayout比較适合   1.不负责任的骑墙派说法:apple的设备越来越多了,你的应用应该都使用al. (而且用sb)   2.要 ...

随机推荐

  1. oracle生成单据号

    --创建单据号存放表 CREATE TABLE BU_TAB( DOC_NUM NUMBER --生成的单据号 ); --单据号 create table cux_doc_num( tab ), -- ...

  2. BestCoder Round #90 //div all 大混战 一题滚粗 阶梯博弈,树状数组,高斯消元

    BestCoder Round #90 本次至少暴露出三个知识点爆炸.... A. zz题 按题意copy  Init函数 然后统计就ok B. 博弈 题  不懂  推了半天的SG.....  结果这 ...

  3. 启动Tomcat时报 Expected stackmap frame at this location.(JDK1.7编译)

    从svn上下的项目,部署到tomcat 7.0.19 上, 并且配置的是jdk7.  启动时出现以下问题. Location: com/genlot/loms/service/SysPermissio ...

  4. jdk安装和环境变量配置

    jdk的安装和环境变量配置每次换新环境都在做,但是每次都没有认真去想是怎么做的,反正每次打开百度搜索照做就是.这次整理一下,也顺便理清一下其中的原理. 1.第一步当然就是下载jdk,我这边下载的是jd ...

  5. c#遍历目录及子目录下某类11型的所有的文件

    DirectoryInfo directory = new DirectoryInfo("D:\\aa\\"); FileInfo[] files = directory.GetF ...

  6. 110.Balanced Binary Tree Leetcode解题笔记

    110.Balanced Binary Tree Given a binary tree, determine if it is height-balanced. For this problem, ...

  7. es6中添加块级作用域的目的

    原本只有函数作用域和全局作用域两种,这就导致出现很多不方便的地方: 1)for循环问题:在看js高程的时候,纠结在第七章好久,就是一个这样的实例 function createFunctions(){ ...

  8. 用栈解决Largest Rectangle问题

    一问题描述 Given n non-negative integers representing the histogram's bar height where the width of each ...

  9. MAC PRO 的网关在哪里

    mac pro的网关就是路由器地址. 1.路由器在系统偏好设置里 2.双击点开此图标 选中1.然后点击高级设置 3.选中TCP/IP,然后查看自己的路由器后边的数字,就是你的mac网关号 4.IPV4 ...

  10. Win7 64位 VS2015及MinGW环境编译矢量库agg-2.5和cairo-1.14.6

    书接上文,昨天装了MinGW,主要原因之一是要用到MSYS,所以顺手把FFMPEG又编译了一遍. 回到主题,其实我是想编译矢量库,因为最近要学习一些计算几何算法,所以找个方便的2D画图库就很重要. 说 ...