(八十八)VFL语言初步 - 实现布局
【基本的语法】
VFL的语法为H:和V:开头。代表水平和垂直。
接下来假设要涉及距离。使用|-x-,x为距离的点数。
对于视图。用[ ]包围,比如[blueView]。
①以下的语句实现了blueView水平方向左右各距离控制器的边缘20点:
H:|-20-[blueView]-20|
②假设要指定宽高,在视图名称之后用圆括号内填入常量数值,以下的代码实现了blueView距离左边20点,宽度固定为120点:
H:|-20-[blueView(20)]
③假设要指定相等关系,比如redView的宽度和blueView相等,则在开头为H:的条件下写[redView(==blueView)]。
④假设出现乘除计算,不能使用VFL,这时候应该使用NSLayoutConstraint的constraintWithItem:::::方法,计算公式为firstItem.x = (secondItem.x + constant) * multiplier,x为attribute指定的计算量。注意这个约束应该被加入到他们公共的父节点上。
【实现方法】
使用constraintsWithVisualFormat::::方法:
/** Format: VFL语句 options:对齐方式 metrics:VFL用到的变量 views:VFL用到的视图 */ + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
①假设不须要对齐,options填入0。
②views为在VFL中相应实际View的根据,比如@{@"redView":self.redView},当VFL中出现redView时。系统会通过views字典查找到self.redView,从而实现改动self.redView的尺寸。
③metrics为VFL中使用的变量。对于多次出现的值。能够用一个变量取代,然后在metrics中指定变量的值。
【实例】
以下的代码实现了blueView距离控制器View边缘左、中、右各20点,redView在blueView下20点,右对齐。宽度为blueView的一半。
须要注意的是禁用AutoResizing。
- (void)viewDidLoad { [super viewDidLoad]; UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; blueView.translatesAutoresizingMaskIntoConstraints = NO; redView.translatesAutoresizingMaskIntoConstraints = NO; NSArray *blueViewHori = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}]; [self.view addConstraints:blueViewHori]; NSArray *blueRedVerti = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}]; [self.view addConstraints:blueRedVerti]; NSLayoutConstraint *redViewWidthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0]; [self.view addConstraint:redViewWidthConstraint]; }
相关文章
- 为什么 C 语言屹立不倒?
- 《Go语言实战》摘录:6.2 并发 - goroutine
- 基于Thrift实现跨语言服务
- Bitmap 多语言实现及应用
- R语言作为BI中ETL的工具
- product text的language dropdown list里 没有对应语言的问题
- cordova多语言实现相关
- Algorithm:C++语言实现之链表相关算法(链表相加、链表的部分翻转、链表划分、链表去重、重复元素全部删除)
- Python之matplotlib:基于matplotlib库利用python语言实现一张画布显示多张图的多种方法
- Python语言学习之特殊符号讲解:百分号%/点/双点/反斜杠(转义符)/单斜杠/双斜杠/用法(如去掉中括号)之详细攻略
- tn文本分析语言(二) 基本语法
- tn文本分析语言(四) 实现自然语言计算器
- c语言单链表倒置(附原理讲解)
- c语言实现tree数据结构
- Go语言自学系列 | golang通过接口实现OCP设计原则
- Go语言自学系列 | 汇总
- 不同语言、不同平台可以通信吗?JSON做序列化会粘包吗?附粘包处理
- C/C++语言使用技巧(三十三):强大的数学计算库gsl与算法实现
- LabVIEW能否像C语言一样
- 最小值滤波 (C 语言实现)
- c语言中的位移位操作
- 学习 C++,关键是要理解概念,而不应过于深究语言的技术细节
- 我的Go+语言初体验——(2)IDE 详细安装教程
- 【一起学Java-第三篇】Java语言基础
- 【软考-软件设计师】程序设计语言基础知识框架