使用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)--代码实现自动布局

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

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

点击打开链接 本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:API介绍 NSLayoutCo...

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

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

Auto Layout界面自动布局系列-使用VFL添加布局约束

本篇博文是转自博主Puzhi的专栏,因为之前接触了前面的几节内容,所以下面的东西相当于从Puzhi处进行充电学习了。系列博文原址:http://blog.csdn.net/pucker //////...

iOS 8 Auto Layout界面自动布局系列4-使用VFL添加布局约束

本系列第一篇文章介绍了自动布局的基本原理,第二篇通过一个简单的例子演示了如何使用IB以可视化方式创建自动布局约束,第三篇使用代码直接创建NSLayoutConstraint实例来定义自动布局约束。本篇...
  • pucker
  • pucker
  • 2015年04月17日 15:53
  • 19904

Auto Layout界面自动布局系列 (使用VFL添加布局约束)

本系列第一篇文章介绍了自动布局的基本原理,第二篇通过一个简单的例子演示了如何使用IB以可视化方式创建自动布局约束,第三篇使用代码直接创建NSLayoutConstraint实例来定义自动布局约束。本篇...

iOS自动布局(二)--代码控制--Visual Format language(可视化格式语言)

【iOS开发】---- iOS自动布局(二) 分类: 【iOS开发】2014-03-22 10:13 916人阅读 评论(2) 收藏 举报 Visual Format Langua...

自动布局:AutoLayout代码实现:NSLayoutConstraint、VFL、Mansony

一、注意事项 1、使用AutoLayout自动布局,全程都不要出现和frame相关的代码了。 2、设置 AutoLayout 约束,之前先禁用AutoResizing ,在代码里只需要针对某一个视图决...

Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹

此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了。 简介...

iOS 8 Auto Layout界面自动布局系列3-使用代码添加布局约束

本系列的第一篇文章介绍了自动布局的基本原理,第二篇文章通过一个简单的例子演示了如何使用Xcode的Interface Builder(简称IB)以可视化方式添加约束。本篇为该系列的第三篇文章,主要介绍...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
举报原因:
原因补充:

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