ios 自动布局的例子

自动布局的例子

自动布局便于自动解决许多复杂的布局问题,而不需要手动操纵。通过创建正确的约束组合,您可以创建布局传统上难以管理的代码,如等距的观点,适应变化方向或大小,滚动视图内元素影响的大小滚动内容,或不滚动的元素内部滚动视图的内容。

与自动使用滚动视图布局

当你创建一个应用程序使用自动布局,滚动视图可以提供一个独特的挑战。滚动内容必须设置正确的大小,以便用户可以滚动浏览所有可用的内容,例如,如果你需要锁定一个上下文视图滚动视图,如地图的规模和传说,很难确保元素不滚动与其它内容。

控制滚动视图内容的大小

内容滚动视图内的大小取决于它的后代的约束。

设置一个滚动视图的大小

创建滚动视图。
里面的UI元素。
创建约束完全定义滚动视图内容的宽度和高度。

你必须确保你创建约束中的滚动视图内。例如,当为一个视图定义的约束,没有一个内在内容的大小,你需要的不仅仅是一个领先的约束还必须创建后缘,宽度,高度限制。不能有任何遗漏的约束,从滚动视图的一个优势。

创建固定视图内滚动视图

你会发现你想要创建一个区域内滚动视图不当用户移动卷轴滚动视图的内容。你使用一个单独的完成这个 容器视图 。

锁定一个视图滚动视图内

创建一个容器视图滚动视图。
创建滚动视图容器视图中,并将其与所有边缘等于零分。
创建和滚动视图的子视图内。
从容器视图的子视图创建约束。

下面的示例使用显示在上面的任务的步骤如何定位一个文本视图内滚动视图。在这个例子中,文本视图保持底部的滚动视图,不移动时的滚动视图内容感动。

首先,创建容器视图,将包含滚动视图。设置容器视图的大小等于所需的滚动视图的大小。

../Art/sv_containerview.png

创建容器视图后,创建一个滚动视图,并将其容器的内部视图。调整滚动视图,这样所有的边缘充裕容器视图的边缘,通过设置距离为0。

../Art/sv_scrollview.png

创建另一个视图并将其内部滚动视图。在这个例子中,一个文本视图放置在滚动视图。

../Art/sv_textview.png

将文本视图后,从文本视图容器视图创建约束。创建约束,锚文本视图容器视图(跳过滚动视图)锚文本视图相对于容器视图,这确保了滚动视图不会滚动文本视图。

创建一个约束,跨越多个视图在视图层次,一般容易Control-drag从容器视图的视图界面构建器大纲视图。

../Art/sv_constraints.png

在出现的约束叠加,为视图设置所需的约束。

../Art/sv_leadconstraint.png

在这个示例中,创建约束从领导、落后,底边的文本视图容器视图。文本视图的高度也有限。

../Art/sv_textviewconstraints.png

以下两个数据显示,在iOS应用程序模拟器,在正常和景观位置。文本视图底部的滚动视图和限制不移动作为移动的滚动视图。

../Art/uiscrollview_bottom_sideways.png ../Art/uiscrollview_bottom_vertical.png

间距和包装

自动自动间隔布局提供了一些技术意见和调整项目根据他们的内容。以下部分描述了如何创建约束,使可见视图基于设备的方向等间距。

创造平等的间距的观点

列出几个视图基于设备的方向等间距,创建间隔视图之间的可见的观点。设置这些垫片观点正确的约束确保可见视图能够保持间隔的基于设备的方向。

空间观点的比例

创建可见的视图。
创建间隔视图可见视图的数量加1。
交替放置你的观点,从一个间隔的观点。

空间两个可见视图,把所有的观点在下面的模式中,从左边的屏幕和移动正确的:

spacer1 | view1 | spacer2 | view2 | spacer3 。
限制间隔的观点,他们的长度相等。

注意: 间隔视图的高度可以是任何值,包括 0 。然而,您必须创建约束的高度views-don没有离开了模棱两可的高度。
创建一个从第一个垫片主要约束视图容器视图。
创建一个落后于最后一个间隔约束视图容器视图。
创建约束之间的间隔视图和可见的观点。

注意: 当垂直间距的观点,从屏幕的顶部,并将每个视图下面前面的视图。的高度设置间隔相等的看法。

下面的示例使用在上面的任务的步骤说明如何位置两个视图等间距。的间隔视图是注释的例子,但通常是空无的背景。首先,创建两个视图并将其故事板。

../Art/es_twoviews.png

添加三个间隔发表的左边左边的视图,一个在两种观点之间,一个右边的右边的视图。间隔视图不需要相同的大小在这个时间,因为它们的大小将通过约束。

../Art/es_spacersadded.png

间隔视图创建以下约束:

间隔视图2和垫片视图的宽度约束3等于间隔视图的宽度1。
限制间隔观点1的宽度大于或等于最低所需的宽度。
从间隔视图创建一个领先的空间容器约束1到容器。
创建一个水平间距约束从间隔视图1 - 1。设置这个约束是一个小于或等于约束优先级为1000。
从间隔创建水平间距约束视图2 -视图1和2。设置这些限制是一个小于或等于约束优先级为999。
从间隔视图创建一个水平间距约束3查看2。设置这个约束是一个小于或等于约束优先级为1000。
从间隔视图创建一个落后的空间容器约束3到容器。

这些约束创建两个可见视图和三个无形的视图(间隔视图)。这些间隔视图自动调整装置的方向变化,保持可见视图等间距,如以下两图所示:

../Art/es_vertical.png ../Art/es_horizontal.png

动画由自动布局变化

如果你需要完全控制动画由自动布局变化,你必须让你的约束以编程方式更改。的基本概念是相同的iOS和mac OS X,但有一些细微的差别。

在iOS应用程序,您的代码将类似于以下几点:

[containerView layoutIfNeeded]; // Ensures that all pending layout operations have been completed

[UIView animateWithDuration:1.0 animations:^{

     // Make all constraint changes here

     [containerView layoutIfNeeded]; // Forces the layout of the subtree animation block and then captures all of the frame changes

}];

在OS X中,使用以下代码在使用layer-backed动画:

[containterView layoutIfNeeded];

NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) {

     [context setAllowsImplicitAnimation: YES];

     // Make all constraint changes here

     [containerView layoutIfNeeded];

}];

当你不使用layer-backed动画,动画必须持续使用约束的动画:

[[constraint animator] setConstant:42];