Auto Layout Guide官网文档翻译

版权声明:本文为博主原创文章,未经博主允许不得转载

了解自动布局

基于对这些视图的约束,自动布局(Auto Layout)会动态的计算视图层级中所有视图的大小和位置。例如,你可以约束一个按钮,使其与一个图像视图保持水平居中,并且使该按钮的顶部始终在图像视图的底部下方的8点距离处。如果图像视图的大小和位置发生了变化,按钮的位置将会自动调整以匹配约束的位置。

这种基于约束的设计方法允许你构建动态响应内部和外部改变的用户界面。

外部改变

当父视图的尺寸或形状发生改变时,会发生外部改变。每次发生改变时,你必须更新视图层级结构的布局以最佳利用可用的空间。以下是外部改变的常见来源:

  • 用户调整窗口大小(MacOS)。
  • 用户在iPad(iOS)上进入或离开Split视图。
  • 设备旋转(iOS)。
  • 活动的呼叫和录音条出现或消失时(iOS)。
  • 你希望支持不同大小的类。
  • 你希望支持不同的屏幕尺寸。

大多数改变都可能会在运行时发生,并且需要你的app动态响应这些改变。其他的,像支持不同的屏幕尺寸,代表适应不同环境的app。即使屏幕不会再运行时发生改变,创建一个自适应用户界面,能使你的app再iPhone 4S、iphone 6Plus甚至在ipad上良好运行。自动布局也是在ipad上支持Slide Over和Split视图的关键组件。

内部改变

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

以下是内部改变的常见来源:

  • app显示的内容发生改变。
  • app支持国际化。
  • 该app支持动态类型(iOS)。

当你的app内容改变时,新内容可能需要与旧内容不同的布局,这种情况通常发生在显示文字或图像的app中。例如,新闻app需要根据个人消息文章的大小来调整其布局。类似的,照片拼图必须处理各种图片尺寸和宽高比。

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

国际化对布局主要有三个主要影响。首先,当你把用户界面翻译成不同语言时,标签可能会需要不同的空间。例如,德语通常比英语要求更多空间,而日语通常要少的多。

其次,用于表示日期和数字的格式可能在区域之间发生变化,即使语言没有生发改变。尽管这些变化比语言变化更微妙,但用户界面仍然需要适应大小的微妙变化。

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

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

自动布局与基于frame的布局

布局用户界面有三种主要方法。 您可以以编程方式布局用户界面,您也可以使用autoresizing来自动执行一些外部更改的响应,当然也可以使用自动布局(Auto Layout)。

通常,应用程序通过在每个视图的视图层次结构中编程设置视图的frame来布局他们的用户界面。 frame定义了视图在它的父视图坐标系中的原点,高度和宽度。

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

在许多方面,以编程方式定义视图的frame提供了最大的灵活性和强大的功能。当发生变化时,您可以逐字地进行任何您想要的更改。 但是,由于您还必须自行管理所有更改,因此布局简单的用户界面需要大量的设计、调试和维护工作。创建真正适应的用户界面将会使难度提高一个数量级。

您可以使用autoresizing来帮助减轻其中的一些工作。autoresizing定义了一个当父视图frame改变时,该视图frame如何改变的方法。 这简化了创建适应外部改变的布局。

然而,autoresizing支持相对较小的可能布局的子集。对于复杂的用户界面,您通常需要你自己的编程来增加autoresizing。此外,autoresizing仅适用于外部改变,他们不支持内部改变。

虽然autoresizing只是对程序化布局的迭代改进,但Auto Layout代表了一种全新的范例,而不是考虑视图的frame,需要考虑他们之间的关系。

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

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

本指南的其余部分旨在帮助您轻松转换到自动布局(Auto Layout)。Auto Layout Without Constraints一章介绍了一种简化创建自动布局支持的用户界面的高级抽象。Anatomy of a Constraint章节提供您需要理解的背景理论,以便您自己成功地与自动布局交互。Working with Constraints in Interface Builder使用约束描述了设计自动布局的工具,以及 Programmatically Creating ConstraintsAuto Layout Cookbook章节详细描述了API。 最后,Auto Layout Cookbook提供了各种不同级别复杂度的样本布局,您可以在自己的项目中学习和使用,Debugging Auto Layout提供建议和工具,用于修复任何问题。

原文地址:https://www.cnblogs.com/weixiaochao/p/6739509.html