Auto Layout 中的对齐选项
本文为迁移文章,原发布时间为 2014-08-18 04:00:00
译者注:翻译这篇文章主要是它附带了一个 Demo,可以很直观得看明白各个选项的作用。博主比较懒,不想自己再写一个了,粗略翻译一下。
在 OS X Lion 和 iOS 6 中,苹果添加了一个新的方式来布局视图 —— Auto Layout。
这是一个非常强大的系统,它可以处理很多排列视图时的工作和开销。一个定义良好的布局可以使很多头痛的问题完全消失。然而,它有点。。。古怪。。。至少可以这样说。1
继续阅读之前我建议你先阅读 VFL
语法。
本文将会讨论 constraintsWithVisualFormat:options:metrics:views:
方法中的 options
参数你可以设置的各种选项。这些选项将会影响在 VFL
语句中的视图相互之间的对齐方式。
在本文中,我们将会讨论我创建的一个名为 AutoLayoutAlignment 的实例工程,你可以在 Github 上找到它。(译者注:请运行 iPad 版本,iPhone 版本有 Bug。)
选项的作用
在 constraintsWithVisualFormat:options:metrics:views:
中,options
参数是一个位掩码,它允许你定义 VFL
语句中的视图相互之间的对齐方式。例如,VFL
语句 @"V:[first][second][third]"
只告诉你这三个视图应该垂直堆在一起,并没有说明如果这几个视图宽度不同时该怎么做。
你可以通过给每个视图添加水平约束来处理这个问题,但这会让问题变得很繁琐。相反,你可以传递一个选项告诉布局引擎视图之间应该如何放置。
选项
有三套选项方案:一套适用于垂直约束,一套适用于水平约束,一套用来调制约束的水平方向。他们都是 NSLayoutFormatOptions
的一部分。
垂直约束选项
- NSLayoutFormatAlignAllLeft - 使所有视图根据它们的左边缘对齐。
- NSLayoutFormatAlignAllRight - 使所有视图根据它们的右边缘对齐。
- NSLayoutFormatAlignAllLeading - 使所有视图根据当前区域文字开始的边缘对齐(英语:左边,希伯来语:右边)。
- NSLayoutFormatAlignAllTrailing - 使所有视图根据当前区域文字结束的边缘对齐(英语:右边,希伯来语:左边)。
- NSLayoutFormatAlignAllCenterX - 使所有视图通过设置中心点的 X 值彼此相等来对齐。
特别需要注意的是 NSLayoutFormatAlignAllLeading
和 NSLayoutFormatAlignAllTrailing
。通常来说你应该使用它们代替 NSLayoutFormatAlignAllLeft
和 NSLayoutFormatAlignAllRight
来允许你的 UI 根据阅读的语言来调整为相反方向。
水平约束选项
- NSLayoutFormatAlignAllTop – 使所有视图根据它们的顶部边缘对齐。
- NSLayoutFormatAlignAllBottom – 使所有视图根据它们的底部边缘对齐。
- NSLayoutFormatAlignAllCenterY – 使所有视图通过设置中心点的 X 值彼此相等来对齐。
- NSLayoutFormatAlignAllBaseline – 使所有视图通过它们的基线排列。对于基于文本的视图就是文字的底部不下降(如 g,p,j,等等)。对于非文本视图来说就和底部边缘一样。
当彼此都是文本视图时,基于基线对齐看起来更悦目。但对于混合的视图来说,这可能不是你想要的效果。
方向约束选项
这些选项不能使用逻辑或 |
来多选,你应该三者选一。
- NSLayoutFormatDirectionLeadingToTrailing - 在读取格式化字符串时假设字符串的前缘视图(译者注:leading view,词穷,不知如何翻译)应该在显示器的前侧。再次重申,基于使用的语言环境。
- NSLayoutFormatDirectionLeftToRight - 在读取格式化字符串时假设字符串的前缘视图应该在显示器的左侧。
- NSLayoutFormatDirectionRightToLeft - 在读取格式化字符串时假设字符串的前缘视图应该在显示器的右侧。
默认值是 NSLayoutFormatDirectionLeadingToTrailing
,也是通常你需要使用的。
如何应用它们
继续!启动实例工程,你很快将会看到这些对齐选项是如何工作的。
在底部中心的 VFL
语句是屏幕上两个大的视图正在使用的。对齐选项定义在左下方的按钮点击后弹出的视图中。尝试调整对齐选项的设置,你应该注意到文本标签们在它们的父视图上到处移动,并且可以顺利的看到它们是如何工作的。
应用中有一个不属于 NSLayoutFormatOptions
项的附加设置,Apply Option to Superview as Well
选项将会添加一个额外的约束到这些视图上。它通过 constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:
方法,使用等效的 NSLayoutAttribute
连接了顶部视图或前侧视图到父视图。
重要的一点需要注意的是如果你禁用了连接父视图的约束,这些视图是如何移动的。尽管父视图在 VFL
语句中是使用 |
来引用的,但这个引用只是为了定位,对齐选项并不会应用在它上面。如果你没有给父视图设置对齐选项,那么布局就被认为是 不明确的
(ambiguous),布局引擎就不能完全地显示它。我们将在后面讨论不明确的是什么,以及如何修复它。就现在而言,注意有一个按钮将会把追踪信息输出到控制台,并且将会显示屏幕上哪些视图是不明确的。
结论
希望你现在理解了 options
参数的作用,以及如何使用它来对齐出现在 VFL
语句中的视图。
1. 我不在 IB 中使用 Auto Layout。我不喜欢使用 IB,它的古怪又是另一个故事了。↩