码迷,mamicode.com
首页 > 移动开发 > 详细

iOS:VFL语言

时间:2015-10-21 20:57:38      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

VFL语言

 
介绍:
什么是VFL语言?
VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
技术分享
 
VFL示例:
H:[cancelButton(72)]-12-[acceptButton(50)]
cancelButton宽72,acceptButton宽50,它们之间间距12
 
H:[wideView(>=60@700)]
wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)
 
V:[redBox]-[yellowBox(==redBox)]
竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox
 
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)
 
VFL的使用:
使用VFL来创建约束数组

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

format :VFL语句
opts :约束类型
metrics :VFL语句中用到的具体数值
views :VFL语句中用到的控件
 
创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义

NSDictionaryOfVariableBindings(...)

 

 

具体实例如下:

 

练习一:

 在控制器view底部添加2个view,1个蓝色,1个红色

 2个view宽度、高度永远相等

 距离父控件左边、右边、下边间距和2个view之间的间距相等

 技术分享

 在ViewController.m文件的-(void)viewDidLoad{........}方法中代码如下:
//创建两个视图view1和view2,view1为蓝色,view2为红色
    //创建view1
    UIView *view1 = [[UIView alloc]init];
    view1.backgroundColor = [UIColor blueColor];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:view1];
    
    //创建view2
    UIView *view2 = [[UIView alloc]init];
    view2.backgroundColor = [UIColor redColor];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:view2];
//使用VFL语言生成view1、view2的约束
    //使用VFL语言生成约束
    NSDictionary *metrics = @{@"margin":@20,@"height":@200};
    
    //NSDictionary *views = @{@"view1":view1,@"view2":view2}; //作用与下面的字典一样
    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//获取view1、view2水平方向上的约束 NSArray
*conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-[view2(==view1)]-margin-|" options:0 metrics:metrics views:views];
//获取view1竖直方向的约束 NSArray
*conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1(height)]-margin-|" options:0 metrics:metrics views:views];
//获取view2竖直方向上的约束 NSArray
*conts3 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2(==view1)]-margin-|" options:0 metrics:metrics views:views];
//将生成的约束添加到它们的父视图中
    //在父视图上添加VFL语言生成的约束
    [self.view addConstraints:conts];
    [self.view addConstraints:conts2];
    [self.view addConstraints:conts3];
旋转屏幕的演示结果为:
技术分享 技术分享
技术分享

 

 

 

练习二:
在控制器view顶部添加2个view,1个蓝色,1个红色
2个view高度永远相等
红色view和蓝色view右边对齐
蓝色view距离父控件左边、右边、上边间距相等
蓝色view距离红色view间距固定
红色view的左边和父控件的中点对齐
技术分享
 
 
分析:虽然VFL语言简化了AutoLayout布局的代码量,但是它也有一个缺陷,那就是它无法生成视图与中心点处的约束,此时,需要再搭配AutoLayout的代码,才能完成这个需求。才上面的题可以看出,对view2需要使用
 
 在ViewController.m文件的-(void)viewDidLoad{........}方法中代码如下:
创建视图view1和view2
    //创建view1
    UIView *view1 = [[UIView alloc]init];
    view1.backgroundColor = [UIColor blueColor];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:view1];
    
    
    //创建view2
    UIView *view2 = [[UIView alloc]init];
    view2.backgroundColor = [UIColor redColor];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:view2];
使用VFL语言生成view1水平方向的约束、view1和view2竖直方向的约束
    //使用VFL语言生成view1的约束
    NSDictionary *metrics = @{@"height":@100,@"margin":@20};
    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
    
//获取水平方向上view1的约束 NSArray
*constr = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-|" options:0 metrics:metrics views:views]; //获取竖直方向上view1和view2的约束 NSArray *constr2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margin-[view1(height)]-margin-[view2(==view1)]" options:0 metrics:metrics views:views];
使用Autolayout创建view2的约束
    #pargma mark -使用Autolayout给view2创建约束

//创建view2右边与父视图右边的约束 NSLayoutConstraint *lcRight = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20];
//创建view2左边与父视图中心处的约束 NSLayoutConstraint
*constraint = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
添加约束
    //将AutoLayout创建的约束添加到父视图中
    [self.view addConstraints:@[lcRight,constraint]];
    
    
    //将VFL生成的约束添加到父视图中
    [self.view addConstraints:constr];
    [self.view addConstraints:constr2];
旋转屏幕的演示结果如下:

技术分享 技术分享

技术分享

 

 

iOS:VFL语言

标签:

原文地址:http://www.cnblogs.com/XYQ-208910/p/4898895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!