VFL演示样例
上篇文章向大家介绍了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演示样例的更多相关文章
- JDBC连接MySQL数据库及演示样例
JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识 JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...
- java 覆盖hashCode()深入探讨 代码演示样例
java 翻盖hashCode()深入探讨 代码演示样例 package org.rui.collection2.hashcode; /** * 覆盖hashcode * 设计HashCode时最重要 ...
- 模式识别 - 处理多演示样例学习(MIL)特征(matlab)
处理多演示样例学习(MIL)特征(matlab) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27206325 多演示样例学习( ...
- java并行调度框架封装及演示样例
參考资料: 阿里巴巴开源项目 CobarClient 源代码实现. 分享作者:闫建忠 分享时间:2014年5月7日 ---------------------------------------- ...
- Java连接redis的使用演示样例
Java连接redis的使用演示样例 Redis是开源的key-value存储工具,redis通经常使用来存储结构化的数据,由于redis的key能够包括String.hash.listset和sor ...
- Introspector(内省)简单演示样例 与 简单应用
简单演示样例: package com.asdfLeftHand.test; import java.beans.BeanDescriptor; import java.beans.BeanInfo; ...
- libcurl使用演示样例
简要说明:C++使用libcurl訪问"www.baidu.com".获取返回码和打印出http文件 /* * @ libcurl使用演示样例 * @ 2014.04.29 * @ ...
- 构造Scala开发环境并创建ApiDemos演示样例项目
从2011年開始写Android ApiDemos 以来.Android的版本号也更新了非常多,眼下的版本号已经是4.04. ApiDemos中的样例也添加了不少,有必要更新Android ApiDe ...
- OpenCV LDA(Linnear Discriminant analysis)类的使用---OpenCV LDA演示样例
1.OpenCV中LDA类的声明 //contrib.hpp class CV_EXPORTS LDA { public: // Initializes a LDA with num_componen ...
随机推荐
- 盒子模型,top和margin-top
1. 标准盒子模型: width只是内容的宽度. 元素的总宽度=width + padding*2 +border*2 +margin*2. IE盒子模型: width=内容的宽度 + padding ...
- 什么 是JUnit?
JUnit详解: http://www.cnblogs.com/eggbucket/archive/2012/02/02/2335697.html
- phpcms标签用法(转)
1.显示指定catid的栏目名称和链接 {$CATEGORYS[25]['catname']} {$CATEGORYS[25]['url']} 获取父栏目id/获取父栏目名称 $CATEGORY[ ...
- DIV水平 垂直居中CSS
/*实现一.原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度 ...
- 语义分割:使用关系图辅助图像分割-Capsule Network、IceNet
文章:欲取代CNN的Capsule Network究竟是什么来头?它能为AI界带来革命性转折么? 文章:用于分类.检测和分割的移动网络 MobileNetV2 网络 文章:后RCNN时代的物体检测及分 ...
- MySQL(四)DQL语言——条件查询
摘要:条件查询:条件表达式,逻辑表达式,模糊查询,like,通配符,转义字符,escape关键字,between and,in,is null,is not null,安全等于. 条件查询语法: SE ...
- MFC_2.9 使用变参函数
使用变参函数 #include <stdio.h>// 包含一个头文件,提供不定参数的宏#include <stdarg.h>// 用于输出不定数量的整数值void pri ...
- 解决vue项目运行过程中,npm run dev 报错问题
[方案1] 错误如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev: `webpack-dev-server ...
- 以gnome-terminal为例,修改gnome3 的默认配置
gnome连续几个版本的terminal默认配置文件都是同一个配置文件“b1dcc9dd-5262-4d8d-a863-c897e6d979b9”.这是因为gnome的developers编辑了这个配 ...
- Spring核心技术(三)——Spring的依赖及其注入(续)
本文将继续前文,针对依赖注入的细节进行描述 依赖注入细节 如前文所述,开发者可以通过定义Bean的依赖的来引用其他的Bean或者是一些值的,Spring基于XML的配置元数据通过支持一些子元素< ...