使用 Interface Builder 在 iOS 中的一页屏幕上的视差标题

Posted 2023-03-12

【中文标题】使用 Interface Builder 在 iOS 中的一页屏幕上的视差标题

【英文标题】：Parallax header on a one-page screen in iOS using Interface Builder

【发布时间】：2016-02-03 19:28:33

【问题描述】：

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

Here is a nice guideHere is a nice guide@Pete Hare 关于如何做这样的事情，我在查看 Bill Carson 的this example project 时也得到了很好的帮助。然而，与这些项目相反，这不是比屏幕高的滚动区域的标题，如表格视图；它只是一页。出于某种原因，我无法在我的应用程序中运行。我发现 Interface Builder 中的滚动视图一开始就相当混乱。谁能帮我完成这些步骤？

【参考方案1】：

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

创建一个空的 View Controller。

为其初始 View 指定 Xcode 特定标签 Root View，以便我们区分它们。

添加一个滚动视图。

调整它的大小以填充视图控制器，并

添加约束

为前导、尾随、顶部和底部以等于超级视图的相应边缘。 （我通过控制从滚动视图拖动到文档大纲中的视图来执行此操作，按住 Option 和 Shift 键，然后选择所有四个边，然后添加约束。） 在滚动视图的属性检查器中启用

垂直弹跳

。

添加一个简单的视图

到滚动视图并

将它的边缘固定

到它的超级视图——滚动视图——就像我们在滚动视图到根时所做的一样查看（虽然这次我们在添加约束时不需要按住 Option 键）。为新视图提供 Xcode 特定标签 滚动内容。 Xcode 不满意，它说 Scroll View 缺少约束：“需要 X 位置或宽度的约束”和“需要 Y 位置或高度的约束”。让它

自动添加缺少的约束

，它将在X和Y方向上将Scrolling Content的中心添加到Scroll View的中心。

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

为项目资产添加一个漂亮的标题图像

，然后

将一个图像视图

拖到滚动内容中。将其标记为标题图像。选择您的图像资产作为标题图像的图像。拖动 Image View 的角，使其与视图的顶部、左侧和右侧边缘对齐。现在让我们通过在 Image View 上设置的约束。 我们希望顶部边缘固定在屏幕顶部，而不管用户如何滚动。所以我们需要把它固定到滚动视图之外的东西上。您可以尝试将其固定到根视图的顶部边缘，但不幸的是，由于某种原因这不起作用。 的作用是将其

固定到顶部布局指南

。您可以通过在“文档大纲”中，在“标题图像”和“顶部布局指南”之间进行控制拖动并接受建议的常量来最简单地完成此操作。 标题图像的底部边缘需要固定到滚动视图内部 的位置。最终，我们希望将其设置为与滚动内容顶部的固定距离——但 Interface Builder 不允许我们这样做。您只能将其设置为距滚动内容的底部 一定距离，这不太实用，因为您必须考虑设备的高度。我们要做的是直接在标题图像下方添加 another 视图，将 that 视图的顶部边缘固定到距滚动内容顶部边缘一定距离的位置，然后固定标题图像的底部边缘到我们新视图的顶部边缘。这可能是一个常规视图，将用户界面的其余部分放在标题下方。但是对于这个例子（并在本指南的后面部分演示），我们将使用标签。

在标题图片正下方添加标签

并

为其设置三个约束

：将其顶部边缘固定到标题图片的底部边缘，将顶部边缘固定到滚动内容的顶部边缘，以及它的中心 X 到滚动内容的中心 X。标签的上边缘和滚动内容的上边缘之间的距离将是未拖动状态下图像的高度。不幸的是，这需要在情节提要文件中设置为常量——我们必须以编程方式对其进行更新。稍后会详细介绍。 最后一部分很简单：

将标题图像的前缘和后缘固定

到滚动内容的前缘和后缘。

现在，我们所有的约束都已到位！如果您运行该应用程序，您可以看到它是如何在约束条件下正确工作的，但图像并没有按照我们预期的方式缩放。在我们完成之前的最后几个调整。

在 Attribute Inspector 中的 View 下，

将 Image View 的 Mode 设置为“Aspect Fill”。

这样就可以得到正确的视差行为。 要正确设置标题图像的高度，我们需要一些代码。首先，从标签的上边缘和滚动内容的上边缘（我们设置为固定值的那个）之间的约束到您的视图控制器的源文件。叫它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;

---

最后，您可能会注意到，当向上滚动时，标签（或标题视图下方的任何内容）会被它覆盖。这可以通过在 Image View 的 Attribute Inspector 上

检查 Clip Supbviews

来解决。

哇！

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