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

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

基础知识

在StotyBoard中添加一个标签一个按钮，不适用自动布局，简单的控制它们之间的水平距离为80，如下图所示:

 

视图中添加约束:

1 2

NSLayoutConstraint   *labelContraint=[ NSLayoutConstraint  constraintWithItem: self .changeButton attribute: NSLayoutAttributeLeft  relatedBy: NSLayoutRelationEqual  toItem: self .descriptionLabel attribute: NSLayoutAttributeRight  multiplier:1.0 constant:60]; [ self .view addConstraint:labelContraint];

这个只是视图约束的一种方式，下面这种方式才是本文的主角:

1 2 3 4

//使用可视化语言添加约束 NSDictionary   *viewDictionary= NSDictionaryOfVariableBindings (_descriptionLabel,_changeButton); NSArray   *visualConstraint=[ NSLayoutConstraint  constraintsWithVisualFormat:@ "[_descriptionLabel]-60-[_changeButton]"  options:0 metrics: nil  views:viewDictionary]; [ self .view addConstraints:visualConstraint];

　这里面用到的constraintsWithVisualFormat方法,具体参数说明如下:

format:参数是vfl语句，语句的基本元素下面会详细解释一下；

opts:枚举参数，默认写0；

metrics:字典，当在format中使用了动态数据，会根据字典去匹配，接下来会具体有例子；

views：字典，传入需要用到的视图集合；

具体format需要参考一下表达式的意思:

水平方向  　　　　　　  H:

垂直方向  　　　　　　  V:

Views　　　　　　　　 [需要定义的视图]

SuperView　　　　　　|

关系　　　　　　　　　>=,==,<=

间隙　　　　　　　     -

视图内部约束           （）

Demo实战

通过VFL控制手动添加的标签的位置，具体效果如下:

 

代码实现如下:

1 2 3 4 5 6 7 8 9 10 11

UILabel *link=[[UILabel alloc]init]; link.text=@ "http://www.cnblogs.com/xiaofeixiang" ; link.translatesAutoresizingMaskIntoConstraints= NO ; [link setBackgroundColor:[UIColor greenColor]]; [ self .view addSubview:link]; NSArray  *horizontal=[ NSLayoutConstraint  constraintsWithVisualFormat:@ "H:|-40-[link]-20-|"  options:0 metrics: nil  views: NSDictionaryOfVariableBindings (link)];   NSArray  *vertical=[ NSLayoutConstraint  constraintsWithVisualFormat:@ "V:[_descriptionLabel]-100-[link(>=30)]"  options:0 metrics: nil  views: NSDictionaryOfVariableBindings (link,_descriptionLabel)];   [ self .view addConstraints:horizontal]; [ self .view addConstraints:vertical];

　第一个约束是控制标签距离父视图左右之间的距离，第二个控制标签和”博客园-FlyElephant"之间的垂直距离为100.当然如果你想通过字典控制垂直之间的距离可以按照下面这么做:

1	NSArray  *vertical=[ NSLayoutConstraint  constraintsWithVisualFormat:@ "V:[_descriptionLabel]-Vertical-[link(>=30)]"  options:0 metrics:@{@ "Vertical" : @200 } views: NSDictionaryOfVariableBindings (link,_descriptionLabel)];

　最后的结果:

友情提示在添加约束的时候不要和StoryBoard中的冲突，如果添加的水平约束StoryBoard中也有的话，就会出现下面这种情况:

1 2 3 4 5 6 7 8 9 10 11 12

2015-07-01 10:54:13.537 VFLDemo[2358:60863] Unable to simultaneously satisfy constraints.      Probably at least one of the constraints in the following list is one you don 't want. Try this: (1) look at each constraint and try to figure out which you don' t expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you 're seeing NSAutoresizingMaskLayoutConstraints that you don' t understand, refer to the documentation  for  the UIView property translatesAutoresizingMaskIntoConstraints) (      "<NSLayoutConstraint:0x7fc5e3732860 H:[UILabel:0x7fc5e372ef30'\U535a\U5ba2\U56ed-FlyElephant']-(15)-[UIButton:0x7fc5e372d550'\U7fa4:228407086']>" ,      "<NSLayoutConstraint:0x7fc5e37344e0 H:[UILabel:0x7fc5e372ef30'\U535a\U5ba2\U56ed-FlyElephant']-(60)-[UIButton:0x7fc5e372d550'\U7fa4:228407086']>" )   Will attempt to recover by breaking constraint < NSLayoutConstraint :0x7fc5e37344e0 H:[UILabel:0x7fc5e372ef30 '博客园-FlyElephant' ]-(60)-[UIButton:0x7fc5e372d550 '群:228407086' ]>   Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to  catch  this  in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4612683.html，如需转载请自行联系原作者