上篇文章向大家介绍了VFL的基本的语法点,假设对下面演示样例不熟的童鞋,能够前去參考。废话不多说。我们直接来看演示样例。

演示样例一

将五个大小同样、颜色不同的view排成一行,view间的间隔为15px,第一个view的间隔与屏幕的左边间隔10px,最后一个view的间隔与屏幕的右边间隔也为10px

//依据屏幕的宽度。计算view的宽度和高度
CGFloat width = ([[UIScreen mainScreen] bounds].size.width-2*10-4*15)/5;
CGFloat height = width; //固定第一个view
UIView *firstView = [UIView new];
firstView.backgroundColor = [UIColor blackColor];
// 将次属性设置为NO,表示将使用AutoLayout的方式来布局
firstView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:firstView]; //------使用VFL为第一个view加入约束------
//在水平方向上,让firstview的左边与父视图的左边间隔10px,且自身宽度为width
NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[firstView(==width)]" options:0 metrics:@{@"width":@(width)} views:NSDictionaryOfVariableBindings(firstView)];
//在垂直方向上,让firstView的上边与父视图的上边间隔100px,且自身的高度为height
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[firstView(==height)]" options:0 metrics:@{@"height":@(height)} views:NSDictionaryOfVariableBindings(firstView)];
[self.view addConstraints:constraints1];
[self.view addConstraints:constraints2]; //定义一个颜色数组
NSArray *colors = @[[UIColor redColor],[UIColor orangeColor],[UIColor yellowColor],[UIColor blueColor]];
//定义一个views数组
NSMutableArray *views = [NSMutableArray array];
[views addObject:firstView];
for (int i = 0; i < 4; i++) {
UIView *view = [UIView new];
view.backgroundColor = colors[i];
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
[views addObject:view];
} //依次给views数组中的view使用vfl加入约束
for (int i = 1; i < views.count; i++) {
UIView *view1 = views[i-1];
UIView *view2 = views[i];
NSDictionary *bindings = NSDictionaryOfVariableBindings(view1,view2);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1]-15-[view2(==width)]" options:0 metrics:@{@"width":[NSNumber numberWithFloat:width]} views:bindings];
[self.view addConstraints:constraints]; }
UIView *view1 = views[0];
for (int i = 0; i < views.count; i++) {
UIView *view2 = views[i];
NSDictionary *bindings = NSDictionaryOfVariableBindings(view1,view2);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view2(==view1)]" options:0 metrics:nil views:bindings];
[self.view addConstraints:constraints]; }

效果截图:


下篇演示样例将会是使用VFL对登录界面进行布局,喜欢我的博客的童鞋能够关注一波!

VFL演示样例的更多相关文章

  1. JDBC连接MySQL数据库及演示样例

    JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识         JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...

  2. java 覆盖hashCode()深入探讨 代码演示样例

    java 翻盖hashCode()深入探讨 代码演示样例 package org.rui.collection2.hashcode; /** * 覆盖hashcode * 设计HashCode时最重要 ...

  3. 模式识别 - 处理多演示样例学习(MIL)特征(matlab)

    处理多演示样例学习(MIL)特征(matlab) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27206325 多演示样例学习( ...

  4. java并行调度框架封装及演示样例

    參考资料:  阿里巴巴开源项目 CobarClient  源代码实现. 分享作者:闫建忠 分享时间:2014年5月7日 ---------------------------------------- ...

  5. Java连接redis的使用演示样例

    Java连接redis的使用演示样例 Redis是开源的key-value存储工具,redis通经常使用来存储结构化的数据,由于redis的key能够包括String.hash.listset和sor ...

  6. Introspector(内省)简单演示样例 与 简单应用

    简单演示样例: package com.asdfLeftHand.test; import java.beans.BeanDescriptor; import java.beans.BeanInfo; ...

  7. libcurl使用演示样例

    简要说明:C++使用libcurl訪问"www.baidu.com".获取返回码和打印出http文件 /* * @ libcurl使用演示样例 * @ 2014.04.29 * @ ...

  8. 构造Scala开发环境并创建ApiDemos演示样例项目

    从2011年開始写Android ApiDemos 以来.Android的版本号也更新了非常多,眼下的版本号已经是4.04. ApiDemos中的样例也添加了不少,有必要更新Android ApiDe ...

  9. OpenCV LDA(Linnear Discriminant analysis)类的使用---OpenCV LDA演示样例

    1.OpenCV中LDA类的声明 //contrib.hpp class CV_EXPORTS LDA { public: // Initializes a LDA with num_componen ...

随机推荐

  1. AndroidStudio3.0 Canary 8注解报错Annotation processors must be explicitly declared now.

    体验最新版AndroidStudio3. Canary 8的时候,发现之前项目的butter knife报错,用到注解的应该都会报错 Error:Execution failed for task ' ...

  2. Probabilistic locking in SQLite

    In SQLite, a reader/writer lock mechanism is required to control the multi-process concurrent access ...

  3. Farseer.net轻量级开源框架 中级篇:执行SQL语句

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 事务的使用 下一篇:Farseer.net轻量级开源框架 中级篇: DbFacto ...

  4. C语言入门100题,考算法的居多

    入门题,考算法的居多,共同学习! 1. 编程,统计在所输入的50个实数中有多少个正数.多少个负数.多少个零. 2. 编程,计算并输出方程X2+Y2=1989的所有整数解. 3. 编程,输入一个10进制 ...

  5. HDU_6016_(Bestcoder round #92 1002)_(dfs)(暴力)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6016 题意:给定男羊和女羊的朋友关系,即给定一个图,问从任意一只羊开始连续数四只不相同的羊的方法数. ...

  6. HFS模板开发

    痉挛模板, 节, 符号 & 变量帮助需要更多帮助 吗?看看 下面这些链接-模板是模型痉挛用于构建 HTML 页面. -它分为几个部分, 每个部分描述最终 HTML 页面的一部分. -此模板必须 ...

  7. Vue指令4:v-on

    监听事件 事件:click\keydown <button v-on:click="greet"></button> 可以简写为  <button @ ...

  8. ThinkPHP---TP功能类之附件下载

    [案例]实现公文中附件下载 (1)修改模板文件showList.html,展示列表文件信息 将数据表中的filename(原始文件名)展示到附件下 <td>{$vol.filename}& ...

  9. 使用Java中Calendar类测试当前年月日

    import java.util.Calendar; public class time { public static void main(String[] args) { Calendar cal ...

  10. Java写时复制CopyOnWriteArrayList

    Copy-On-Write是一种程序设计的优化方法,多线程在不修改对象时可以共享一个对象地址空间,如果某一个线程要求修改对象时,需要首先将原来对象复制一份,在新复制的对象地址空间上修改对象内容,其他线 ...