VFL实现自动布局遇到的一些问题

今天在使用VFL来实现以下界面布局时,遇到了一些问题,但最终得到解决,并加深了使用VFL的理解.最终效果图:

遇到的问题一:

先上代码:

 1     //初始化两个view
 2     UIView *redView = [[UIView alloc] init];
 3     redView.backgroundColor = [UIColor redColor];
 4     redView.translatesAutoresizingMaskIntoConstraints = NO;
 5     [self.view addSubview:redView];
 6
 7     UIView *blueView = [[UIView alloc] init];
 8     blueView.backgroundColor = [UIColor blueColor];
 9     blueView.translatesAutoresizingMaskIntoConstraints = NO;
10     [self.view addSubview:blueView];
11
12     //添加约束
13     NSString *hVFL = @"H:|[blueView][redView(==blueView)]|";
14     NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
15     [self.view addConstraints:hCons];
16
17     NSString *vVFL = @"V:|[redView(==blueView)]-|";
18     NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
19     [self.view addConstraints:vCons];
20
21     NSLayoutConstraint *redLeft = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];
22     [self.view addConstraint:redLeft];

以上代码可以实现最终的效果,但是调试输出栏上会提示如下:

大概意思是不能同时满足的约束?

经过检查代码发现,水平方向上的VFL代码是没有问题的,主要约束内容是蓝色view左边为父view的边缘,右边为红色view,红色view的右边是父view的边缘,和效果 图一致.那么问题肯定是出现在了垂直方向上,所以猜测最终的原因是在第17行代码:-|这里,是否编译器无法识别-后面至父view底部边缘的约束?把-|去掉后问题解决:

在这里,为什么去掉了-|后就没有错误提示了呢?

个人猜测:1、-后面的内容,编译器会认为也是一个未确定宽度位置,底部为父view底部边缘的约束,所以会提示上面无法被满足的约束的提示?

另外在解决过程中,也使用了另外一种解决方法,主要还是垂直方向约束VFL语句的更改,代码如下:

1    CGFloat screenHeightSpace = [UIScreen mainScreen].bounds.size.height * 0.5;
2    NSString *vVFL = [NSString stringWithFormat:@"V:|[redView(==blueView)]-%f-|",screenHeightSpace];

改了上面的代码后,结果如下图所示:

是不是解决了问题?能正常显示了,并且也没有提示什么错误?稍等,我旋转屏幕之后:

旋转屏幕之后,高度达不到效果了,而且调试输出栏上有提示信息了。这是为什么呢?

经过查看官方文档后发现,VFL中是不允许这样来设置高度和宽度的,文档截图如下:

时间: 2024-12-21 07:51:00

VFL实现自动布局遇到的一些问题的相关文章

IOS开发学习笔记039-autolayout 代码实现

本文转载至 http://www.cnblogs.com/songliquan/p/4548206.html 1.代码实现比较复杂 代码实现Autolayout的步骤 利用NSLayoutConstraint类创建具体的约束对象 添加约束对象到相应的view上 1 - (void)addConstraint:(NSLayoutConstraint *)constraint; 2 3 - (void)addConstraints:(NSArray *)constraints; 代码实现Autola

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

使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 2014-12-09 10:56 编辑: zhiwupei 分类:iOS开发 来源:机智的新手投稿 6 23450 Auto Layout自动布局VFL 招聘信息: 高级iOS开发工程师 高级PHP开发工程师 iOS高级研发工程师 iOS开发工程师 高级iOS手机应用软件开发工程师(培训讲师) 高级Cocos2d-x游戏开发工程师(培训讲师) iOS手机软件开发工程师 iOS工程师 Web后

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

本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 4 NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics

转载自@机智的新手:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 4 NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics

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

本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:api介绍 1.NSLayoutConstraint API NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:

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

本系列第一篇文章介绍了自动布局的基本原理,第二篇通过一个简单的例子演示了如何使用IB以可视化方式创建自动布局约束,第三篇使用代码直接创建NSLayoutConstraint实例来定义自动布局约束.本篇文章在第三篇文章的基础上,使用Visual Format Language(暂且翻译为可视化格式语言,简称VFL)创建约束. 在第三篇文章中,我们仅仅创建了4个视图,就需要创建将近20个NSLayoutConstraint实例,而且每次创建NSLayoutConstraint实例时都需要传入7个参数

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

原文:http://www.cocoachina.com/ios/20141209/10549.html 本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormat

iOS,自动布局autoresizing和auto layout,VFL语言

1.使用autoresizing 2.使用autolayout 3.VFL语言(Visual Format Language:可视化格式语言) 使用autoresizing 点击xib文件,去掉使用autolayout(autolayout和只能使用一个)    如图中所示 1.代表视图距离父容器顶部距离固定 2.代表视图距离父容器左边距离固定 3.代表视图距离父容器底部距离固定 4.代表视图距离父容器右边距离固定 5.中间水平线表示视图随着父容器变宽而变宽(按比例) 6.中间垂直线表示视图随着

VFL 可视化格式语言自动布局基础

水平或垂直 H:    V:  V:[view1]-15-[view2] 设置view2的顶部距离view1的底部15距离 视图 [item]  [view1]               匹配与字典里的key为view1的视图实例 父视图 |   H:|[view1]| view1的宽度等于父视图的宽度 关系  == <= >= H:[view1]-(>=20)-[view2] view1的右边距离view2的左边的距离最小为20 度量 metric H:[view1(<=som