iOS Visual format language（VFL）

关于VFL，网络上的文档也是非常多。

之前对VFL没有什么太大的了解，一直用Frame和autoresizingMask。

直到使用VFL，已经深陷其中无法自拔。

说起VFL的语法，我记得第一次看到VFL我直接就放弃了。

直到Apple出了iPhone6 iPhone6plus，迫于无奈，开始转向VFL的研究。

首先推荐一个网站：http://constraints.icodeforlove.com/

该网站可以自动生成VFL的代码。

虽然很方便，但如果因为这样不去了解VFL，那么就大错特错了。

因为他并不能去实现ScrollView中多个视图滑动的那种效果。

实际上要用VFL实现那种效果也是特别方便的。

假设要做一个对阵的Cell

并且支持旋转

如果按以前的思路，需要针对屏幕的width来做变化。相当麻烦。

并且iOS8之后，获取width的变化非常多，极有可能出错。

如果要使用VFL，要将视图的属性translatesAutoresizingMaskIntoConstraints = NO

用VFL只需要一套代码，非常简单。

先来约束两边的图片

<p class="p1"><span class="s1">        </span><span class="s2">// align layer from the left</span></p><p class="p2"><span class="s1">        [</span><span class="s3">self</span><span class="s1">.</span><span class="s2">contentView</span><span class="s1"> </span><span class="s2">addConstraints</span><span class="s1">:[</span><span class="s2">NSLayoutConstraint</span><span class="s1"> </span><span class="s2">constraintsWithVisualFormat</span><span class="s1">:</span><span class="s4">@"H:|-20-[_hostImageView(==50)]"</span><span class="s1"> </span><span class="s2">options</span><span class="s1">:</span><span class="s5">0</span><span class="s1"> </span><span class="s2">metrics</span><span class="s1">:</span><span class="s3">nil</span><span class="s1"> </span><span class="s2">views</span><span class="s1">:</span><span class="s6">NSDictionaryOfVariableBindings</span><span class="s1">(</span><span class="s7">_hostImageView</span><span class="s1">)]];</span></p><p class="p3"><span class="s2">        </span></p><p class="p1"><span class="s1">        </span><span class="s2">// align layer from the top</span></p><p class="p2"><span class="s1">        [</span><span class="s3">self</span><span class="s1">.</span><span class="s2">contentView</span><span class="s1"> </span><span class="s2">addConstraints</span><span class="s1">:[</span><span class="s2">NSLayoutConstraint</span><span class="s1"> </span><span class="s2">constraintsWithVisualFormat</span><span class="s1">:</span><span class="s4">@"V:|-5-[_hostImageView(==50)]"</span><span class="s1"> </span><span class="s2">options</span><span class="s1">:</span><span class="s5">0</span><span class="s1"> </span><span class="s2">metrics</span><span class="s1">:</span><span class="s3">nil</span><span class="s1"> </span><span class="s2">views</span><span class="s1">:</span><span class="s6">NSDictionaryOfVariableBindings</span><span class="s1">(</span><span class="s7">_hostImageView</span><span class="s1">)]];</span></p>

左边主队HostImageView的约束

第一行是对HostImageView的水平进行约束，并且让他的宽度==50

第二行是对HostImageView的垂直进行约束，并且让他的高度==50

        // align layer from the right        [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_visitImageView(==50)]-10-[_clockButton]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_visitImageView,_clockButton)]];                // align layer from the top        [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[_visitImageView(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_visitImageView)]];

右边对VisitImageView的约束

和第一行稍微有不同，因为右边有一个闹钟，H:[_visitImageView(==50)]-10-[_clockButton]水平线上距离闹钟是10

其他的一样

主队和客队的两个Label约束其他在水平线上的一模一样的

在垂直线上，让他距离图片-10-的位置即可

这边就不在放代码了。。

讲一下居中的那些吧。

其实并不算居中，中间偏左一些。

这个比之前的那些更好实现一些。

        [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:_topTitleLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeCenterX multiplier:0.94 constant:0.0]];

意思是让topTitle居中，有一个multiplier，这个是按百分比计算的，所以1是完整的，但我并不要完整的居中。所以我选择了0.94，也就是居中然后偏左一点。

然后又有一个问题，如果居中的字体太长，他会盖住两边的图片，或者跑到两边的图片下面去。

还需要加一个限制

        [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:_topTitleLabel attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:_hostImageView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0]];        [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:_topTitleLabel attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:_visitImageView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0]];

这句话是限制他左边和右边的位置。这样我就把他限制在中间了，并且不管怎么旋转，都不需要再去调整什么，也不需要去想width的获取。

比较简单的用法，分享做个记录。

从网上找过来的一段功能表达式

功能　　　　　　　　表达式

水平方向  　　　　　　  H:

垂直方向  　　　　　　  V:

Views　　　　　　　　 [view]

SuperView　　　　　　|

关系　　　　　　　　　>=,==,<=

空间,间隙　　　　　　　-

优先级　　　　　　　　@value