iOS UI布局-VFL语言

什么是VFL语言

VFL(Visual Format Language),“可视化格式语言”。

VFL是苹果公司为了简化autolayout的编码而推出的抽象语言。

语法说明

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左边缘间隔10,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边边缘的间距都是默认宽度。(竖线“|”表示superview的边缘)。

使用方法

使用VFL来创建约束数组
+(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

format:VFL语句
opts:约束类型
metrics:VFL语句中用到的具体数值
views:VFL语句中用到的控件

创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义
NSDictionaryOfVariableBindings(...)

实例展示

效果图:

  

实现代码:

-(void)horizontalLayout{
    //1.添加两个控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];

    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

    //2.添加约束
    //2.1水平方向的约束
    NSString *hVFL = @"H:|-30-[blueView]-30-[redView(==blueView)]-30-|";
    NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:nil views:@{@"blueView":blueView, @"redView":redView}];
    [self.view addConstraints:hCons];

    //2.2垂直方向的约束
    NSString *vVFL = @"V:[blueView(50)]-30-|";
    NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:0 metrics:nil views:@{@"blueView":blueView}];
    [self.view addConstraints:vCons];
}

-(void)verticalLayout{
    //1.添加两个控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

    //2.添加约束
    //2.1水平方向的约束
    NSString *hVFL = @"H:|-30-[blueView]-30-|";
    NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:0 metrics:nil views:@{@"blueView":blueView}];
    [self.view addConstraints:hCons];

    //2.2垂直方向的约束
    NSString *vVFL = @"V:|-30-[blueView(50)]-30-[redView(==blueView)]";
    NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView, @"redView":redView}];
    [self.view addConstraints:vCons];
    NSLayoutConstraint *redLeftCon = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    [self.view addConstraint:redLeftCon];
}

小结

最后对格式的字符串作一个总结介绍:

功能 表达式
水平方向 H:
垂直方向 V:
Views [view]
SuperView |
关系 >=,==,<=
空间,间隙 -
优先级 @value

参考:http://www.cnblogs.com/chars/p/5146607.html

时间: 2024-10-13 16:34:41

iOS UI布局-VFL语言的相关文章

iOS学习之VFL语言简介

http://www.cnblogs.com/chars/p/5146607.html 什么是VFL语言 VFL(Visual Format Language),"可视化格式语言". VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelButton(72)]-12-[acceptButton(50)] cancelButton宽72,acceptButton宽50,它们之间间距12 H:[wideView(>[email protec

iOS UI布局-定时器

定时器是比较常用的一个UI控件,在付款.抢购时,经常会使用到.提取成一个通用的方法 /** * 倒计时GCD通用方法 * 通常用的计时器都是用NSTimer,但是NSTimer在线程很吃紧的时候效果不佳,使用GCD计时相对更好 * * @param seconds 倒计时间 单位:秒 * @param showLable 需要显示的文本框 * @param endBlock 倒计时结束后,回调的Block */ - (void)startTimerWithSeconds:(long)second

iOS UI布局-回到顶部

回到顶部,是比较常用的一个效果 核心代码 在ViewDidLoad中,添加回到顶部按钮 计算偏移量,如果当前显示的内容全部向上隐藏掉,则显示“回到顶部”按钮 // // ViewController.m // 回到顶部 // // Created by Apple on 15/11/4. // Copyright © 2015年 Apple. All rights reserved. // #import "ViewController.h" @interface ViewContro

iOS:VFL语言

VFL语言 介绍: 什么是VFL语言? VFL全称是Visual Format Language,翻译过来是“可视化格式语言” VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言 VFL示例: H:[cancelButton(72)]-12-[acceptButton(50)] cancelButton宽72,acceptButton宽50,它们之间间距12 H:[wideView(>[email protected])] wideView宽度大于等于60point,该约束条件优

iOS,自动布局autoresizing和auto layout,VFL语言

1.使用autoresizing 2.使用autolayout 3.VFL语言(Visual Format Language:可视化格式语言) 使用autoresizing 点击xib文件,去掉使用autolayout(autolayout和只能使用一个)    如图中所示 1.代表视图距离父容器顶部距离固定 2.代表视图距离父容器左边距离固定 3.代表视图距离父容器底部距离固定 4.代表视图距离父容器右边距离固定 5.中间水平线表示视图随着父容器变宽而变宽(按比例) 6.中间垂直线表示视图随着

iOS 8 UI布局 AutoLayout及SizeClass(二)

一.新特性Size Class介绍 随着iOS8系统的发布,一个全新的页面UI布局概念出现,这个新特性将颠覆包括iOS7及之前版本的UI布局方式,这个新特性就是Size Class.Size Class配合Auto Layout可以解决所有(包括iPhone及iPad)iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 . 二.为什么要使用Size Class 直到iPhone6发布后,目前iOS设备的屏幕尺寸已经有4种了,如图: iPhone6没出现之前,还可以通过代码来适配两种尺寸的UI,但iP

iOS-屏幕适配-UI布局

iOS 屏幕适配:autoResizing autoLayout和sizeClass 一.图片解说 -------------------------------------------------------------------------------------------------------------------------------------------------------------- 二.AutoLayout 1.前言 •在iOS程序中,大部分视图控制器都包含了大量

iOS界面布局的核心以及TangramKit介绍

前言 TangramKit是iOS系统下用Swift编写的第三方界面布局框架.他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局体系以及HTML/CSS中的float和flex-box的布局功能和思想,目的是为iOS开发人员提供一套功能强大.多屏幕灵活适配.简单易用的UI布局解决方案.Tangram的中文即七巧板的意思,取名的寓意表明这个布局库可以非常灵巧和简单的解决各种复杂界面布局问题.他的同胞框架:MyLayout是一套用objective-C实现的界面

iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三--纯代码的autoLayout及布局动画 一.引言 关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致.除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘.前几篇布局介绍的链接如下: 使用autoresizing进行界面布局:http://my.o