自动版面

自动版式会根据对这些视图施加的约束来动态计算视图层次结构中所有视图的大小和位置。 例如,您可以限制按钮的位置,使其在“图像”视图中水平居中,并且按钮的顶部边缘始终保持在图像底部下方8个点。 如果图像视图的大小或位置发生更改,则按钮的位置会自动调整以匹配。

这种基于约束的设计方法使您可以构建可动态响应内部和外部更改的用户界面。

当超级视图的大小或形状发生更改时,将发生外部更改。 每次更改后,您都必须更新视图层次结构的布局,以最佳利用可用空间。 以下是一些外部变化的常见来源:

  • 用户调整窗口大小(OS X)。
  • 用户进入或离开iPad(iOS)上的拆分视图。
  • 设备旋转(iOS)。
  • 活动的呼叫和录音栏会出现或消失(iOS)。
  • 您要支持不同的尺寸等级。
  • 您要支持不同的屏幕尺寸。

这些更改大多数可以在运行时发生,并且需要您的应用程序动态响应。 其他功能,例如对不同屏幕尺寸的支持,则表示该应用程序可以适应不同的环境。 即使屏幕大小通常在运行时不会改变,创建自适应界面也可以使您的应用在iPhone 4S,iPhone 6 Plus甚至iPad上同样良好地运行。 自动布局也是支持iPad上的“滑行视图”和“拆分视图”的关键组件。

当用户界面中的视图或控件的大小更改时,就会发生内部更改。

以下是内部变更的一些常见来源:

  • 应用程序显示的内容发生更改。
  • 该应用程序支持国际化。
  • 该应用程序支持动态类型(iOS)。

当您的应用程序的内容更改时,新内容可能需要与旧内容不同的布局。 这通常发生在显示文本或图像的应用程序中。 例如,新闻应用程序需要根据各个新闻文章的大小来调整其布局。 同样,照片拼贴必须处理各种图像尺寸和宽高比。

国际化是使您的应用程序能够适应不同语言,地区和文化的过程。 国际化应用程序的布局必须考虑到这些差异,并在应用程序支持的所有语言和区域中正确显示。

国际化对布局有三个主要影响。 首先,当您将用户界面翻译成其他语言时,标签需要占用不同的空间。 例如,德语通常比英语需要更多的空间。 日语经常需要更少的东西。

其次,即使语言不变,用于表示日期和数字的格式也可能因地区而异。 尽管这些更改通常比语言更改更微妙,但用户界面仍然需要适应大小上的细微变化。

第三,更改语言不仅会影响文本的大小,还会影响布局的组织。 不同的语言使用不同的布局方向。 例如,英语使用从左到右的布局方向,阿拉伯语和希伯来语使用从右到左的布局方向。 通常,用户界面元素的顺序应与布局方向匹配。 如果按钮在英语视图的右下角,则应该在阿拉伯语的左下角。

最后,如果您的iOS应用支持动态类型,则用户可以更改应用中使用的字体大小。 这可以更改用户界面中任何文本元素的高度和宽度。 如果用户在应用程序运行时更改字体大小,则字体和布局都必须适应。

布局用户界面的主要方法有三种。 您可以以编程方式对用户界面进行布局,可以使用自动调整大小的遮罩来自动执行对外部更改的某些响应,或者可以使用“自动布局”。

传统上,应用通过以编程方式为视图层次结构中的每个视图设置框架来布局用户界面。 该框架在超级视图的坐标系中定义了视图的原点,高度和宽度。

要布置用户界面,必须计算视图层次结构中每个视图的大小和位置。 然后,如果发生更改,则必须为所有受影响的视图重新计算框架。

在许多方面,以编程方式定义视图的框架提供了最大的灵活性和功能。 发生更改时,您可以按需进行任何更改。 但是,由于还必须自己管理所有更改,因此,设计一个简单的用户界面需要花费大量的精力进行设计,调试和维护。 创建真正的自适应用户界面会使难度增加一个数量级。

您可以使用自动调整大小的蒙版来减轻这种工作量。 自动调整大小蒙版定义了视图的框架在其超级视图的框架更改时如何更改。 这简化了适应外部变化的布局的创建。

但是,自动调整大小的蒙版支持可能布局的相对较小的子集。 对于复杂的用户界面,通常需要使用自己的程序更改来增加自动调整大小掩码。 此外,自动调整大小的蒙版仅适应外部更改。 它们不支持内部更改。

尽管自动调整大小的蒙版只是对程序布局的迭代改进,但“自动布局”代表了一种全新的范例。 您无需考虑视图的框架,而可以考虑其关系。

自动版式使用一系列约束来定义您的用户界面。 约束通常表示两个视图之间的关系。 然后,“自动版式”将根据这些约束来计算每个视图的大小和位置。 这将产生可动态响应内部和外部更改的布局。

用于设计一组约束以创建特定行为的逻辑与用于编写过程或面向对象的代码的逻辑非常不同。 幸运的是,掌握自动版式与掌握任何其他编程任务没有什么不同。 有两个基本步骤:首先,您需要了解基于约束的布局背后的逻辑,然后需要学习API。 在学习其他编程任务时,您已经成功执行了这些步骤。 自动版式也不例外。