关于带有自动布局的滚动视图和滚动视图分页有很多答案,但我找不到一个可以同时解决这两个问题的东西.
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 分页自动布局 &故事板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!