AutoLayout - VFL

其实很早就像整理出一份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(>[email protected])]-50-[bView(>[email protected])][email protected]|

@后面的表示优先级,当多个条件有冲突时,会确保高优先级的条件;

3、使用步骤

创建VFL语句  ->  创建约束(NSLayoutConstraint.constraintsWithVisualFormat)  ->  将约束添加到父视图;

4、代码示例:

        self.view.backgroundColor = UIColor.greenColor()

        let superView = UIView(frame: CGRect(x: 20, y: 100, width: 300, height: 400))
        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(>[email protected])]-50-[label_04(>[email protected])][email protected]|"
        let vCons3 = NSLayoutConstraint.constraintsWithVisualFormat(vVFL3, options: NSLayoutFormatOptions.AlignAllLeft, metrics: nil, views: ["label_03":label_03, "label_04":label_04])
        superView.addConstraints(vCons3)
时间: 2024-12-29 01:29:15

AutoLayout - VFL的相关文章

Autolayout代码实现举例-02-使用VFL

0.简介: VFL 全称 Visual Format Language, 它能抽象表述一个或多个view的布局. 相比用线性公式实现Autolayout, VFL显得简便一些. 1.例子1 需求: 创建两个View, 一个蓝色, 一个红色,  蓝色距离屏幕最上面.左边.右边的距离为20, 使红色view的顶部与蓝色view的底部的间距为20,且两者的右边缘对齐. 结果:  竖屏 :     横屏:  2.例子2 需求: 创建两个View, 一个蓝色, 一个红色, 需求是使蓝色和红色view永远粘

iOS 进阶 第二十一天(0531)

0531 - Autolayout 不仅可以做屏幕适配还可以做系统适配 uidynamic 做物理动画.能做的效果如下图: Autolayout Autolayout 是一种“自动布局”技术,专门用来布局UI界面的.有了Autolayout,请忘记frame Autolayout 要比 Autoresizing 强大,两者水火不相容 Autolayout的2个核心概念 参照 约束 使用代码实现Autolayout - VFL(Visual Format Language) 实现思路如下: NSL

Autolayout + VFL(Visual Format Language)

最近在学习iOS的布局,在storyboard里,确定布局的思路: 1.确定能确定的: 2.无法确定的,看看是否可以想办法和其他控件关联起来,再根据关系来确定能确定的位置. 例子:实现如下图的布局 过程: 1.确定能确定的: 左上角的View,左边和上边距离父view的距离都是0(当然,这里假设了view的宽度和高度都是100) 设置完成后,点击Add 4 Constraints即可,现在界面如下所示; 左边View Controller Scene后面有个黄色图标,该图标的意思是警告的意思,是

Autolayout屏幕适配——代码实现(苹果公司 / VFL语言 / 第三方框架Masonry)

在讲解如何通过代码来实现屏幕适配前,先来了解一下,屏幕适配中用到的约束添加的规则. 在创建约束之后,需要将其添加到作用的view上 在添加时要注意目标view需要遵循以下规则: 1. 约束规则    1> 添加约束的规则(一) 对于两个同层级view之间的约束关系,添加到它们的父view上 2> 添加约束的规则(二) 对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上 3> 添加约束的规则(三) 对于有层次关系的两个view之间的约束关系,添加到层次较高的父view

Autolayout和VFL

Autolayout,開始于iOS6.0 一.什么时候用autolayout比較适合 1.不负责任的骑墙派说法:apple的设备越来越多了,你的应用应该都使用al. (而且用sb) 2.要看应用内容决定.假设你的内容是信息众多.同一时候须要展示的类别也非常多.尺寸动态不定.甚至这些是在列表中的.(如社交应用).Al能给于非常大的帮助. 3.Mac os的应用.如今都做iOS了. mac app的窗体.会有大小变化.al比較合适. 4.支持多向转屏的iPad应用.(有须要支持多方向iphone场景

IOS AutoLayout 代码实现约束—VFL

在autolayout下,尽管使用IB来拖放控件,但仍然避免不了用代码来创建控件,这是约束需要代码来实现. IOS 提供了两种添加约束的方法 第一种: +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multip

转载:AutoLayout的VFL描述

这篇不是什么教程.Cocoa autolayout出来蛮久了.以前多次想去深入研究一下,每次都很蛋疼无序.这东西是在有些搞.尤其习惯了code写布局的.看到Visual format language,简直要掀桌子.搜教程,满世界都是,没有一个讲得透彻的.例子空洞.你们就只会3个控件横向布局对法?浑浑噩噩看了多篇.有了点总结.槽不多吐了.简单讲讲. Autolayout,开始于iOS6.0 一.什么时候用autolayout比较适合 1.不负责任的骑墙派说法:apple的设备越来越多了,你的应用

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

AutoLayout不管是在StoryBorad还是在xib中都相对来说比较简单,VFL(Visual  fromat  language)可视化语言基本上用到的比较少,在xCode4时候自动布局的概念还没有,直接使用VFL会很方便,可视化语言依赖于oc运行时创建对应的约束,如果IBOutlet发生改变有的时候会造成莫名其妙的Bug.xCode5之后可视化语言用到的场景相对较少,但是作为一个工作的辅助还是可以稍微了解下. 基础知识 在StotyBoard中添加一个标签一个按钮,不适用自动布局,简

Autolayout及VFL经验分享【更新ing】

郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 如果文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额随意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源码下载:点我传送 Autolayout,开始于iOS6.0 一.什么时候用autolayout比较适合 1.Apple的设备越来越多了,你的应用应该都使用Autolayout并且用StoryBoard. 2.要看应用内容决定.如果你的内容是信息众多,同时需要展示的类别也很多,尺寸动态不定,甚至这些是在列表中的.(如社交应用).A