转载:AutoLayout的VFL描述

这篇不是什么教程。Cocoa autolayout出来蛮久了。以前多次想去深入研究一下,每次都很蛋疼无序。这东西是在有些搞。尤其习惯了code写布局的。看到Visual format language,简直要掀桌子。搜教程,满世界都是,没有一个讲得透彻的。例子空洞。你们就只会3个控件横向布局对法?浑浑噩噩看了多篇。有了点总结。槽不多吐了。简单讲讲。

Autolayout,开始于iOS6.0

一.什么时候用autolayout比较适合

1.不负责任的骑墙派说法:apple的设备越来越多了,你的应用应该都使用al。(并且用sb)

2.要看应用内容决定。如果你的内容是信息众多,同时需要展示的类别也很多,尺寸动态不定,甚至这些是在列表中的。(如社交应用)。Al能给于很大的帮助。

3.Mac os的应用。现在都做iOS了。mac app的窗口,会有大小变化。al比较合适。

4.支持多向转屏的iPad应用。(有需要支持多方向iphone场景么?那么长,脑残了?)

5.其他业务不复杂,页面较少的应用,其实,cocoa程序员写了多年code都有自己的ui编程习惯,这些习惯对于他们来说是很高效的。就算是第一项所说,布局的坐标都是相对的。

如果是习惯于code写布局的,建议可以继续沿用,同时也要学习al。自我感觉al和传统布局写法,工作量不会相差太多。但是VFL用熟练了以后会有很大的改善。

二.autolayout的基础理论

al的核心出发点是

1.view具有自我计算尺寸,布局的能力。通过它自身的内容,能够得到尺寸。

2.view的布局位置,确定于它与superview及其他view的关系。

3.与传统的autoresizingmask自适应相比,al更精确,能绝对的确定view的布局。

4.view不一定需要一个初始的rect。al中,view如果有足够的constraint,便可以确定自己的尺寸和位置,并且知道自己和其他view的关系。即,想确定view的布局,就给它(们)添加constraint。

三.xib下的autolayout

似乎al和xib布局模式生来就是要搞在一起的。用xib加al,view布局非常简单容易。编程工作立刻变成了美工的连线拼图游戏。

开启xib或者sb后,选择需要view(s)。选择menu的Editor,选择Pin。子菜单的项目就是可用的constraints。

Width:固定自身宽度

Height:。。。

H- Spacing: 固定两个view的水平间距

V- Spacing:。。。

下面4个分别是view相对于superview的左、右、上、下的间距

Widths Equally:两个view保持宽度相同

Heights Equally:。。。

xib界面右下角工具条也有可以编辑constraint的方式:

每个constraint添加后都是可以编辑的。选中某个constraint后开启右边栏选inspector。可以修改数值。(这个数值是view间的偏移量)和优先级。

自己慢慢拖着玩去。这不是傻瓜教程。点到位,自己研究。

xib下的al比较直观。可以基本看到效果和误差值。还有不正确的constraint的提示。少了constraint编译器会补,多了会提示报错。(不过都会引起界面布局不对,自己慢慢调吧,哥现在还是满篇alert,没有让编译器感觉矛盾费解的constraint,都是可以work的。)

还有resolve的方式解决constraint的问题,抱歉,我不会。

四.编码方式使用autolayout

对于页面不多,的普通应用。xib/sb加al。拖拖拽拽。娱乐中就可以完成UI的工作。al的确给于了不少方便。

不过多年的强迫症程序猿怎么会忍受这种很逊的方式。(拖积木?不敲代码?好像一天没做事。)

1.Visual format language (应该不算语言)

Apple的工程师很有爱,发明了这种哭笑不得的象形文字。感觉它就是种解析方式。

Apple的官方文档给出了少之又少的文档和坑爹的例子。(视频我没看,不知道怎么样)网上的同学们也写了点不痛不痒的几句代码。你这是学了1+1就让人搞微积分的节奏么?要写不写清楚,不如不写。

从厚道的老外那看了几篇。自己体会了些,分享给大家。只是个基本水平吧,会了这些,代码写al应该没有问题了。深入的我也还不会,希望遇到更有爱的牛人分享。

VFL在程序中由支持:

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

- 它返回一组constraint.

- format是你的VFL字串,等下讲。

- opts自己点去头文件看。有些情况会用,等下有例子。

- metrics是一个奇妙的字典,是你自己定义的。这个字典里面的key可以写在format字串中。编译器解析时,自动替换为metrics字典中的value。等下有例子。

- views是需要constraint关系的所有view.(也可以是一个)

2.VFL例子

写vfl字串的时候,脑海里要想象出画面的合理性。不合理的constraint会导致程序运行时报错或者直接崩溃。

随便写几个

 1
 2 NSDictionary *dict1 = NSDictionaryOfVariableBindings(_boxV,_headerL,_imageV,_backBtn,_doneBtn);
 3
 4 NSDictionary *metrics = @{@"hPadding":@5,@"vPadding":@5,@"imageEdge":@150.0};
 5
 6 NSString *vfl = @"|-hPadding-[_boxV]-hPadding-|";
 7
 8 NSString *vfl0 = @"V:|-25-[_boxV]";
 9
10 NSString *vfl3 = @"V:|-vPadding-[_headerL]-vPadding-[_imageV(imageEdge)]-vPadding-[_backBtn]-vPadding-|";   

dict1就是api 中需要的最后一个参数views。由上述宏来完成。

metrics定义了一些vfl中要用的参数。

下面有些vfl字串,一看便知如何使用metrics。

看到:

1)"|"表示superview.

