使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

转载 2015年11月20日 17:10:24

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。

一:API介绍

  1. NSLayoutConstraint API

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

参数介绍:

format:此参数为你的vfl语句,比如:@"H:|-[button]-|"

opts:枚举参数,默认写0,具体跟据你所实现的需求去选择你想要的枚举

metrics:这里是一个字典,当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为width,那么这个参数去哪里找呢?就是在这个字典里面找到key对就的值,如果没有找到这个值,app就会crash.

views:顾名思义,这是传所有你在vfl中使用到的view,那在上面这句例子中的应该怎么传呢?结果是这样的:NSDictionaryOfVariableBindings(button).如果你使用到了多个view,就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应,缺一不可.

2.UIView API

1
2
UIView
- (void)addConstraints:(NSArray *)constraints;

在上面1中返回值类型是NSArray,而现在这个方法的参数也刚好是一个NSArray类型。那么直接把上一个方法的返回值当作这个方法的参数就可以了。如果你有多个VFL,你也可以利用可变数组( NSMutableArray)把这多个VFL返回的数据拼在一起,然后再调用addConstraints:方法。

二:简单的使用

1.单控件的使用(没有与其他控制有关联,比如空隙等)

新建一个单页面项目Single View Application),在项目里面加上下面这段代码代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#import "ViewController.h"
@interface ViewController ()
  
@end
  
@implementation ViewController
  
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button=[[UIButton alloc]init];
    [button setTitle:@"点击一下" forState:UIControlStateNormal];
    button.translatesAutoresizingMaskIntoConstraints=NO;
    [button setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:button];
    NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(button)];
      
    NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(button)];
      
    [self.view addConstraints:constraints1];
    [self.view addConstraints:constraints2];
     
      
}
  
@end

运行程序,效果图如下:

01222.jpg

可以看到,我们新建的button已经出来,证明上面的自动布局语句(VFL)已经生效。那么我们来详细看看这些语句的意义是什么。

1
2
3
4
NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"
                         options:0
                         metrics:nil
                         views:NSDictionaryOfVariableBindings(button)];

这里的意思是:button在水平方向上距离它的superView,左右各20px,比如在这里他的大小就是320-20*2=280.在@"H:|-[button]-|"这个语句中,其中"H:"是表示这是水平方向上的约束,"|"是表示superView,"-"表示一个间隔空间,这个间隔如果是如superView之间的,那么就是20px,如果是两个同级别的view,比如@"[button]-[button1]",那么这里表示的是8px.

1
2
3
4
NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
                         options:0
                         metrics:nil
                         views:NSDictionaryOfVariableBindings(button)];

跟上面有点不同,@"V:|-20-[button(==30)]",其中"V:"中代表这是垂直方向上的约束,"|-20-"这里的意思就是距离头部为20px,相当于y坐标为20。后面的"[button(==30)]",是指定这个button的高度为30px.y坐标固定了,高度固定了,那这个view的约束就完成了。如果你有需要,你的高度值(或者其他同类型的)可以使用>=,==,<=来表示,甚至你可以组合来用,像上面的30,你可以指定一个区别,比如:(>=30,<=40),这同样也是可以的。如果你想表达他的优先级别,可以使用@"V:|-20-[button(==30@1000)]",这个@1000,就是他的级别了。你可以适配XIB或者SB对它的优先级做更多的处理.

PS:值得注意的是,在用代码创建的UIView在,一定要加上下面这句代码

1
button.translatesAutoresizingMaskIntoConstraints=NO;

如果没有上面这一行,你的约束将不生效,控制台会输出一连串的错误.

2:多控件之间关联使用

基于上面的代码上,我们重新加了一段代码,现在的全部代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#import "ViewController.h"
@interface ViewController ()
  
@end
  
@implementation ViewController
  
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button=[[UIButton alloc]init];
    [button setTitle:@"点击一下" forState:UIControlStateNormal];
    button.translatesAutoresizingMaskIntoConstraints=NO;
    [button setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:button];
    NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"
                           options:0
                           metrics:nil
                            views:NSDictionaryOfVariableBindings(button)];
      
    NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(button)];
      
    [self.view addConstraints:constraints1];
    [self.view addConstraints:constraints2];
      
      
    UIButton *button1=[[UIButton alloc]init];
    button1.translatesAutoresizingMaskIntoConstraints=NO;
    [button1 setTitle:@"请不要点击我" forState:UIControlStateNormal];
    [button1 setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:button1];
      
    NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|"
                             options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(button1)];
      
    NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]"
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(button1,button)];
      
    [self.view addConstraints:constraints3];
    [self.view addConstraints:constraints4];
      
}

运行的效果图如下:

022.jpg

通过代码对比,可以看出,在button1的垂直方向约束上,我们做了一点改变。水平方向上跟button一样,这里就不多作解释。我们来看看垂直方向上的。

1
2
3
4
NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]"
                         options:0
                         metrics:nil
                         views:NSDictionaryOfVariableBindings(button1,button)];

VFL语句为:@"V:[button]-[button1(==30)]",这里用到了两个view在VFL语句里面。刚才我们也说到,"-"在同一级别的View上使用的时候表示的间距为8个像素点,整一句的意思就是button1的y坐标离button有8个像素点.在不使用auto layout的时候,可以这样表达CGRectGetMaxY(button.frame)+8.

