【问题标题】:How do you use auto layout in a scroll view?如何在滚动视图中使用自动布局?
【发布时间】:2015-08-27 22:36:16
【问题描述】:

所以我在最新 Xcode 的视图控制器中使用了UIScrollView。我在滚动视图中有按钮。当我运行应用程序时,滚动视图消失了。谁能告诉我是什么原因造成的以及自动布局工具是如何工作的?

【问题讨论】:

  • 你设置了什么约束?
  • 我正在使用引脚约束,但主要是反复试验。您推荐的约束值是什么。
  • 你想让你的滚动视图只垂直滚动吗?
  • @user221259 我的回答对你有什么帮助?

标签: xcode swift ios8 uiscrollview autolayout


【解决方案1】:

按照这些步骤,

  1. 获取滚动视图并设置相对于父视图的约束(前导、尾随、顶部、底部)。并为其设置一些背景颜色,使其在运行时可见。

  2. 将 UIButton 放在滚动视图上,然后设置按钮(前导、尾随、顶部)相对于滚动视图的约束,并设置按钮的宽度和高度约束,以及一些背景按钮的颜色,以便在运行时可见。

注意:你的内容的层次应该是这样的—— -父视图 -滚动视图 -按钮

如果有什么不清楚的地方请告诉我。

谢谢。

【讨论】:

  • 领先尾随顶部是否有任何特定值?您如何添加“关于”的内容?
  • 将其设置为零,或者我需要显示步骤,如何设置约束。很乐意提供帮助。
  • 您可以在滚动视图本身设计视图,无需添加任何容器视图进行设计,按照我的步骤。请让我知道你是否按照我的步骤进行操作
  • 仅对于垂直滚动,您需要为按钮设置更多约束,只需设置“容器中水平居中”即可。相对于滚动视图进行设置。
  • 滚动视图不允许我设置约束,当我尝试检查约束框时,它们没有响应。
【解决方案2】:

这是使用自动布局设置滚动视图的方法。

  1. 拖出一个滚动视图并将其添加到您的 ViewController。将其边缘固定到其 superView 的边缘。

  2. 拖出一个新的 UIView 并将其放入您的滚动视图中。这将作为 scrollView 的 contentView,它是 scrollView 中唯一的顶级视图。将其所有四个边缘固定到滚动视图的边缘。注意:这不会设置scrollView的内容大小。

  3. 如果您希望scrollView 只垂直滚动,请将contentView 的宽度设置为scrollView 的宽度。为此,请转到 Document Outline Viewcontrol - 从 contentView 拖动到 scrollView 并从弹出窗口中选择 Equal Widths

  4. 要设置内容视图的高度,您可以设置高度约束,然后将其高度更改为您想要的值。如果要滚动,该值需要大于 scrollView 的高度。另一种方法是确保您的 contentView 中的所有项目都具有高度限制并且都相互固定,并且最上面的项目被固定到 contentView 的顶部,而底部的项目被固定到contentView 的底部。如果你这样做,那么自动布局将能够为你计算 contentView 的高度。如果这个总高度大于 scrollView 的高度,那么你的 contentView 将会滚动。

  5. 最后,添加您的按钮。您现在可以在 contentView 中水平居中按钮,因为您在第 3 步中建立了 contentView 的宽度。

【讨论】:

  • 我一直在滚动视图上直接放置按钮。这是不正确的吗?这会使按钮在不同的屏幕尺寸上适当缩放吗?
  • 应用约束后滚动视图消失。没有内容出现,也没有滚动。
【解决方案3】:

希望这对其他人也有帮助

  1. 当您使用 autoLayout 使用 scrollView 时,视图层次结构应该是这样的

一个包含滚动视图的视图(View1)和一个包含在滚动视图内部的视图(View2)。

现在为 View1

设置约束

是的,从四面八方固定。

对 scrollView 以及执行相同的步骤 查看2 , 现在它会给出类似 scrollable content size Ambiguity

的警告

现在,最重要 步骤是按住CTRL并从View2拖动到View1,滚动向下弹出并选择等宽

现在它会给你一个雄心勃勃的滚动视图高度的警告,但是当你给内部元素(在 View1 内)提供 适当的约束 时,它也会消失。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多