iOS开发之Auto Layout入门(转)
随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享。
什么是Auto Layout?
Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应。
为什么要用Auto Layout?
Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题。
在iPhone4时代开发者只需要适配一种屏幕尺寸,相比与Android阵营的相对布局,iOS开发者们最长用的做法是使用绝对布局,坐标和大小只要写死就ok了。随后iPhone5出了,对于两种屏幕尺寸,就需要考虑一个新的问题,屏幕适配。苹果其实很早就考虑到了这一点Autoresizing技术,诚然Autoresizing有所不足,苹果在iOS6发布后引入了Autolayout特性,适应更广泛场景下的布局需求。当然了iPhone5由于和iPhone4在屏幕宽度上一致,即便不用上这些技术适配起来也不麻烦(笔者再之前也只用到了Autoresizing),不过在iPhone6即将推出,即将面临更复杂的屏幕适配时,Auto Layout能帮助我们很好地解决这个问题,此外也能解决横屏竖屏切换,iPad的适配问题。
下面是本文事例代码在横竖屏切换下的效果:
如何使用Auto Layout?
Auto Layout的基本概念
Auto Layout的核心是约束(constraint),通过对view的约束(view的大小,view与view之间的关系)使得view能够自己计算出尺寸和坐标。
Visual Format Language,在Auto Layout中使用的形象描述约束的一种语言规则。
Auto Layout的使用还是比较复杂的,一开始用可能会感觉云里雾里的,用的多了习惯VFL的写法之后就会感觉到它的方便了。
在代码中使用Auto Layout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor greenColor];
UIView *viewTopLeft = [[UIView alloc] init];
UIView *viewTopRight = [[UIView alloc] init];
UIView *viewBottom = [[UIView alloc] init];
[viewTopLeft setBackgroundColor:[UIColor blueColor]];
[viewTopRight setBackgroundColor:[UIColor redColor]];
[viewBottom setBackgroundColor:[UIColor blackColor]];
//添加约束之前必须讲view添加到superview里
[self.view addSubview:viewTopRight];
[self.view addSubview:viewTopLeft];
[self.view addSubview:viewBottom];
//对于要使用Auto Layout的控件需要关闭Autoresizing
[viewTopLeft setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewTopRight setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewBottom setTranslatesAutoresizingMaskIntoConstraints:NO];
//使用VFL
#if 1
//dict和metrics相当于vfl中的名称与对象和数值的映射
NSDictionary *dict = NSDictionaryOfVariableBindings(viewTopLeft, viewTopRight, viewBottom);
//相当于这么写 NSDictionary *dict = @[@"viewTopLeft":viewTopLeft, @"viewTopRight":viewTopRight, @"viewBottom",viewBottom];不一定名称要与对象名一致
NSDictionary *metrics = @{@"pad":@10};
//水平关系(H:,可省略如vfl1),"|"相当与superview,"-"是连接符,表示两者间的间距也可以没有表示无间距
//转化正自然语言的描述就是:superview的左边界间隔pad距离是viewTopLeft(宽度与viewTopRight相等)再间隔默认距离是viewTopRight再间隔10的距离是superview的右边界。
NSString *vfl0 = @"H:|-pad-[viewTopLeft(==viewTopRight)]-[viewTopRight]-10-|";
NSString *vfl1 = @"|[viewBottom]|";
//垂直关系(V:)
NSString *vfl2 = @"V:|-[viewTopLeft(==viewBottom)]-[viewBottom]-pad-|";
NSString *vfl3 = @"V:|-[viewTopRight]-[viewBottom]-pad-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl0 options:0 metrics:metrics views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:0 metrics:metrics views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl3 options:0 metrics:metrics views:dict]];
//不使用VFL
#else
//viewTopLeft的leading与其superview的leading(左侧)对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeLeading multiplier:1 constant:-10]];
//viewTopLeft的top与其superview的top对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTop multiplier:1 constant:-10]];
//viewTopRight的top与viewTopLeft的top对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTop multiplier:1 constant:0]];
//viewTopRight的leading与viewTopLeft的trailing(右侧)对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTrailing multiplier:1 constant:10]];
//viewTopRight的trailing与其superview的右侧对其
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];
//viewTopRight的宽与viewTopLeft宽相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
//viewTopRight的高与viewTopLeft高相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopLeft attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:viewTopRight attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
//viewBottom的top与viewTopRight的bottom对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopRight attribute:NSLayoutAttributeBottom multiplier:1 constant:10]];
//viewBottom的bottom与superview的bottom对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-10]];
//viewBottom的leading与viewTopLeft的leading对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeLeading multiplier:1 constant:0]];
//viewBottom的高与viewTopLeft的高相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
//viewBottom的宽与其superview的高相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:-20]];
#endif
//更新约束
[self.view setNeedsUpdateConstraints];
[self.view updateConstraintsIfNeeded];
}
|
iOS开发之Auto Layout入门(转)的更多相关文章
- ios开发之Swift新手入门
1.关于swift和调试,swift在ios7.0才支持,ios8.3系统的真机必需要xcode6.3才干调试.安装xcode6.3需要os x 10.10以上 2.应用程序由Main.storybo ...
- Swift语言Auto Layout入门教程:上篇
原文:Beginning Auto Layout Tutorial in Swift: Part 1/2,译者:@TurtleFromMars 开始用自动布局约束的方式思考吧! 更新记录:该教程由Br ...
- 李洪强iOS开发之iOS工具收集
李洪强iOS开发之iOS工具收集 项目 简述 日期 我是怎么慢慢变懒的 : Jenkins + 蒲公英 使用Jenkins + 蒲公英使得项目打包给测试人员自动化,大大节省了劳动力 2015.04.1 ...
- 李洪强iOS开发之iOS好文章收集
李洪强iOS开发之iOS好文章收集 该文收集朋友们转发或自己的写的技术文章,如果你也有相关的好文章,欢迎留言,当好文章多的时候,我会对这些好文章进行分门别类 文章 简述 日期 直播服务配置 使用 ng ...
- iOS 开发之 GCD 不同场景使用
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- iOS 开发之 GCD 基础
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- iOS开发之Socket通信实战--Request请求数据包编码模块
实际上在iOS很多应用开发中,大部分用的网络通信都是http/https协议,除非有特殊的需求会用到Socket网络协议进行网络数 据传输,这时候在iOS客户端就需要很好的第三方CocoaAsyncS ...
- iOS开发之UISearchBar初探
iOS开发之UISearchBar初探 UISearchBar也是iOS开发常用控件之一,点进去看看里面的属性barStyle.text.placeholder等等.但是这些属性显然不足矣满足我们的开 ...
- iOS开发之UIImage等比缩放
iOS开发之UIImage等比缩放 评论功能真不错 评论开通后,果然有很多人吐槽.谢谢大家的支持和关爱,如果有做的不到的地方,还请海涵.毕竟我一个人的力量是有限的,我会尽自己最大的努力大家准备一些干货 ...
随机推荐
- C++类的复习
1.C++ 类的声明:class class_name{ private: /* *私有的数据和成员函数 *只能被本类中的成员函数引用,类外不能调用 ...
- 7zip File: How to Uncompress 7z files on Ubuntu, Debian, Fedora
转:http://www.thegeekstuff.com/2010/04/7z-7zip-7za-file-compression/ Question: How do I uncompress a ...
- Coherence代理的负载均衡
Coherence在extend模式下,proxy的负载均衡机制官方解释是 Extend client connections are load balanced across proxy servi ...
- SQL注入之导出WebShell
已经听N个人过说有人已经发现SQL注入Access得到webshell的技术了,也只是听说而已,具体的细节还是不得而知. 最近在看的书中一章提到Jet的安全,然后灵光一闪,呵呵,发现了一种可以利用ac ...
- Modify Headers模拟不同地域进行网页测试
今天要简单讲一下Modify Headers这个Firefox插件,记录一下我是怎么使用它的. Modify Headers: https://addons.mozilla.org/zh-CN/fir ...
- meta文件里指定资源
unity的黑科技 https://github.com/keijiro/KinoFringe/tree/master/Assets/Kino 这个包里面 shader的绑定很有意思在meta里面 d ...
- [Android]一些设计细节
1. 图标 图标分为:Launcher 图标(程序图标),ActionBar 图标(菜单图标),Contextual 图标(嵌入的小图标)以及Notification 图标(通知栏图标).每种图标都有 ...
- npm添加淘宝镜像
原文:http://cnodejs.org/topic/4f9904f9407edba21468f31e npm是一个很好用的工具,全场是Node Packet Manager,是一个nodejs的包 ...
- Rails generate的时候不生成assets和test
我们在执行rails g controller controller_name或者rails g model model_name的时候往往会生成相应的assets文件和test,怎么不让rails帮 ...
- FBXImport
using UnityEditor; public class MyEditor : AssetPostprocessor{ public void OnPreprocessModel() { Mod ...