使用uiscrollview水平滚动通过storyboard&自动布局

时间:2017-02-20 17:24:41

标签: ios uiview uiscrollview autolayout storyboard

我对这个问题感到非常密集,但我已经尝试了几种解决方案并且无法得出我想要的结果。我有2个UIViews,它们是一个更大的UIView的子视图,它是scrollView的子视图。这两个视图是登录&分别是注册屏幕,用户可以在它们之间滑动以适当地访问应用程序。但是由于某种原因,滚动视图不会在这两个视图之间水平滚动。我正在查看的示例使用的不是代码来实现这一点,而且我已经完全模仿了约束。这可能听起来很愚蠢但是有没有人对如何实现这种横向滚动有任何建议?

1 个答案:

答案 0 :(得分:2)

" 我有两个UIViews,它们是一个更大的UIView的子视图,它是scrollView的子视图"

好吧,让我们说在ContainerView(称为CV)中有Sub1和Sub2,它位于ScrollView(SV)中。

在Interface Builder中:

  • Sub1和Sub2均为300宽度
  • CV应为600宽,以保持Sub1和Sub2并排
  • SV宽度应为300 - 您将只看到Sub1

要使ScrollView滚动,其内容宽度必须大于其自己的宽度。如果将CV上的前导和尾随约束设置为相对于SV,则将定义内容宽度。

听起来像你的#34; ContainerView"约束设置为ScrollView

希望在这里有这些图片是好的......无论如何......

SV - ScrollView - 为蓝色

CV - 容器视图 - 粉红色

Sub1和Sub2为黄色

从滚动视图开始,300 x 300并向两个方向居中:

enter image description here

添加一个UIView - 这将是CV - 进入SV,在8,8,默认大小为240 x 128(我们将立即更改),并添加每个8的Leading和Top约束:

enter image description here

将CV的宽度和高度更改为600 x 120,并设置宽度和高度约束。现在,视图的一半延伸到右边,超出了SV的边缘:

enter image description here

在CV中添加两个子视图 - 对于演示,我使用了UILabels。将它们的宽度x高度设置为50 x 30,并将Sub1设置为8,8。

enter image description here

给出Sub1 Left,Top(8,8)以及Width和Height(50x30)约束。这将使它保持固定"在CV的左上角:

enter image description here

给出Sub2宽度和高度(50x30)约束,以及8,8的Bottom和Right / Trailing约束。当您设置了这些约束时,请点击"更新框架"按钮自动将Sub2标签移动到位 - "固定"到CV的右下角(不再在IB中查看):

enter image description here

现在真正的关键部分:给出每个8的CV右/尾随和下限约束。这是自动布局用于确定SV的ContentSize的内容。如果您运行该应用程序,您现在应该能够从Sub1水平滚动到Sub2。

enter image description here

假设已经全部工作,您可以调整CV的宽度和高度约束来查看它如何影响滚动。

此处的源代码:https://github.com/DonMag/ScrollViewConstraints

希望有所帮助:)