iOS 布局篇(一)-NSLayoutConstraint的使用和 VFL 语言介绍
来源:互联网 发布:短信猫 java 编辑:程序博客网 时间:2024/06/11 00:24
说起自动布局,现下流行的也有很多种,什么Masonry,sd_autolayout 等等工具,但是这些工具,也是基于原生的 NSLayoutConstraint来写的,所以,很有必要了解一下NSLayoutConstraint这个东西,以及VFL 的基本语法以及规则,才能知道是如何进行代码的自动布局。
用过 xib 的童鞋们应该知道一些自动布局的概念,添加正确的约束,就可以在让界面在不同的尺寸下进行自由的伸缩等等操作,NSLayoutConstraint正是代码约束的意思,在这个开始之前,我们要准备的东西
了解 VFL 语言:
- 1.什么是 VFL 语言:
VFL(Visual Format Language),“可视化格式语言”。
VFL是苹果公司为了简化autolayout的编码而推出的抽象语言 - 2.基本的语法表
举个例子来说
例子1:H:|-20-[_areaBtton(50)]-11-[_userPhoneNum]-20-|
分开讲解:
(1)H:|-20-水平方向的布局是 从屏幕左边起20开始
(2)-[_areaBtton(50)]是areaBtton设定areaBtton 的宽度是50 注意要用[]来讲控件装起来,对于水平方向 控件后面跟着”()”里面设立的值为宽度 如果是”V”(垂直方向)那么”(50)”是代表着高度为50
(3)-11-表示距离下一个控件的的距离为11
(4)-20-| “|”表示屏幕右边表示上一个控件距离屏幕右边为20
(5)-[_userPhoneNum]- 表示 下一个控件为 userPhoneNum
这里不指定宽度也是可以的,你可以在控件初始化的时候就给它设定大小,如果设置代码约束的时候不需要将其大小进行变化就可以省略,系统会将你设定的大小为布局后的大小但是这里 整体设立了距离屏幕右边的距离为20 所以这个userPhoneNum 会根据屏幕的宽度来进行拉伸,例如 iphone 5
的屏幕宽度为320 那么这个 userPhoneNum 的宽度就是 320 - 20 - 20 - 50 - 11 后剩下的宽度
列子2:H:[wideView(>=60@700)]
wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束条件越先被满足)
例子3:V:|-20-[redBox(50)]-20-[yellowBox(==redBox)]`
垂直方向上,20 的位置开始有 redBox高度50,其下方20接一个高度等于redBox高度的yellowBox,然后直接离下面多少不用管,所以好像这个样子
其实 VFL 基本语法还是很好懂的,使用方法后面会有代码讲解,特别是如果约束写的不对的时候,崩溃日志会有个^这种小箭头来表示哪个地方报错了。
好了,VFL 先讲到这里,下面开始说NSLayoutConstraint这个东西
iOS 里面 官方的 Demo
/* Create an array of constraints using an ASCII art-like visual format string. */+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
具体说一下这几个参数
(1)format 就是填写刚刚咱们学习的 VFL 语言,注意,这里是需要将 VFL语言写成字符串传递进去,所以这一步很容易出错,错了也不会有报错提示,需要咱们平日里多加练习与锻炼才能很好的避免一些错误
(2)opts
typedef NS_ENUM(NSInteger, NSLayoutRelation) {NSLayoutRelationLessThanOrEqual = -1, //小于等于NSLayoutRelationEqual = 0, //等于NSLayoutRelationGreaterThanOrEqual = 1, //大于等于};typedef NS_ENUM(NSInteger, NSLayoutAttribute) {NSLayoutAttributeLeft = 1, //左侧NSLayoutAttributeRight, //右侧NSLayoutAttributeTop, //上方NSLayoutAttributeBottom, //下方NSLayoutAttributeLeading, //首部NSLayoutAttributeTrailing, //尾部NSLayoutAttributeWidth, //宽度NSLayoutAttributeHeight, //高度NSLayoutAttributeCenterX, //X轴中心NSLayoutAttributeCenterY, //Y轴中心NSLayoutAttributeBaseline, //文本底标线NSLayoutAttributeNotAnAttribute = 0 //没有属性};NSLayoutAttributeLeft/NSLayoutAttributeRight 和NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右,而leading/trailing在某些从右至左习惯的地区会变成,leading是右边,trailing是左边。
(3)metrics 表示使用到的度量数组,你可以把一些VFL 语言用的值定义在一个字典里面例如创建一个字典
NSDictionary *metres = @{@"leftArglin":@20}
然后在 VFL 语言里面所用到的距离左边位置的距离,可以用leftArglin 来代替,这样的话,改想要修改距离左边的距离,就致用修改字典里面的数值,而不用每个使用到左边距离的地方都意义修改,方便大家,当然这个值可以传 nil
(4)views:就是上面所加入到NSDictionary中的绑定的View,就是需要布局的 view 都需要写入一个字典里面来才可以.
好了,以上就是基本的语法以及准备的事项,那么现在就开始具体的代码吧
Demo
#import "ViewController.h"@interface ViewController ()@property (nonatomic , strong)UIView *redView;@property (nonatomic , strong)UIView *yellowView;@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; ///先将控件添加到视图上 [self.view addSubview:self.redView]; [self.view addSubview:self.yellowView]; ///注意translatesAutoresizingMaskIntoConstraints 一定要设置为 NO self.redView.translatesAutoresizingMaskIntoConstraints = NO; self.yellowView.translatesAutoresizingMaskIntoConstraints = NO; ///创建第四个参数用到布局 views 的字典 注意 这个地方用 NSDictionaryOfVariableBindings NSDictionary *views = NSDictionaryOfVariableBindings(_redView,_yellowView); ///创建第三个参数 所用到的 布局度量 metres 字典 NSDictionary *metres = @{@"redViewnW":@100,@"leftArglin":@50,@"rightArglin":@50}; ///现在开始创建约束 ///水平方向的约束 NSArray *HContrains = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leftArglin-[_redView(redViewnW)]-11-[_yellowView]-rightArglin-|" options:0 metrics:metres views:views]; ///垂直方向的约束 NSArray *VContrains = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[_redView(50)]-20-[_yellowView(==_redView)]" options:0 metrics:metres views:views]; ///注意上面 如果V:|-20-[_redView(50)]-20-[_yellowView(==_redView)] 换成了V:|-20-[_redView(50)]-20-[_yellowView(==_redView)]-| 会把_yellowView拉着顶到父视图的下边,所以如果你写了这个-| 又和_yellowView 高度定死和 距离 _redView 20 起了冲突 所以会报约束异常 ///添加约束 [self.view addConstraints:HContrains]; [self.view addConstraints:VContrains];}#pragma mark - 懒加载两个 view 均未设置大小-(UIView *)redView{ if (!_redView) { _redView = [[UIView alloc]init]; _redView.backgroundColor = [UIColor redColor]; } return _redView;}-(UIView *)yellowView{ if (!_yellowView) { _yellowView = [[UIView alloc]init]; _yellowView.backgroundColor = [UIColor yellowColor]; } return _yellowView;}@end
最后
这里有别人总结的 VFL 使用规则 看起来简洁大方可以参考一下
使用规则:
|: 表示父视图
-:表示距离
V: :表示垂直
H: :表示水平
= :表示视图间距、宽度和高度必须大于或等于某个值
<= :表示视图间距、宽度和高度必须小宇或等于某个值
== :表示视图间距、宽度或者高度必须等于某个值
@ :>=、<=、== 限制 最大为 1000
|-[view]-|: 视图处在父视图的左右边缘内
|-[view] : 视图处在父视图的左边缘
|[view] : 视图和父视图左边对齐
-[view]- : 设置视图的宽度高度
|-30.0-[view]-30.0-|: 表示离父视图 左右间距 30
[view(200.0)] : 表示视图宽度为 200.0
|-[view(view1)]-[view1]-| :表示视图宽度一样,并且在父视图左右边缘内
V:|-[view(50.0)] : 视图高度为 50
V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离
为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。
[wideView(>=60@700)] :视图的宽度为至少为60 不能超过 700
如果没有声明方向默认为 水平 V:
- iOS 布局篇(一)-NSLayoutConstraint的使用和 VFL 语言介绍
- 谈一谈苹果原生的布局框架 NSLayoutConstraint 和 VFL
- IOS autoLayout之使用VFL语言进行代码自动布局
- Objectiv-C UIKit基础 NSLayoutConstraint的使用(VFL实现)
- IOS中NSLayoutConstraint的使用
- iOS 自动布局 VFL
- iOS开发自动布局代码篇NSLayoutConstraint
- swift中NSLayoutConstraint布局的使用
- 自动布局:AutoLayout代码实现:NSLayoutConstraint、VFL、Mansony
- iOS VFL语言的简单实用
- IOS开发-VFL语言
- ios-VFL语言
- iOS界面布局之三——纯代码的autoLayout及布局动画 iOS8及VFL语言
- iOS编程 界面布局 纯代码 VFL编写和添加
- AutoLayout NSLayoutConstraint VFL
- iOS--VFL--autolayout--自动布局
- IOS之VFL使用
- iOS autolayout和VFL
- Java开发中的23种设计模式详解----组合模式(Composite)
- 使用spring mvc Controller中使用@Value无法获取属性值
- Linuxg++编译C++代码出错 -std=c++11 or -std=gnu++11
- 深入java(类)接口默认修饰符问题
- 值得经常逛的一些网站
- iOS 布局篇(一)-NSLayoutConstraint的使用和 VFL 语言介绍
- word search
- 股票市场
- rpm查询安装包命令集合
- scala学习笔记(二)
- Java常用的数据库连接池【c3p0】【dbcp】
- swift public、internal和private 关键字
- CSS font-family常见中文字体对应的英文名称
- 初识API(百度地图API)--------待完成