使用自适应布局和故事板在XCode6中实现ScrollView

时间:2014-11-02 23:02:34

标签: ios uiscrollview autolayout adaptive-ui

我的输入页面上的标签和按钮太长,无法放在任何iPhone的屏幕上。我想让用户垂直滚动以进行所有输入。

我想在故事板中进行布局。

我能找到的所有建议答案都是针对不同的情况:    - 按代码布局    - 内容是具有固有尺寸的图像    - 可以使用autolayout / xcode 5,但我无法为自适应布局和xcode6工作

在视觉上我正在谈论的是什么。黄色框是保存输入元素的视图。黑匣子代表了随时可以看到的东西。

Image of desired screen

根据我的研究,以下是我的尝试:

  1. 在主视图中添加了一个完全填充它的ScrollView。 (我认为这应该是黑色矩形。)
  2. 在scrollview中添加了一个View(用作内容容器)。 (黄色矩形)
  3. 添加了内容视图所需的元素。为了低于屏幕上可见的值,我拖动并扩展了视图,使其足够大以容纳所有内容。
  4. 添加了将内容视图固定到所有方面的滚动视图的约束。
  5. 添加了约束,使内容视图的宽度和高度与顶级视图相同。
  6. 为所有元素的宽度和高度添加约束,并从容器视图的两侧添加约束。
  7. 我在模拟器中得到的结果:只是可以适合原始屏幕尺寸的元素。

    任何人都可以帮助解决我认为必须是常见问题吗?

    感谢。

1 个答案:

答案 0 :(得分:4)

感谢hardik,我想我已经解决了这个问题。我所做的大部分工作都是正确的,但我错过了一系列关键约束(而且我还有一个我不需要或想要的额外限制。)

以下是我认为使用的方法以及使其起作用的最小限制条件。

  1. 在主视图中添加scrollview。滚动视图填满整个视图。
  2. 在scrollview中添加内容视图。根据需要展开它以添加内容(标签,按钮等)
  3. 添加将内容视图固定到所有方面的滚动视图的约束。
  4. 将内容视图的约束固定宽度添加到主视图的宽度 - 而不是scrollview的宽度。留下高度。 (高度限制是我不需要的额外位。)
  5. 添加将滚动视图固定到所有方面的主视图的约束。 (这是关键的补充。)
  6. 现在,您需要在内容视图中添加约束以布置内容。根据您的情况,这些明显不同。我需要有从顶部到底部以及从一侧到另一侧完全定义布局的约束。

    constraints