关于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)]];
和第一行稍微有不同,因为右边有一个闹钟,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