14

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

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

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

4

5 回答 5

12

故事板中带有自动布局的 UIScrollView 可以正常工作

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

以下是我在下面的示例中是如何做到的

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

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

换句话说，Apple 示例 Autolayout 指南为成功制定了一个简单的 3 点计划：

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

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

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

带有自动布局的 UIScrollView 示例

于 2014-01-20T13:49:22.053 回答
10

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

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

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/

于 2013-10-01T09:30:03.500 回答
6

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

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

  • UIView：有约束的位置。
  • UIScrollView：使用约束绑定到 UIView。
  • UIDetailView：设置大小（内在内容大小），最大抗压性，将 UIScrollView 的顶部、底部、前导和尾随约束手动设置为 0。
于 2013-10-01T09:22:02.210 回答
2

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

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

这是示例布局：

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

    • 滚动视图 (UIScrollView)

      • 容器视图 (UIView)

        • 内容视图（例如 UIImageView）

A. Scroll View 宽度/高度应小于 Container View 宽度/高度

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

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

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

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

E. 运行应用程序和

于 2013-12-08T20:44:36.077 回答
1

由于新的 iPhone 6 和 6+ 屏幕尺寸，我不得不对DJ S 的解决方案进行一些调整。

目标

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

意见

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

解决方案

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

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

于 2014-10-11T06:29:03.980 回答