上篇文章向大家介绍了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. 盒子模型,top和margin-top

    1. 标准盒子模型: width只是内容的宽度. 元素的总宽度=width + padding*2 +border*2 +margin*2. IE盒子模型: width=内容的宽度 + padding ...

  2. 什么 是JUnit?

    JUnit详解: http://www.cnblogs.com/eggbucket/archive/2012/02/02/2335697.html

  3. phpcms标签用法(转)

    1.显示指定catid的栏目名称和链接 {$CATEGORYS[25]['catname']}  {$CATEGORYS[25]['url']} 获取父栏目id/获取父栏目名称  $CATEGORY[ ...

  4. DIV水平 垂直居中CSS

    /*实现一.原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度 ...

  5. 语义分割:使用关系图辅助图像分割-Capsule Network、IceNet

    文章:欲取代CNN的Capsule Network究竟是什么来头?它能为AI界带来革命性转折么? 文章:用于分类.检测和分割的移动网络 MobileNetV2 网络 文章:后RCNN时代的物体检测及分 ...

  6. MySQL(四)DQL语言——条件查询

    摘要:条件查询:条件表达式,逻辑表达式,模糊查询,like,通配符,转义字符,escape关键字,between and,in,is null,is not null,安全等于. 条件查询语法: SE ...

  7. MFC_2.9 使用变参函数

    使用变参函数 #include <stdio.h>​// 包含一个头文件,提供不定参数的宏#include <stdarg.h>​// 用于输出不定数量的整数值void pri ...

  8. 解决vue项目运行过程中,npm run dev 报错问题

    [方案1] 错误如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev: `webpack-dev-server ...

  9. 以gnome-terminal为例,修改gnome3 的默认配置

    gnome连续几个版本的terminal默认配置文件都是同一个配置文件“b1dcc9dd-5262-4d8d-a863-c897e6d979b9”.这是因为gnome的developers编辑了这个配 ...

  10. Spring核心技术(三)——Spring的依赖及其注入(续)

    本文将继续前文,针对依赖注入的细节进行描述 依赖注入细节 如前文所述,开发者可以通过定义Bean的依赖的来引用其他的Bean或者是一些值的,Spring基于XML的配置元数据通过支持一些子元素< ...