我再改一下上面这一句VFL

1
2
3
4
NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]"
                         options:0
                         metrics:@{@"height":@30}
                         views:NSDictionaryOfVariableBindings(button1,button)];

再次运行,你会发现,效果是一样的。这样你就知道怎么动态去给view加上高度或者宽度,或是其他间距了吧?

那么,如何做到两个View,或是多个View之间等高,或者等宽呢?能用VFL可以做到吗?除了通过上面的直接赋值宽高的数值外,VFL还提供了另外一种写法用于等宽等高上。

还是上面的Demo,我们改一下代码

1
2
3
4
5
6
7
8
9
NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1(button)]"
                         options:0
                         metrics:nil
                         views:NSDictionaryOfVariableBindings(button1,button)];
      
    NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(button)]"
                           options:0
                           metrics:nil
                           views:NSDictionaryOfVariableBindings(button1,button)];

通过@"H:|-[button1(button)]",@"V:[button]-[button1(button)]",这两句就可以轻松实现等宽等高了!

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

功能        表达式

水平方向          H:

垂直方向          V:

Views         [view]

SuperView      |

关系         >=,==,<=

空间,间隙       -

优先级        @value

 四: 在代码中更新AutoLayout约束

 //遍历footerview约束(一般高,宽)

            NSArray* constrains = self.footerView.constraints;

            for (NSLayoutConstraint* constraint in constrains) {

                if (constraint.firstAttribute ==NSLayoutAttributeHeight) {

                    constraint.constant = 0.0;

                }

            }

            

           //遍历view约束,找到属于tableview的约束

            NSArray* constrains2 = self.view.constraints;

            for (NSLayoutConstraint* constraint in constrains2) {

                if (constraint.secondItem == self.tableView) {

                    //据底部0

                    if (constraint.firstAttribute ==NSLayoutAttributeBottom) {

                        constraint.constant = 0.0;

                        

                    }

                }

            }

五: 动画annomation AutoLayout自动布局

 [button setNeedsUpdateConstraints];

    [UIViewanimateWithDuration:0.5fanimations:^{

        [button layoutIfNeeded];

        //button 添加约束

        [self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:buttonHoptions:0metrics:metricsviews:dict]];

        [self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:buttonVoptions:0metrics:metricsviews:dict]];

    }];




IOS Auto Layout代码实现自动布局--VFL(Visual format language)

Auto Layout是在WWDC2012上被引入到iOS中的,从iOS6.0以后就开始支持,但是大多数的开发者还是习惯使用传统的UI布局方式,虽然有一大部分开发者早已使用了Auto Layout,这...
  • zhang_Red
  • zhang_Red
  • 2015年05月05日 14:58
  • 6415

iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:API介绍 NSLayoutConstraint API...
  • hopedark
  • hopedark
  • 2014年12月10日 11:39
  • 6664

使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:API介绍 NSLayoutConstraint...
  • huxiaoqiao163
  • huxiaoqiao163
  • 2014年12月09日 14:21
  • 485

使用Auto Layout中的VFL(Visual format language)——代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:api介绍 1.NSLayoutConstraint A...
  • zhiwupei
  • zhiwupei
  • 2014年12月08日 11:32
  • 262

VFL:Visual format language

VFL:Visual format language ios-AutoLayout(自动布局代码控制)简单总结 原理:IOS6.0 之后,苹果优化了UI界面的布局方式,提出了自动布局的概念,和之前...
  • u012581760
  • u012581760
  • 2017年11月06日 08:54
  • 78

iOS 10 Auto Layout界面自动布局系列1-自动布局的基本原理

一、视图定位的基本原理 二、旧的界面布局方式及其缺点 三、自动布局的原理与使用方法...
  • pucker
  • pucker
  • 2014年12月10日 00:25
  • 31091

iOS 6 Auto Layout Visual Format Language

Visual Format Language Visual Format Syntax The following are examples of constraints you can ...
  • jamesliulyc
  • jamesliulyc
  • 2013年02月28日 11:56
  • 2384

3.0 Introduction (Auto Layout and the Visual Format Language)

调整UI的布局总是令人头大,我们需要用很大一部分代码来设置UI的布局,使得他能在不同的版本,不同的设备上友好显示。嗨...做人难,做程序员更难。 为了更好的帮我们解决这个问题,苹果从OS X引进了A...
  • swibyn
  • swibyn
  • 2013年11月15日 11:41
  • 979

iOS Visual format language(VFL)

关于VFL,网络上的文档也是非常多。 之前对VFL没有什么太大的了解,一直用Frame和autoresizingMask。 直到使用VFL,已经深陷其中无法自拔。 说起VFL的语法,我记...
  • u014632353
  • u014632353
  • 2015年05月25日 14:42
  • 545

VFL(Visual Format Language)可视化格式语言

VFL(Visual Format Language)可视化格式语言 苹果推出了一门比较抽象的语言VFL,用来进行自动布局处理 H:   表示水平方向 V:   表示...
  • raoshihong
  • raoshihong
  • 2015年05月27日 20:22
  • 651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
举报原因:
原因补充:

(最多只允许输入30个字)