UIScrollView 分页自动布局 &故事板 [英] UIScrollView Paging Autolayout & Storyboard

问题描述

关于带有自动布局的滚动视图和滚动视图分页有很多答案，但我找不到一个可以同时解决这两个问题的东西.

There are plenty of answers regarding scroll views with autolayout and plenty about scrollview paging, but I can't find a single thing that addresses both.

我不想做任何花哨的事情...只是 7 全屏图像视图，我想通过分页水平滚动，但为了简单起见(哈！)，我决定在故事板中尝试一下.

I'm not trying to do anything fancy...just 7 full-screen image views that I would like to scroll horizontally with paging, but for the sake of simplicity (ha!), I decided to attempt it all right in the storyboard.

控制器设置为自由形状尺寸，宽度为 2240 (320*7).然后我按照 Apple 建议的自动布局方式进行设置...

The controller is set to freeform size with a width of 2240 (320*7). I then set it up the way Apple suggests for autolayout...

UIScrollview
/-----UIView
/----------Content (7 image views)

滚动视图对所有边缘都有 0/0/0/0 约束，内部的 UIView 也是如此.

The scrollview has 0/0/0/0 constraints to all edges, as does the UIView inside.

当 Paging Enabled 关闭时，它的表现非常好 - 完全符合预期.但是一旦我打开分页，滑动会使视图变得疯狂，滚动整个 2240 宽度，然后弹回并最终到达正确的页面.

When Paging Enabled is off, it behaves beautifully - exactly as expected. But once I turn Paging on, a swipe makes the view go crazy, scrolling the entire 2240 width, and then bouncing back and eventually landing on the proper page.

我知道我有一个久经考验的选择，那就是把它全部废弃并以编程方式进行，但我的固执想弄清楚这一点.一定有可能！

I know I have the tried-and-true option of just scrapping it all and doing it programmatically, but my stubbornness wants to figure this out. It must be possible!

推荐答案

我有一个带有分页和 AutoLayout 的 UIScrollView 工作得很好.这是我的设置:

I have a UIScrollView with paging and AutoLayout working perfectly fine. Here is my set up:

UIView  // Main view
|---> Dummy UIView   // See below
      |---> UIScrollView
            |---> Content UIView
                  |---> Page 1 Container
                  |---> Page 2 Container

我使用的约束是虚拟 UIView ->Parent UIView 是我想要的分页滚动视图的大小，而 UIScrollView ->虚拟 UIView 在所有方面都是 (0,0,0,0).这只是常规的自动布局的东西，它创建了一个我想要放置滚动视图的虚拟 UIView 和一个完全填充虚拟 UIView 的 UIScrollView.

The constraints I used are Dummy UIView -> Parent UIView is whatever I want the size of the paging scrollview to be, and UIScrollView -> Dummy UIView is (0,0,0,0) on all sides. This is just regular auto layout stuff which creates a dummy UIView where I want to put the scrollview and a UIScrollView which completely fills the dummy UIView.

有关 AutoLayout 和 UIScrollViews，请参阅 Apple 的技术说明:https://developer.apple.com/library/content/technotes/tn2154/_index.html

Refer to the Technote from Apple for AutoLayout and UIScrollViews: https://developer.apple.com/library/content/technotes/tn2154/_index.html

滚动视图内的内容必须具有固有大小.它不能依赖滚动视图来获取它的大小.

如技术说明中所述，将 Content View 到 UIScrollView 的所有四个边的约束设置为 (0,0,0,0).确切的值并不重要，因为您告诉 UIScrollView 的只是这是从中获取 contentSize 的视图.

As indicated in the TechNote, set the constraints from all four sides of the Content View to the UIScrollView to (0,0,0,0). The exact values don't really matter since all you are telling the UIScrollView is that this is the view to get the contentSize from.

此时 Xcode 会抱怨 Content View 没有固有大小.诀窍是:这就是我们使用上面创建的 Dummy UIView 的地方.Dummy UIView 的大小正好是UIScrollView 中每一页的大小.

At this point Xcode will complain that Content View has no intrinsic size. And here is the trick: This is where we use the Dummy UIView that we created above. The size of the Dummy UIView is precisely the size of each page in the UIScrollView.

所以我们设置Content UIView的高度等于Dummy UIView的高度，Content UIView的宽度等于pages 乘以使用 AutoLayout 的 Dummy UIView 的宽度.(为了后面将约束中的乘数更改为页数).

So we set the height of Content UIView equal to height of Dummy UIView and the width of the Content UIView equal to the number of pages times the width of the Dummy UIView using AutoLayout. (For the later change the multiplier in the constraint to be the number of pages).

现在像往常一样在 Content UIView 中创建页面，并在 UIScrollView 上将 Paging Enabled 设置为 yes，瞧，你已经分页了使用 AutoLayout 的 UIScrollView.

Now create pages inside the Content UIView as you normally would and set Paging Enabled to yes on your UIScrollView and voila you have paging in a UIScrollView using AutoLayout.

我已经在 IOS 6、7 和8.

I've tested this in IOS 6, 7 & 8.

更新:

这是一个按照要求设置的示例项目:https://github.com/kostub/PagingScrollView

Here is a sample project with this setup as requested: https://github.com/kostub/PagingScrollView

这篇关于UIScrollView 分页自动布局 &故事板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！