|-间距-[view1对象名]-(>=20)-[view2对象名]

不写H/V就表示横向,间距可以写固定值也可写>/<。

形象化的理解,"|"是用来确定view上、下、左、右关系的。

想要确定从上到下的关系,就加V:|。那么这个vfl字串就可以描述从上到下的view们的关系。

2)看到vfl3里面,方括号表示view,圆括号表示尺寸数值。支持大小等于。或者另一个view |-[view1(view2)],v1的宽度等于v2。

3)优先级用@表示。如V:|[email protected][view(55)],或者写到metrics里面更好。

具体定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。

4)options,这个要看具体需要。如果是竖排V布局,可以添加NSLayoutFormatAlignAllLeft,让他们对齐。

根据需要也可以添加按位或NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight。(鬼知道什么需要,自己看经验吧)

5)写好以后一般把constraint添加给superview:

1 NSString *vfl1 = @"|-hPadding-[_headerL]-hPadding-|";
2
3 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict1]];   

6)还有一个api用于生成单个constaint

1 +(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;  

对于参数,记得,view1.attr1 = view2.attr2 * multiplier + constant就好。

这个是不用VFL的,好理解,但是不方便。如果用这个写。工作两不会比传统布局少多少。

五.实际操作中的问题

上面都是理论,世界操作会有些奇怪的问题要注意。这节才是重点。

xib模式,没啥要注意的,xib里报warning就报吧,我也不知道怎么弄,一切正常就好。

编码模式中,

1.addConstraint(s)前,view应该去部被addSubView上去了。

2.不必给views写frame

3.给必要的view关掉AutoresizeingMask。[_aView setTranslatesAutoresizingMaskIntoConstraints:NO];

4.UILabel换行要写linebreakMode,要写numberOfLines(iOS7.0默认好像是1,坑爹了)

5.UILabel要想换行,一定要添加preferredMaxLayoutWidth。否则没法初始化宽度。

编码模式感受到的最大方便。label换行不用写行高计算了。完全自动适应。label所在的superview也会自动计算rect。这才是al的精华。

所以,可以不用写这些了:

 1 [objc] view plaincopy
 2 /*
 3
 4     if([[UIDevice currentDevice].systemVersion floatValue]<7.0){
 5
 6         CGSize titleS = [title sizeWithFont:[_headerL font]
 7
 8                            constrainedToSize:CGSizeMake(270.0, CGFLOAT_MAX)
 9
10                                lineBreakMode:NSLineBreakByWordWrapping];
11
12
13
14         _headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,
15
16                                     _headerL.frame.size.width, titleS.height);
17
18     }else{
19
20         CGRect titleR = [title boundingRectWithSize:CGSizeMake(270.0, CGFLOAT_MAX)
21
22                                             options:NSStringDrawingUsesLineFragmentOrigin
23
24                                          attributes:nil
25
26                                             context:nil];
27
28         headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,
29
30                                    _headerL.frame.size.width, titleR.size.height);
31
32     }
33
34     */ 

我遇到了些问题,至今没有解决:

纯代码写的Viewcontroller 无法正常显示al布局。用空白的xib做了vc后,其余再用code写,就正常了。怀疑自己写的self.view,还需要针对autolayout做什么处理。至此,al,基本功能已经可以为你服务了。的确方便很多,建议还是使用VFL代码模式,熟练后能够提高很多效率。

demo

/cms/uploads/soft/131108/4196-13110Q12116.zip

来源:MoZiXiong的博客

时间: 2024-10-13 22:21:41

转载:AutoLayout的VFL描述的相关文章

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

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

Autolayout及VFL经验分享

随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享. 什么是Auto Layout? Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 为什么要用Auto Layout? Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题. 在iPhone4时代开发者只需要适配

Autolayout + VFL(Visual Format Language)

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

Autolayout和VFL

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

纯代码添加约束,autolayout 适配

IOS AutoLayout 代码约束—VFL 2014-12-22 22:19:43http://my.oschina.net/carson6931-Carson6931-点击数:2148 IOS 提供了两种添加约束的方法 第一种: +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2

Autolayout学习笔记

知识点一: 1.布局思维 传统布局思路中,一个view在哪里有多大,那就写清楚它的坐标位置和宽高就定了,平时用CGRect和CGPoint这两种模型就足够了,而且它一定非常听你的话,写的是多少,它绝对就是多少:但是autolayout的思路却变化了,或者说改进了,它囊括了传统frame布局思路,除了可以告诉view的坐标和宽高,它更提供了一种相对的概念,比如: 1)view相对于屏幕视图左边5点,右边10点,上面15点,下面20点,如果屏幕的长宽比例发生了改变(比如从3.5寸的320:480变成

【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)

关于AutoLayout,最早从iOS6开始引入使用. 主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换. 网上大量的资料都在介绍xib和storyboard,如何使用AutoLayout,说纯代码使用AutoLayout进行UI布局的越来越少.对于我这个习惯了代码UI布局的人,写个备忘: AutoLayout是什么? 使用一句Apple的官方定义的话 AutoLayout是一种基于约束的,描述性的布局系统. Auto Layout Is a Constraint-Based, De

从此爱上iOS Autolayout

转:从此爱上iOS Autolayout 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成.今天终于狠下心,丢下代码不写,来完成他吧! 一.别和我提Autolayout,我想死!! 从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触auto

自动布局autoLayout解决不同屏幕

这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成.今天终于狠下心,丢下代码不写,来完成他吧! 一.别和我提Autolayout,我想死!! 从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触autolayout时,一定和我一样,几乎快被其折