如何在 Xcode5 中使用 AutoLayout 制作 ScrollView答案

【问题标题】：How to make a ScrollView with AutoLayout in Xcode5如何在 Xcode5 中使用 AutoLayout 制作 ScrollView
【发布时间】：2013-10-07 09:02:52
【问题描述】：

在使用情节提要的 xcode 5 中，如何在启用自动布局的情况下制作完全可操作的垂直滚动滚动视图？
考虑到子视图有层次结构：

  1.UIView  
    2.UIScrollView
      3.UIView (lets call this UIDetailView to make things easier)

请从代码到约束具体到任何视图是否必须更小等。

【问题讨论】：

你目前有什么配置？什么不符合您的预期？
代码中的配置？
非常好的手动解决方案在youtube.com/watch?v=4oCWxHLBQ-A进行了描述

标签： ios uiscrollview storyboard autolayout xcode5

【解决方案1】：

文档清楚地说明了如何做到这一点：自动布局中的 UIScrollView 将始终调整自身大小以适应内容 (UIDetailView)。

所以你必须像这样设置你的视图：

UIView：有约束的位置。
UIScrollView：使用约束绑定到 UIView。
UIDetailView：手动设置大小（内在内容大小）、最大抗压缩性、将 UIScrollView 的顶部、底部、前导和尾部约束设置为 0。

【讨论】：

您可以在 Interface Builder 中设置所有约束。这在以前的 XCode-Releases 中是很困难的，因为 IB 总是试图在出现问题时自动调整它们。可以通过选择要约束的元素（UIScrollView 和 UIDetailView）然后从菜单中选择约束来添加约束。添加后，您可以在属性窗格中对其进行编辑。
我不能对 UIView 做任何事情，只对 UIScrollView 和 UIContentView 有约束？我是否使用如下所示的按钮设置顶部、底部：|-+-|？我也必须在代码中做任何事情吗？
对不起，请阅读网站规则。我们不是来教你或做你的功课的。请阅读文档并观看有关此主题的 WWDC 视频。
是的，很抱歉问了这么多，我不会这么具体，但似乎没有什么工作了（在以前版本的 Xcode 上没有什么能完美工作）
正如我所说：以前版本的 XCode 会自动为您添加/调整约束。这让一些事情变得更容易，但另一些事情变得不可能——你必须在代码中完成它们。现在您可以完全控制您的约束。这需要更多的努力，但最终会产生您想要的结果，而不是您可以接受的结果。

【解决方案2】：

这篇博文详细介绍了如何使用开启自动布局的 UIScrollView，使用纯自动布局方法。请注意，博客文章中的所有约束都是通过情节提要定义的。

帖子中的方法假定以下层次结构：

1. View (main view of my UIViewController)
  2. Scroll View (UIScrollView)
     3. Container View (UIView)
       4. Content View (e.g. UIImageView)

我猜容器视图将是您的 UIDetailView，而内容视图将是您的 UIDetailView 中的任何 UIView。

https://happyteamlabs.com/blog/ios-how-to-use-uiscrollview-with-auto-layout-pure-auto-layout/

【讨论】：

如何实际设置约束？最初的苹果文档似乎相当复杂。有什么方法可以提供一个完整的计划，包括在故事板中做什么和在代码中做什么？
上面的链接详细说明了约束。本教程唯一缺少的部分是屏幕截图。这是你需要的吗？
其实我现在得到了约束，但我无法让滚动视图滚动到所需的垂直长度。
我根本无法滚动。
如果你已经正确设置了约束并且你的内容视图的尺寸大于可视区域，你的滚动视图应该可以滚动。你想创建一个示例 github 项目以便我可以调查你的问题吗？

【解决方案3】：

我遇到了类似的问题，我在 Interface Builder 中找到了类似于 DJ S 的相对简单的解决方案，使用纯自动布局，无需任何代码。

对于概念验证，首先删除 View Controller 中的任何约束以确保是否可行。

这是示例布局：

视图（我的 UIViewController 的主视图）
- 滚动视图（UIScrollView）
  - 容器视图（UIView）
    - 内容视图（例如 UIImageView）

A.滚动视图的宽度/高度应该小于容器视图的宽度/高度

B.容器视图应该有一些确定的宽度/高度（可能是明确的宽度/高度）

C.控制并拖动 Container View 到 Scroll View 并只添加：

引领空间走向容器
到容器的尾随空间

D.检查这两个约束并将两者的“常量”值设置为 0

E.运行应用程序和

【讨论】：

【解决方案4】：

在 Storyboards 中使用 Autolayout 的 UIScrollView 可以正常工作

我看到很多人推荐使用“容器视图”方法（又名蛮力）来解决他们不理解的问题。这是非最佳的，因为您现在已经失去了滚动视图的一大优势，因为它认为内容是整个滚动视图，而不是立即附加到滚动视图的子视图。

这是我在下面的示例中的做法

--UIScrollView
  |-> UITextView
  |-> UILabel
  |-> UIOtherStuff

将UIScrollView 放入情节提要中的UIView 时，只需将边缘固定到UIScrollView 的4 边到UIView。现在将您的内容添加到UIScrollView，确保为每个维度提供至少两个约束。 Autolayout 的伟大之处在于它计算出滚动视图的 contentSize 或 UILabels 的大小需要基于其中内容的大小。又名内在内容大小。因此，如果您收到警告“滚动视图的内容大小不明确”，您就知道您没有给内容提供足够的约束。例如，您可能已经给出了视图之间的上、下、左、右间距，但是您要约束的子视图也需要一个高度，因为像 UIScrollView 这样的无限垂直平面可能会假设您的视图从零到无限高。

换句话说，Apple guide on Autolayout by Example 制定了一个简单的 3 点成功计划：

创建滚动视图。
将 UI 元素放在其中。
创建完全定义滚动视图内容的宽度和高度的约束。

当您在其中键入更多行时，带有“Min melding til”的顶部 TextView 也在增长，并且整个 ScrollView 会增长以包含它。虽然我重写 UITextView 类以返回修改后的高度约束，但 ScrollView 本身无需编码即可正常工作。

最后一件事，很多与自动布局相关的帖子都尝试了神奇的修复所有咒语translatesAutoresizingMaskIntoConstraints = NO。仅当以编程方式创建视图时才需要这样做。

【讨论】：

这非常有帮助。使用 UIImageView 依赖于内在的内容大小，而这提供了一种将任何内容布局到滚动视图中的方法。谢谢！

【解决方案5】：

由于新的 iPhone 6 和 6+ 屏幕尺寸，我不得不对DJ S's solution 进行一些调整。

目标

将UITextView 定位在UIScrollView 内，并且从左/右屏幕边缘也有15 pt 空格。

观看次数

1. Main View (main view of my UIViewController)
  2. Scroll View (UIScrollView)
     3. Container View (UIView)
       4. Text View (UITextView)

解决方案

对于空格，我从UIScrollView->Main View 添加了 15 pt 水平尾随/前导空格。为了使UITextView 的宽度相对于屏幕宽度，我从UITextView -> Main View 添加了一个Equal Widths 约束，并将值设置为-30（2 * 15 pt 水平空间）。现在，UITextView 的宽度将根据任何屏幕尺寸动态调整。

UIScrollView 应该有 Scrolling Enabled。 UITextView 应该不。

【讨论】：