使用Auto Layout处理比例间距问题
使用Auto Layout处理比例间距问题
Auto Layout 是一个掌握起来很具有挑战性的东西。iOS 9引入的 Stack Views和 layout 锚点有一些帮助,但是明白如何创建特定的 layout仍有一定难度。
在这篇文章中我想着眼于一个经常出现的情形: 你需要沿一个轴向按固定比例放置视图。可能并不是十分明显, 但是这个需求可以通过 一个multiplier中心对齐来轻松实现,它是一种在有无Stack Views情况下都可以使用的技术。
问题
设想我们要构建这样一个布局,上面有两排图片视图,都是基于父视图宽度和高度的某一百分比放置。之所以使用图片视图, 是因为如果意外地把它们拉伸或压缩了, 可以十分明显得看出来。
当视图适应不同的屏幕大小时, layout 会保持相同的比例。下面是同一个视图在横屏模式下的情形:
一旦你看出来我们是基于视图中心进行对齐的,你就会发现我们可以只使用中心对齐约束来创建整个布局。对每个imageView,我们需要一对约束来确定其在X轴和Y轴的位置,一般的格式是这样的:
imageView.CenterX = view.CenterX * modifier
imageView.CenterY = view.CenterY * modifier
modifier参数将imageView放置在父视图尺寸的某个百分比的位置上,如下所示:
寓教于乐。这里有三种方式来创建该布局,第一是使用 IB, 第二是用代码添加约束,第三是使用 stack view.
使用Interface Builder创建约束
对每个 image view 我们需要添加两个约束。使用文档大纲工具栏或者直接在视图画布中按住 control 键从 image view 中拖拽到父视图上。每一个都添加一个“Center Horizontally in Container”和“Certer Vertically in Container”约束。
现在, 编辑每个约束来设置我们需要的百分比例。下面是左上角的红心图片视图的水平和垂直约束设置:
注意这也是给我们的约束添加identifiers 的好时机。完成后,你应该添加了10个约束,如下所示:
以代码形式创建约束
在看添加约束的代码之前,我要提下一个常见的错误,当使用代码添加视图时, 你需要关闭视图的 autoresizing mask 向 constraints 的转变。如果不这样做,系统会自动创建约束,这会和我们创建的约束发生冲突。
//...code to create image view...
imageView.translatesAutoresizingMaskIntoConstraints =
false
view.addSubview(imageView)
有几种创建这些约束的方法,我将会在视图控制器的 viewDidLoad 方法中创建. 一个简单的辅助函数会使创建每个 NSLayoutConstraint 的过程不那么麻烦:
func addConstraintFromView(subview: UIView?,
attribute: NSLayoutAttribute,
multiplier: CGFloat,
identifier: String) {
if
let subview = subview {
let constraint = NSLayoutConstraint(item: subview,
attribute: attribute,
relatedBy: .Equal,
toItem: view,
attribute: attribute,
multiplier: multiplier,
constant: 0)
constraint.identifier = identifier
view.addConstraint(constraint)
}
}
这样就可以创建并添加一个相对于父视图的约束 (使用视图控制器的 view 属性)。NSLayoutAttribute 参数在水平约束中为 .CenterX,在竖直约束中为 .CenterY。例如,下面是上面一行的红心图片视图的约束:
// vertical constraint
addConstraintFromView(heartTop,
attribute: .CenterY,
multiplier: 0.667,
identifier:
"heartTop center Y"
)
// horizontal constraint
addConstraintFromView(heartTop,
attribute: .CenterX,
multiplier: 0.5,
identifier:
"heartTop center X"
)
剩下的和这个类似,全部设置见示例代码。
使用Stack View呢?
无论何时只要你遇到水平或垂直布局的问题,你就要想到 stack view。向 stack view 中添加 image views 是很简单的,但是如何配置呢? 我们不想让stack view中堆满views, 所以 Axis 选择水平轴向, 使用“Equal Spacing”分布方式:
现在我们需要约束 stack view 的大小和位置:
使用和设置图片视图竖直位置相同的方式设置每个 stack view 的竖直位置。使用modifier中心约束 (例如顶部 stack view 使用 stackView.centerY = 0.667 * superview.centerY 约束)。
向每个 stack view 添加一个水平居中的约束。
最后的约束需要一点小小的技巧,我们需要确定 stack view 的宽度,使用 stack view 的 leading 和 trailing 边缘是最简单的方式:
左上的 image view 的中心应该是父视图中心的 0.5 倍. 那么我们需要 stack view 的左边向左移动image view 宽度的一半. image view 大小时 100x100, 所以我们需要在约束中减去 50:
注意在 IB 中添加这个约束时你需要改变第二项为 superview center,equal spacing 分布方式将会为我们修正 trailing 位置. 用类似的方法处理下方的 stack view,于是我们最终结果如下:
这是我发现的一种用代码添加约束要比在IB中编辑简单得多的一种情形,尤其是当我们可以在运行时计算 image view 的大小时。
2016-01-31 更新: 还有一个更简单的方法,为最左边图片的中心添加一个约束,stack view 会改变大小来适应,而不需要计算图片的大小。详见代码。
补充阅读
你可以在 GitHub CodeExamples( https://github.com/kharrison/CodeExamples/tree/master/AutoLayout )上找到这篇帖子的代码,它包含IB、代码和 stack view 三个版本,你可以比较下这几个方法。
使用Auto Layout处理比例间距问题的更多相关文章
- WWDC2016 Session笔记 - Xcode 8 Auto Layout新特性
目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedb ...
- 【转】使用 Auto Layout 的典型痛点和技巧
layoutIfNeeded()强制立刻更新布局 原文网址:http://www.jianshu.com/p/0f031606e5f2 官方文档:Auto Layout Guide 加上去年WWDC上 ...
- iOS之Xcode8 Auto Layout新特性
目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedb ...
- WWDC2016 Session笔记 – Xcode 8 Auto Layout新特性
目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedb ...
- Swift语言Auto Layout入门教程:上篇
原文:Beginning Auto Layout Tutorial in Swift: Part 1/2,译者:@TurtleFromMars 开始用自动布局约束的方式思考吧! 更新记录:该教程由Br ...
- iOS发展 ---- 至iPhone 6自适应布局设计 Auto Layout
Apple从iOS 6增加了Auto Layout后開始就比較委婉的開始鼓舞.建议开发人员使用自适应布局,可是到眼下为止,我感觉大多数开发人员一直在回避这个问题,无论是不是因为历史原因造成的,至少他们 ...
- (七)unity4.6Ugui中国教程文档-------摘要-UGUI Auto Layout
大家好,我是太阳广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityman ...
- 【转】(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout
原创至上,移步请戳:(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout 6. Auto Layout Rect Transform布局系统是足够灵活,可以处 ...
- iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束
http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生 ...
随机推荐
- 【Luogu】P3709大爷的字符串题(莫队算法)
题目链接 语文题啊…… 看题解发现是让求区间中最多的数的个数,于是果断理解了一会题解……莫队套上完事. sum[i]表示i这个数出现的次数,cnt[i]表示出现i次的数有几个,然后乱搞搞……就好了 # ...
- kubernetes安装kubectl和minikube
安装kubectl命令 curl -Lo kubectl https://storage.googleapis.com/kubernetes-release/release/v1.10.0/bin/l ...
- UVA 10131 Is Bigger Smarter?(DP最长上升子序列)
Description Question 1: Is Bigger Smarter? The Problem Some people think that the bigger an elepha ...
- 去掉 NavigationBar 底部的那条黑线
//加入下面两行代码即可[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UI ...
- elasticsearch入库错误:gc overhead导致数据节点脱离集群
https://my.oschina.net/u/3625378/blog/1793796
- luogu P1197 [JSOI2008]星球大战
题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧道 ...
- 安装Vmware增强工具
主机: Win7 虚拟机: VMware8.0+Debian6 目标: 离线安装软件包和VMware Tools 在虚拟机上安装完debian6后 1.在vmware的菜单中选择Vm->inst ...
- 邁向IT專家成功之路的三十則鐵律 鐵律十九:IT人待業之道-寬心
說來很多人可能不相信,筆者從來不把失業當作是一件嚴重的事,相反的我會把它當作是一個很好的轉機.針對一個隨時做好準備的IT人,三個月或半年沒有上班完全沒有甚麼好擔心的.只是如何善用待業的時間,說實在的真 ...
- oracle 查看各表空间剩余量
1.查看所有表空间大小.剩余量: select dbf.tablespace_name,dbf.totalspace "总量(M)",dbf.totalblocks as 总块数, ...
- SSH 原理和公匙私匙
先主要介绍了Telnet.SSH 的通信原理,分析了其通信时的工作流程. Telnet 无论Telnet协议连接的是什么类型终端,都会转换为NVT(Net Virtual Terminal)格式进行通 ...