VFL:Visual format language

harkecho

于 2017-11-06 08:54:17 发布

阅读量236

点赞数

分类专栏： iOS-开发知识点文章标签：布局

iOS-开发知识点专栏收录该内容

254 篇文章 2 订阅

订阅专栏

VFL:Visual format language
ios-AutoLayout(自动布局代码控制)简单总结
原理：IOS6.0 之后，苹果优化了UI界面的布局方式，提出了自动布局的概念，和之前的autoresizing相比功能更强大。子视图基于父视图的自动布局显示。都是父视图去添加对子视图的约束。
在这里主要说的是通过代码对自动布局视图的实现。
代码中一般用到的有两个添加约束的方式：

1.- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);
2.- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);

在使用自动布局之前要对子视图的布局方式进行调整，用到这个UIView的属性。

- (BOOL)translatesAutoresizingMaskIntoConstraints NS_AVAILABLE_IOS(6_0); // Default YES

需要将其设置为NO；

下面用简单例子说明一下：

 UIView *v1 = [[UIView alloc] initWithFrame:CGRectZero];   v1.translatesAutoresizingMaskIntoConstraints = NO;
 v1.backgroundColor = [UIColor redColor];
    [self.view addSubview:v1];

UIView *v2 = [[UIView alloc] initWithFrame:CGRectZero];
v2.backgroundColor = [UIColor grayColor];
v2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:v2];//添加两个允许自动布局的子视图


   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:0]];//设置子视图的宽度和父视图的宽度相同

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:0.5
                                                       constant:0]];//设置子视图的高度是父视图高度的一半

关于对constraintsWithVisualFormat:函数介绍:
contstraintsWithVisualFormat:参数为NSString型,指定Contsraint的属性,是垂直方向的限定还是水平方向的限定,
参数定义一般如下:
| 表示父视图
- 表示距离
V: 表示垂直
H: 表示水平

= 表示视图间距,宽度和高度必须大于或等于某个值
<= 表示视图间距宽度和高度必须小于或等于某个值
== 表示视图间距宽度和高度必须等于某个值

[self.view addConstraints:[NSLayoutConstraint
constraintsWithVisualFormat:@“H:|-0-[v1][v2(==v1)]-0-|” options:0 metrics:nil views:views];
//通过addConstraints 添加对水平方向上v1的控制–距离父视图左侧距离为0(距离为0的话也可省略)同时将v2
的水平方向的宽度和v1设置成相同
[self.view addConstraints:[NSLayoutConstraint
constraintsWithVisualForMat:@“V:|-0-[v1][v2(==v1)]|” options:0 metrics:nil views:views]];
//通过addConstraints添加对垂直方向上v1的控制—距离父视图上侧距离为0(距离为0的话可以省略)同时将v2
的垂直方向的高度和v1设置成相同

[self.view addConstraints:[NSLayoutConstraint
constraintsWithVisualFormat:@“V:|-0-[v1]-0-[v2]-0-|” option:0 metrics:nil views:views]];
//最后是垂直布局两个子view 这样就可以实现上下两个view,各占一半,

[cancelButton(72)]-12-[acceptButton(50)]
取消按钮宽72point，accept按钮宽50point，它们之间间距12point
[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
V:[redBox][yellowBox(==redBox)]
竖直布局，先是一个redBox，其下方紧接一个宽度等于redBox宽度的yellowBox
H:|-[Find]-[FindNext]-[FindField(>=20)]-|
水平布局，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线’|‘ 表示superview的边缘）

1. NSDictionary *dict1 = NSDictionaryOfVariableBindings(_boxV,_headerL,_imageV,_backBtn,_doneBtn);  

2. NSDictionary *metrics = @{@"hPadding":@5,@"vPadding":@5,@"imageEdge":@150.0};  

3. NSString *vfl = @"|-hPadding-[_boxV]-hPadding-|";  

4. NSString *vfl0 = @"V:|-25-[_boxV]";  

5. NSString *vfl3 = @"V:|-vPadding-[_headerL]-vPadding-[_imageV(imageEdge)]-vPadding-[_backBtn]-vPadding-|";

dict1就是api 中需要的最后一个参数views。由上述宏来完成。
metrics定义了一些vfl中要用的参数。
下面有些vfl字串，一看便知如何使用metrics。
看到：

1)”|”表示superview.
|-间距-[view1对象名]-(>=20)-[view2对象名]
不写H/V就表示横向，间距可以写固定值也可写>/<。
形象化的理解，”|”是用来确定view上、下、左、右关系的。
想要确定从上到下的关系，就加V:|。那么这个vfl字串就可以描述从上到下的view们的关系。

3)优先级用＠表示。如V:|-50@750-[view(55)]，或者写到metrics里面更好。
具体定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。

4)options，这个要看具体需要。如果是竖排V布局，可以添加NSLayoutFormatAlignAllLeft，让他们对齐。
根据需要也可以添加按位或NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight。（鬼知道什么需要，自己看经验吧）

5)写好以后一般把constraint添加给superview：
1. NSString *vfl1 = @”|-hPadding-[_headerL]-hPadding-|”;
2. [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict1]];
3.
五，实际操作中的问题

xib模式
1.addConstraint(s)前，view应该去部被addSubView上去了。
2.不必给views写frame
3.给必要的view关掉AutoresizeingMask。[_aView setTranslatesAutoresizingMaskIntoConstraints:NO];
4.UILabel换行要写linebreakMode,要写numberOfLines(iOS7.0默认好像是1，坑爹了)
5.UILabel要想换行，一定要添加preferredMaxLayoutWidth。否则没法初始化宽度。

编码模式感受到的最大方便。label换行不用写行高计算了。完全自动适应。label所在的superview也会自动计算rect。

harkecho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VFL:Visual format language

VFL:Visual format language ios-AutoLayout(自动布局代码控制)简单总结原理：IOS6.0 之后，苹果优化了UI界面的布局方式，提出了自动布局的概念，和之前的autoresizing相比功能更强大。子视图基于父视图的自动布局显示。都是父视图去添加对子视图的约束。在这里主要说的是通过代码对自动布局视图的实现。代码中一般用到的有两个添加约束的方式：1.
复制链接

扫一扫