ios - 使用Interface Builder在iOS中一页页面上的视差标题

Question

在iOS 8应用中，我正在尝试创建一个具有“视差标头”的屏幕，即，随着您拉下而增长的图像标头。如果可能的话，我只想使用Interface Builder中的约束来做到这一点。

皮特·黑尔（Pete Hare）撰写的Here is a nice guide关于如何做这样的事情，而且在看比尔·卡森（Bill Carson）撰写的this example project方面也有很好的帮助。但是，与这些项目相反，这不是比屏幕高的滚动区域的标题，例如“表格视图”；只有一页。由于某种原因，我无法在我的应用程序中正常工作。我发现Interface Builder中的滚动视图一开始就很混乱。谁能指导我完成这些步骤？

Answer 1

为什么，当然！首先，我们将设置带有滚动视图的视图控制器。


创建一个空的View Controller。给它的初始视图Xcode特定标签根视图，以便我们可以区分。
添加滚动视图。调整其大小以填充视图控制器，并添加前导，尾随，顶部和底部的约束以等于超级视图的相应边缘。 （我可以通过以下方式进行控制：从Scroll View拖动到Document Outline中的View，按住Option和Shift键，然后选择所有四个边，然后添加“约束”。）
在滚动视图的属性检查器中启用“垂直反弹”。
将简单的视图添加到滚动视图，并将其边缘固定到其超级视图（滚动视图），方式与将滚动视图更改为根视图的方式完全相同（尽管这次我们不需要按住Option键添加约束时）。给新视图Xcode特定标签滚动内容。
Xcode不满意，它说滚动视图缺少约束：“需要X位置或宽度的约束”和“需要Y位置或高度的约束”。让它自动添加缺少的约束，它将在X和Y方向上将“滚动内容”中心的约束添加到“滚动视图”的中心。


通过为“滚动内容”设置背景色，我们现在可以运行并确认垂直跳动的滚动视图是否按预期工作。真好现在，让我们添加标题。


将漂亮的标题图像添加到项目资产，然后将“图像视图”拖动到“滚动内容”。将其标记为标题图像。选择您的图像资产作为页眉图像的图像。拖动图像视图的角，使其与视图的顶部，左侧和右侧边缘对齐。现在，让我们看一下在“图像视图”上设置的约束。


我们希望将顶部边缘固定在屏幕顶部，而不考虑用户如何滚动。因此，我们需要将其固定在“滚动视图”之外。您可以尝试将其修复到“根视图”的顶部边缘，但是不幸的是，由于某些原因，该方法不起作用。起作用的是将其固定到“顶部布局指南”。您可以通过在标题栏和顶部布局指南之间的文档大纲中进行控制并拖拽并填充建议的常量来最轻松地完成此操作。
标题图像的底部边缘需要固定到“滚动视图”内部。最终，我们希望将其设置为与Scrolling Content顶部的固定距离-但是Interface Builder不允许我们这样做。您只能将其设置为与“滚动内容”底部相距一段距离，这不太实用，因为您将不得不考虑设备的高度。我们要做的是在标题图像的正下方添加另一个视图，将该视图的顶部边缘固定到与滚动内容的顶部边缘一定距离，然后将标题图像的底部边缘固定到新视图的顶部边缘。这可能是一个常规视图，将用户界面的其余部分保留在标题下。但是对于此示例（并为了说明本指南的后续内容），我们将使用标签。在页眉图像的正下方添加标签，并赋予其三个约束：将其顶部边缘固定到页眉图像的底部边缘，将其顶部边缘也固定到滚动内容的顶部边缘，并且将中心X固定到滚动内容的中心X。标签的顶部边缘和“滚动内容”的顶部边缘将是非拖动状态下图像的高度。不幸的是，这需要在情节提要文件中设置为常量-我们必须以编程方式对其进行更新。以后再说。
最后一部分很简单：将Header Image的前端和后端固定到Scrolling Content的前端和后端。



现在，我们所有的约束都就位了！如果运行该应用程序，则可以看到它在约束条件下如何正常工作，但是图像并没有按照我们期望的方式缩放。在我们完成之前，需要进行一些最后的调整。


在属性检查器的“视图”下，将“图像视图”的“模式”设置为“长宽比填充”。这给了它正确的视差行为。
为了正确设置页眉图像的高度，我们需要一些代码。首先，将标签顶部和滚动内容顶部之间的约束（我们设置为固定值的约束）排到View Controller的源文件中。称为imageHeightConstraint。还要从“图像视图”中添加一个名为headerImageView的插座。在viewWillLayoutSubviews View Controller委托方法中，以编程方式更新约束的一个好地方。这是Objective C中的一些代码：

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    CGSize imageSize = self.headerImageView.image.size;
    CGFloat heightForWidth = imageSize.height / imageSize.width;
    CGRect screenBounds = [UIScreen mainScreen].bounds;
    CGFloat screenWidth = CGRectGetWidth(screenBounds);
    self.imageHeightConstraint.constant = screenWidth * heightForWidth;
}

最后，您可能会注意到，向上滚动时，标签（或标题视图下的任何内容）被其覆盖。这可以通过在“图像视图”的“属性”检查器上检查Clip Supbviews来解决。


ew！

（注意：我开始将其作为问题开始写，然后在自己解决问题的同时继续写。我想这可以通过一些文本修剪和一些图像来很好地完成，但也许会对某人有所帮助...）