新書推薦:
《
如何打造成功的商业赛事
》
售價:HK$
91.9
《
万千教育学前·透视学前儿童的发展:解析幼儿教师常问的那些问题
》
售價:HK$
59.8
《
慈悲与玫瑰
》
售價:HK$
89.7
《
启蒙的辩证:哲学的片简(法兰克福学派哲学经典,批判理论重要文本)
》
售價:HK$
78.2
《
心跳重置
》
售價:HK$
60.7
《
云中记
》
售價:HK$
78.2
《
中国古代妇女生活(中国古代生活丛书)
》
售價:HK$
48.3
《
你的认知正在阻碍你
》
售價:HK$
66.7
內容簡介:
Auto Layout改变了创建iOS用户界面的方式。它既灵活又强大,给予你对iOS用户界面前所未有的控制,但AutoLayout的难度也是众人皆知的。在《iOS Auto Layout开发秘籍第2版》中,享誉世界的iOS开发者和图书作者Erica Sadun为你揭开了迷雾,帮助你通过“示例讲解”这种最简单的方法来精通Auto Layout。
针对iOS 7和Xcode 5的完全更新,本书秉承了该系列的优良传统:清晰的解释、专业的提示、可靠的最佳实践——以及,最重要的一点,大量可学习和复用的代码。
Sadun采用循序渐进的方式解释了Auto Layout的思想、它的工作原理、适用范围,以及比预想更有用更简单的原因。Sadun为现实世界的各种iOS开发挑战提供了实际的解决方案,使用Auto Layout创建可交互的元素、动画等。
主要内容
◆ 掌握Auto Layout的基本概念、技术和方法
◆ 定义无歧义的、可满足的约束,这种约束能准确表达你的布局意图
◆ 克服Interface Builder中基于约束的用户界面设计的障碍
◆ 使用视觉格式表示项是如何垂直和水平布局的
◆ 使用度量字典和布局选项使视觉格式更灵活
◆ 调试约束,解密那些令人费解的Xcode日志信息
◆ 使用描述性技术揭示和表达设计中的自然关系
◆ 在Mac OS X 应用中使用iOS AutoLayout技术
關於作者:
Erica Sadun是数十本畅销书的作者、合著者和供稿者,范围涉及编程、数字视频、数字摄影、Web设计和其他技术主题。她最近的著作,包括The Core iOS 6 Developer''s Cookbook 、Talking to Siri 和iOS Drawing:Practical UIKit Solutions 。作为享誉世界的一名iOS开发者,她还开发了数十款iOS原生应用。Sadun拥有佐治亚理工学院计算机科学专业的博士学位。
目錄 :
目 录
第1章 Auto Layout介绍1
1.1 Auto Layout的由来1
1.2 使用Auto Layout的好处2
1.2.1 几何关系3
1.2.2 内容驱动的布局5
1.2.3 优先级规则5
1.2.4 检查和模块化5
1.2.5 与Autosizing兼容6
1.3 约束6
1.3.1 可满足性7
1.3.2 充分性8
1.4 约束属性10
1.5 关于那些丢失的视图11
1.5.1 欠约束导致丢失视图11
1.5.2 规则不一致导致丢失视图12
1.5.3 追踪丢失的视图13
1.6 有歧义的布局13
1.6.1 纠正有歧义的布局14
1.6.2 可视化约束15
1.7 内在内容大小16
1.8 压缩阻力和内容吸附17
1.9 图像装饰元素20
1.9.1 对齐矩形20
1.9.2 可视化对齐矩形20
1.9.3 对齐inset21
1.9.4 声明对齐矩形23
1.9.5 实现对齐矩形24
1.10 练习26
1.11 小结27
第2章 约束29
2.1 约束类型29
2.2 优先级31
2.2.1 冲突的优先级31
2.2.2 枚举型优先级32
2.3 内容大小约束33
2.3.1 内在内容大小33
2.3.2 内容吸附34
2.3.3 压缩阻力35
2.3.4 通过代码设置内容大小约束36
2.3.5 在IB中设置内容大小约束37
2.4 构建布局约束38
2.5 布局约束类39
2.5.1 约束数学39
2.5.2 第一项和第二项40
2.6 创建布局约束41
2.6.1 构建NSLayoutConstraint实例41
2.6.2 一元约束42
2.6.3 不含视图项的约束是不合法的43
2.7 视图项43
2.8 约束、层次结构与边界系统44
2.9 安装约束46
2.10 比较约束50
2.11 布局约束法则52
2.12 练习54
2.13 小结55
第3章 Interface Builder布局57
3.1 在IB中设计57
3.2 禁用Auto Layout58
3.2.1 在代码中退出Auto Layout59
3.2.2 结合Autosizing和Auto Layout60
3.3 基本布局以及自动生成的约束60
3.3.1 推测的约束61
3.3.2 歧义消除约束62
3.3.3 尺寸约束63
3.4 IB元素指南64
3.4.1 约束列表69
3.4.2 Xcode标签70
3.4.3 添加Xcode标识71
3.5 添加约束72
3.5.1 拖曳73
3.5.2 钉固和对齐75
3.6 预览布局76
3.7 检查约束79
3.8 视图的Size Inspector80
3.8.1 框架矩形和布局矩形80
3.8.2 其他Size Inspector项81
3.9 处理菜单82
3.9.1 更新框架和约束82
3.9.2 添加和重置约束82
3.9.3 清理约束82
3.10 约束尺寸调整弹出菜单83
3.10.1 Descendants选项83
3.10.2 Siblings and Ancestors选项84
3.11 视图丢失问题84
3.12 平衡请求86
3.13 混合布局88
3.13.1 创建一个用于测试的nib文件88
3.13.2 在代码中加入nib文件89
3.13.3 混合布局的优点91
3.14 移除IB生成的约束92
3.15 练习92
3.16 小结95
第4章 可视化格式97
4.1 可视化格式约束介绍97
4.2 选项99
4.2.1 对齐100
4.2.2 省略选项100
4.3 变量绑定100
4.3.1 间接的问题101
4.3.2 间接的替代方案101
4.4 度量102
4.5 格式字符串结构103
4.6 方向104
4.7 视图名称104
4.8 连接105
4.8.1 空连接105
4.8.2 标准间隔106
4.8.3 数字间隔107
4.8.4 引用父视图107
4.8.5 与父视图的间隔107
4.8.6 灵活间隔108
4.8.7 圆括号109
4.8.8 负数109
4.8.9 优先级110
4.8.10 多视图110
4.9 视图尺寸111
4.10 格式字符串部件113
4.11 出错115
4.12 NSLog和可视化格式115
4.13 约束到父视图116
4.14 视图拉伸117
4.15 约束尺寸118
4.16 创建列或者行119
4.17 匹配尺寸120
4.18 为何不能分布视图121
4.18.1 伪分布视图第1部分:等中心121
4.18.2 伪分布视图第2部分:间隔视图124
4.19 练习126
4.20 小结127
第5章 调试约束129
5.1 Xcode反馈129
5.1.1 开发反馈129
5.1.2 编译器反馈130
5.1.3 运行时130
5.2 阅读控制台日志131
5.2.1 示例:自动尺寸调整问题131
5.2.2 解决方案:关闭自动尺寸调整转换132
5.2.3 示例:Auto Layout冲突133
5.2.4 解决方案:调整优先级134
5.2.5 原子法134
5.2.6 平衡法134
5.2.7 追踪歧义135
5.3 检查约束日志135
5.3.1 示例:对齐约束136
5.3.2 示例:标准间隔136
5.3.3 示例:基于等式的约束136
5.3.4 示例:复杂等式137
5.3.5 示例:乘数和常数138
5.4 布局数学中的一个注意点138
5.5 约束等式字符串139
5.6 添加名称142
5.6.1 使用名称标签142
5.6.2 命名视图143
5.7 描述视图144
5.8 示例:意外的填充146
5.9 示例:图像吸附147
5.10 示例:视图居中148
5.11 向下遍历报告151
5.12 示例:歧义152
5.13 示例:控制台输出的扩展153
5.14 可视化约束155
5.15 启动参数156
5.16 国际化158
5.16.1 加倍的字符串iOSOS X158
5.16.2 翻转界面OS X159
5.16.3 翻转界面iOS160
5.17 概要分析Cocoa布局162
5.18 调试中的Auto Layout规则163
5.19 练习163
5.20 小结164
第6章 使用Auto Layout创建165
6.1 Auto Layout的基本原则165
6.2 布局库166
6.3 界面设计170
6.4 模块化创建171
6.5 更新约束173
6.5.1 调用更新并以动画形式显示变化174
6.5.2 以动画形式显示OS X上的约束变化175
6.5.3 渐褪变化175
6.6 边缘条件设计176
6.7 创建一个视图抽屉179
6.7.1 创建抽屉布局181
6.7.2 管理被拖曳视图的布局184
6.7.3 被拖曳的视图184
6.8 窗口边界186
6.9 练习188
6.10 小结188
第7章 布局解决方案191
7.1 表单元格191
7.2 保存图像纵横比195
7.3 等宽尺寸197
7.4 滚动视图198
7.4.1 滚动视图和纯Auto Layout199
7.4.2 混合解决方案199
7.4.3 创建一个分页式图片滚动视图200
7.5 居中视图组203
7.6 自定义乘数和随机位置204
7.7 创建栅格207
7.8 为键盘留出空间209
7.9 在运行时插入视图211
7.10 运动效果、动态文本和容器213
7.11 练习214
7.12 小结214
附录A 练习参考答案215
內容試閱 :
Auto Layout自动布局颠覆了开发人员创建用户界面的方式。它提供了一种灵活而强大的系统,该系统可以描述视图与其内容相互之间的关系,也可以描述视图及其内容与父视图之间的关系。与原来的设计方法相比,这一技术具有令人难以置信的布局控制能力,其自定义范围比采用frame、spring和strut所能获得的范围更广。
Auto Layout既有忠实的用户群,也有激烈的反对者。有人说它不好用、挫败感强,尤其是通过Interface BuilderIB使用时更是如此。这种说法有时候并不是空穴来风。虽然Xcode 5大大改善了这种情况去掉了一些让人一头雾水、晕头转向的功能,但这一技术仍然有待不断发展,直至完全成熟。
Auto Layout是一种神奇的工具,它做到了使用先前技术的人做梦都想不到的事情。从处理边界情况edge case到创建视图之间的相互关系,Auto Layout无所不能。此外,Auto Layout与苹果公司的许多优秀的应用编程接口API兼容,包括动画animation、动画效果motion effect和精灵sprite。
基于此,本书应运而生。本书将通过示例来介绍Auto Layout的使用技巧,这些示例中会包含大量解释和提示。你不必再让类文档折磨得死去活来。相反,本书只用了几个简单的步骤,就讲明白了这一系统的工作原理、如何对它进行调整使其发挥更大的作用,以及为什么Auto Layout的功能强大得超乎想象。本书将提供一些常用的设计方案和最佳实践经验,使Auto Layout的使用成为一种享受,而不是苦差事。
1.1 Auto Layout的由来
2012年,Auto Layout作为iOS 6版本的一部分,首次在iOS中露面。大约一年前的OS X 10.7 Lion中也有它的身影。Auto Layout旨在取代原来基于spring和strut的Autosizing系统,它是一种全新的系统,用来构建视图之间的关系,指定视图与其父视图之间以及视图与视图之间的关系。
Auto Layout的前身是Cassowary约束解析工具包。Cassowary是华盛顿大学的Greg J. Badros 和Alan Borning为解决用户界面布局问题而开发的。Cassowary
SourceForge项目的网页http:sourceforge.netpcassowarywikiHome上对它的解释如下:
Cassowary是一种递增式约束解析工具包,它能有效地解析线性等式系统和线性不等式系统。约束可能是需求,也可能是偏好。该工具包能快速地重新解析系统,并且支持UI应用程序。
Cassowary是围绕这样一个重要的界面现象开发的:用户界面中生来就会出现不等关系和相等关系。Cassowary开发了一种基于规则的系统,使开发人员能够描述视图之间的关系。这些关系是通过约束来描述的。约束是指一些规则,这些规则指出了一个视图相对于另一个视图的位置。例如,有些约束要求一个视图仅占据屏幕的左半边,也有些约束要求两个视图的底部始终对齐。
Cassowary提供了一种自动解析工具,将基于其约束系统的布局规则对于数学达人来说,这些规则本质上就是一个联立线性方程组转换成表达那些规则的视图几何特征。Cassowary的约束系统功能强大而微妙。自从它首次亮相以来,已经移植到了JavaScript、.NETJava、Python、Smalltalk和C++中,并且通过Auto Layout移植到了Cocoa和Cocoa Touch中。
在iOS和OS X中,带约束功能的Auto Layout能够将视图在界面中进行有效的摆放。无论是通过IB还是通过代码提供规则,Auto Layout系统都会将这些规则转换成视图框架。
1.2 使用Auto Layout的好处
有些开发人员不愿意使用Auto Layout,原因有很多。有人觉得它太新奇、太古怪,有人觉得用它更新界面还需要做一些额外的工作,嫌麻烦。但是我认为这个工具值得使用。Auto Layout在视图布局方面取得了重大突破,该系统有一些奇妙、新鲜和新颖之处。苹果公司的布局功能会使你的生活更轻松,界面更统一。此外,苹果公司还在Auto Layout中免费添加了与分辨率无关的布局。不管设备的几何形状、方向以及窗口大小如何,都能实现这一切布局功能。
Auto Layout的工作原理是通过创建屏幕上的对象之间的关系来实现布局。它指定运行系统如何自动摆放视图,其结果是产生一组适合屏幕和窗口几何形状的健壮规则。使用Auto Layout,可以描述一些约束,用来指定视图之间的关系;也可以设置一些视图属性,用来描述视图与其内容之间的关系。通过Auto Layout可以进行类似如下的请求:
● 将一个视图的尺寸与另一个视图的尺寸匹配,使两个视图始终保持相同的宽度。
● 无论父视图的形状如何改变,都将一个视图或者一组视图相对于父视图居中。
● 摆放一行视图时将几个视图的底部对齐。
● 将两个视图偏移一定的距离例如,在两个视图之间添加标准的8点补白空间。
● 将一个视图的底部与另一个视图的顶部绑定,使得移动一个视图时,两个视图一起移动。
● 防止图像视图在按自然大小看不到完整内容时收缩成一个点即不压缩或剪切视图的内容。
● 显示按钮时文本四周不要有太多的补白。
上述列表中的前5项描述了定义视图几何特征与布局的约束,建立了视图之间的可视化关系。后两项建立了视图与其呈现的内容之间的关系。使用Auto Layout时,这两种情况都会涉及。
下面是使用Auto Layout进行开发的一些优势。
1.2.1 几何关系
建立关系是Auto Layout的强项。图1-1显示了一个完全用Auto Layout构建的自定义iOS控件。用户可以用这个选择器选择颜色。每支画笔由一个尺寸固定的笔尖视图直接放在一个可伸缩的笔杆底视图上方构成。当用户进行选择时,两个视图一起上下移动来指示其当前选择。Auto Layout约束确保每个笔尖恰好位于其笔杆的上方,每支画笔与其他画笔大小一致,并且每一对笔尖视图和笔杆底视图组成的画笔排成一行,底部对齐。
这里的画笔选择器是通过代码构建的。也就是说,有一个数据源提供了画笔的支数和每个笔尖的艺术特征。Auto Layout通过描述画笔之间的关系,简化了扩展该控件的过程。你只需要指出“将每支新画笔放在右边,宽度与现有画笔一样,底部对齐”,即可将此选择器由10支画笔增加到11支、12支,或者更多支。最重要的是,约束的变化可以制作成动画。当改变约束偏移量,使笔杆的长度发生变化时,笔尖会随之上下活动。
下面的代码说明了我在自己的项目中摆放这些画笔的方式:
This sample extensively uses custom macros to minimize the repetition and wordiness of this code, while giving a sense of the design choices and layout vocabulary offered by Auto Layout.
Read more about similar custom macros in Chapter 6.
- void layoutPicker
{
for int i = 0; i
segmentCount; i++
{
Add base
UIImageView *base =
[[UIImageView alloc] initWithImage:baseArt];
base.tag = i + 1;
[self addSubview:base];
PREPCONSTRAINTSbase;
Load tip
UIImageView *tip =
[[UIImageView alloc] initWithImage:
segmentArt[@i]];
tip.tag = i + 1001;
[self addSubview:tip];
PREPCONSTRAINTStip;
Constrain tips on
top of base
CONSTRAIN_VIEWS@"V:[tip][base]|", tip, base;
Left align tip and
base
ALIGN_LEFTtip, base;
Tips and base have
same width so
match the tip width
to the base width
MATCH_WIDTHtip,
base;
}
Set up leftmost base
UIView *view1 = [self
viewWithTag:1];
ALIGN_LEFTview1, 0;
Line up the bases
for int i = 2; i =
segmentCount; i++
{
Each base to the
right of the previous one
UIView *view1 = [self
viewWithTag:i-1];
UIView *view2 = [self
viewWithTag:i];
CONSTRAIN_VIEWS@"H:[view1][view2]", view1, view2;
}
for int i = 1; i =
segmentCount; i++
{
Create base height
constraint so the
base''s height the
pencil without the tip is
fixed to the value
of baseHeight
UIImageView *base =
UIImageView *[self viewWithTag:i];
baseHeight =
base.image.size.height;
CONSTRAIN_HEIGHTbase,
baseHeight;
Create tip size
constraints fixing the
tip''s width and
height to these values
UIImageView *tip =
UIImageView *[self viewWithTag:i + 1000];
CONSTRAIN_WIDTHtip,
targetWidth;
CONSTRAIN_HEIGHTtip,
targetHeight;
}
}