如何在Xcode5中使用AutoLayout制作ScrollView

Question

在xcode 5中使用故事板如何在AutoLayout打开的情况下制作完全可操作的垂直滚动滚动视图？ 考虑到子视图具有层次结构：

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

请具体从代码到约束，以使任何视图更小等等。

Answer 1

在故事板中使用Autolayout的

UIScrollView正常工作

我见过很多人推荐“容器视图”方法，AKA蛮力，解决他们不理解的问题。它不是最优的，因为你现在已经失去了scrollview的一大优势，因为它认为内容是整个scrollview而不是直接附加到scrollview的子视图。

以下是我在后面的示例中所做的工作

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

将UIScrollView放入故事板中的UIView时，只需将边缘固定到UIScrollView的{​​{1}}的{​​4}边。现在将您的内容添加到UIView，确保为每个维度提供至少两个约束。关于Autolayout的好处在于它确定了scrollview的contentSize或UILabels的大小需要基于其内部的内容大小。 AKA intrinsicContentSize。因此，如果您收到警告“scrollView的内容大小不明确”，您就知道您没有给内容足够的约束。例如，您可能已经给出了视图之间的顶部，底部，左侧，右侧间距，但是您正在约束的子视图也需要高度，因为像UIScrollView这样的无限垂直平面可以假设您的视图从零到无限高。

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

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

带有'Min melding til'的顶级TextView也在不断增长，因为您在其中键入更多行并且整个ScrollView增长以包含它。当我覆盖UIScrollView类以返回修改后的高度约束时，ScrollView本身无需编码即可正常工作。

最后一件事，很多与Autolayout相关的帖子尝试了神奇的修复 - 所有咒语UITextView。仅在以编程方式创建视图时才需要这样做。

Answer 2

此博客文章详细介绍了如何使用纯自动布局方法将UIScrollView与Autolayout一起使用。请注意，博客文章中的所有约束都是通过故事板定义的。

帖子中的方法采用以下层次结构：

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

我想Container View将是您的UIDetailView，而内容视图将是UIDetailView中的任何UIView。

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

Answer 3

文档清楚地说明了如何执行此操作： 自动布局中的UIScrollView将始终调整自身大小以适应内容（UIDetailView）。

所以你必须像这样设置你的观点：

• UIView：有约束的位置。
• UIScrollView：绑定到带有约束的UIView。
• UIDetailView：设置大小（内在内容大小），最大限度地提高抗压性，将UIScrollView的top，bottom，leading和trailing约束手动设置为0。

Answer 4

我遇到了类似的问题，我在Interface Builder中使用纯Autolayout找到了类似于DJ S的相对简单的解决方案而没有任何代码。

对于概念验证，首先删除View Controller中的任何约束，如果看到它有效。

这是示例布局：

• 查看（我的UIViewController的主视图）

  • 滚动视图（UIScrollView）

    • 容器视图（UIView）

      • 内容视图（例如UIImageView）

一个。滚动视图宽度/高度应小于容器视图宽度/高度

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

℃。执行控制 - 将“容器视图”拖动到“滚动视图”并仅添加：

1. 领先的容器空间
2. 到容器的尾随空间

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

电子。运行应用程序和

Answer 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 - ＆gt; Main View添加了15 pt水平尾随/前导空格。为了使UITextView的宽度相对于屏幕宽度，我从Equal Widths添加了UITextView约束 - ＆gt; Main View并将值设置为-30（2 * 15 pt水平空间）。现在，UITextView的宽度将针对任何屏幕尺寸进行动态调整。

UIScrollView应该有Scrolling Enabled。 UITextView 不。