文章列表 Auto Layout 中的对齐选项
Post
Cancel

Auto Layout 中的对齐选项

译者注:翻译这篇文章主要是它附带了一个 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 值彼此相等来对齐。

特别需要注意的是 NSLayoutFormatAlignAllLeadingNSLayoutFormatAlignAllTrailing 。通常来说你应该使用它们代替 NSLayoutFormatAlignAllLeftNSLayoutFormatAlignAllRight 来允许你的 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,它的古怪又是另一个故事了。

本文采用 CC BY 4.0 授权。

iOS 开发实践之 Auto Layout

小汽车上牌流程

Comments powered by Disqus.