UIScrollView分页Autolayout&Storyboard

关于滚动视图有很多答案与自动布局和大量的滚动视图分页,但我找不到一个单一的东西,解决这两个问题。

我并不想做任何奇特的事情……只有7个全屏图像视图,我想用分页水平滚动,但为了简单起见(ha!),我决定尝试在故事板。

控制器被设置为自由forms,宽度为2240 (320*7) 。 然后,我将其设置为苹果公司为自动布局build议的方式。

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

scrollview对所有边都有0/0/0/0约束,就像UIView里面一样。

“启用寻呼”functionclosures时,performance非常好 – 与预期一致。 但是一旦我开启了Paging,滑动使得视图变得疯狂,滚动整个2240宽度,然后弹回,最终落在正确的页面上。

我知道我已经试过了,只是把它全部搞定了,然后以编程的方式进行,但是我的固执性想要弄明白。 这一定是可能的!

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

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

我使用的约束是Dummy UIView -> Parent UIView是无论我希望的分页滚动视图的大小, UIScrollView -> Dummy UIView是(0,0,0,0)四面八方。 这只是普通的自动布局的东西,它创build了一个虚拟的UIView,我想把scrollview和UIScrollView完全填充虚拟UIView

请参阅Apple的Technote for AutoLayout和UIScrollViews : https : //developer.apple.com/library/content/technotes/tn2154/_index.html

scrollview内的内容必须具有固有的大小。 它不能依靠scrollview来获得它的大小。

如TechNote所示,将Content View所有四边的约束条件设置为(0,0,0,0)。 确切的值并不重要,因为你所告诉的所有的UIScrollView是这是获取contentSize的视图。

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

因此,我们将Content UIView的高度设置为等于Dummy UIView高度,并将Content UIView的宽度设置为等于使用AutoLayout乘以Dummy UIView的宽度的页面数量。 (稍后将约束中的乘数更改为页数)。

现在像平常一样在Content UIView创build页面,并在UIScrollView上将Paging Enabled设置为yes,并使用AutoLayout在UIScrollView进行分页。

我已经在iOS 6,7和8testing过了。

更新:

这里是一个示例项目与此设置请求: https : //github.com/kostub/PagingScrollView

可以使用scrollView的大小来设置contentView的大小,与https://developer.apple.com/library/ios/technotes/tn2154/_index.html相反; 这是在iOS 8.2 beta 3中testing的。

请注意,我以编程的方式做到了这一点,但希望对某人有用。 层次是:

 root: UIView scrollView: UIScrollView contentView: UIView page0 page1 ... 
  1. 添加约束来定位scrollView相对于根和任何兄弟的scrollView。

  2. 附加contentView方面到它的超级视图(scrollView):“H:| [contentView] |”
    “V:| [内容查看] |”

  3. 将大小相等约束添加到contentView和scrollView; 这是与TN2154(它说“不依靠滚动视图来获得它们的大小”)相矛盾的部分:

    contentView.height == scrollView.height
    contentView.width == scrollView.width

注意:以上是编程实例化的高度约束的组成符号。

  1. 相对于他们的超级视图(contentView)排列页面; 我通过左/顶第一页到contentView左/顶,以及后面的页左/顶到上页右/顶。

感谢Koustub让我走上正确的轨道 – 他的解决scheme很有效,但是在一些摆弄的情况下我能够消除虚拟视图。

跟随使用Scroll Views在Interface Builder中使用内容构build分页UIScrollView。

我还build议使用Stack View作为你的UIScrollView的内容视图,因为它实质上可以减less布局的复杂性。

当您使用传统方法时,内容视图中的每个条目视图至less有5个约束

  • 导致以前进入
  • 顶到父母
  • 尾随到下一个条目
  • 底部到家长
  • 等宽滚动视图

堆栈视图自动排列其内容,因此每个条目应具有的唯一约束是“等宽滚动视图”

界面生成器 结果视图

检查这个项目https://github.com/eugenebrusov/ios-stack-paging-scroll查看堆栈视图的行动。