文档章节

IOS AutoLayout 代码实现约束—VFL

Carson6931
 Carson6931
发布于 2014/12/22 19:05
字数 979
阅读 3483
收藏 2

IOS 提供了两种添加约束的方法

第一种:

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

第二种:

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

第一种方法返回的是一个约束对象,也就是一条约束。看参数也比较好理解,就是在view1与view2之间设定一条约束,但往往一个控件需要好几条约束来约束,加上如此长的方法,所以导致一个控件就需要大量的代码来实现约束。

第二种方法返回的是array,包含的是一组约束,所以一般一个控件,调用两次第二种方法就能实现约束。所以这种方法更加的简洁,但是这种方法用到的是一种描述性语言,有点不好理解,下面就来简单介绍下第二种方法的用法

先对这些参数进行说明

(NSDictionary*)views:表示这组约束所涉及到的相关子view,比如一个界面上有    A、B两个控件,这组约束涉及到了这两个控件,那么就以字典类型将A、B控件设为参数views,可以用

NSDictionaryOfVariableBindings(A, B) 等效于 [NSDictionary dictionaryWithObjectsAndKeys:A @“A”, B, @“B'', nil];

(NSDictionary*)metrics:对于一些特定的宽、高,我们可以直接存放在字典中,这样在描述性语言中就可以直接用键来描述宽高。如:

NSDictionary *metrics = @{@"buttonWidth":@200.0};

(NSLayoutFormatOptions) opts:见枚举类型,解释部分,常用的就这些

NSLayoutFormatAlignAllLeft//控件之间左对齐
NSLayoutFormatAlignAllRight//控件之间右对齐
NSLayoutFormatAlignAllTop//...上对齐
NSLayoutFormatAlignAllBottom//...下对齐
NSLayoutFormatAlignAllLeading // 使所有视图根据当前区域文字开始的边缘对齐(英语:左边,希伯来语:右边)
NSLayoutFormatAlignAllTrailing // 使所有视图根据当前区域文字结束的边缘对齐(英语:右边,希伯来语:左边)。
NSLayoutFormatAlignAllCenterX // 使所有视图通过设置中心点的 X 值彼此相等来对齐。

(NSString*)format 这就是核心VFL语句了,举例说明

|-[view]-|//view与superview的左右边界为标准间距
|-[view]//view与superview的左边界为标准间距,右边不处理
|[view]//view与superview的左边界对齐,右边不处理
|-20.0-[view]-30.0f-|//view与superview的左边边界间距分别为20,和30
[view(100.0)]//view宽度为100
|-[button1(button2)]-[button2]-| //button1与button2等宽,之间为标准间距.....
V:|-20.0-[view(30.0)] //view距顶部边界20,自身高度为30.0

 下面简单的讲个例子吧,要实现的效果如下图

 labelOne 宽高都不限制,与顶部高度30、与bgview左边界30、与右边imageview间距30

labelTwo与labelOne间距最小为0,且两者左对齐,labelTwo与底部边界也为30

imageview宽高都为150,与button的间距至少30

button与底部间距30,与iamgeview左右对齐

bgView 与superview左右对齐、上对齐

为了实现上述效果,我们只需要先初始化这些控件,但在autolayout中不需要用alloc来初始化,而且要关掉autoresizing constraints

    UIView *view = [self new];
    view.translatesAutoresizingMaskIntoConstraints = NO;

所有约束如下

    // Layout
    
    NSDictionary *views = NSDictionaryOfVariableBindings(bgView,labelOne,labelTwo,imageView,button);
    NSDictionary *metrics = @{@"imageEdge":@150.0,@"padding":@30.0};//设置一些常量
    
    //设置bgView与superview左右对齐
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[bgView]|" options:0 metrics:metrics views:views]];
    
    // 设置bgView与superview 上边界对齐
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[bgView]" options:0 metrics:metrics views:views]];
    
    // labelOne与imageview 的水平约束
    [bgView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-padding-[labelOne]-padding-[imageView(imageEdge)]-padding-|" options:0 metrics:metrics views:views]];
    
    // labelOne与labelTwo的竖直约束
    [bgView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-padding-[labelOne]->=0-[labelTwo]-padding-|" options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];
    
    //imageView与button的数直约束
    [bgView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-padding-[imageView(imageEdge)]->=padding-[button]-padding-|" options:NSLayoutFormatAlignAllLeft|NSLayoutFormatAlignAllRight  metrics:metrics views:views]];

通过这些约束就能实现上述效果。



© 著作权归作者所有

Carson6931
粉丝 17
博文 9
码字总数 7471
作品 0
徐汇
程序员
私信 提问
加载中

评论(2)

Carson6931
Carson6931 博主

引用来自“愤怒的小牛”的评论

好牛逼的样子啊!八块腹肌的程序猿!65
只剩一块了
愤怒的小牛
愤怒的小牛
好牛逼的样子啊!八块腹肌的程序猿!65
SegmentFault D-Day 2015 北京:iOS 站

SegmentFault D-Day 介绍 SegmentFault D-Day,是由国内最前沿的开发者社区 SegmentFault 主办的技术沙⻰,于2014年正式启动。2015年上半年D-Day已在北、上、广、深、杭等城市成功举办9场,活...

文洁洁洁
2015/11/26
245
0
SegmentFault D-Day 2015 北京:iOS 站

SegmentFault D-Day 介绍 SegmentFault D-Day,是由国内最前沿的开发者社区 SegmentFault 主办的技术沙⻰,于2014年正式启动。2015年上半年D-Day已在北、上、广、深、杭等城市成功举办9场,活...

文洁洁洁
2015/11/26
13
0
在Swift中使用AutoLayout-VFL(AutoLayout-VFL笔记)

1.背景 iOS开发这几年, UI布局工具从frame到Masonry到SnapKit, sb和xib的AutoLayout也用过, 但是代码版本的AutoLayout倒是没用过, 最近一年, 频频发现一些三方UI组件布局的bug, 作为三方组件...

walden00
2018/07/27
0
0
iOS常用的三方库

UI相关:(转载http://www.jianshu.com/p/be0401e35e06) 上拉下拉刷新控件: 链接:MJRefresh 动态启动图: 链接:YFStartView MBProgressHUD: 链接:MBProgressHUD 一个效果很好的弹出下拉框:...

oschina6k
2016/05/11
429
1
ios8 iOS Auto Layout

引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Auto Layout是一...

AK_47
2014/10/31
2.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部