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 ...
-
添加约束来定位scrollView相对于根和任何兄弟的scrollView。
-
附加contentView方面到它的超级视图(scrollView):“H:| [contentView] |”
“V:| [内容查看] |” -
将大小相等约束添加到contentView和scrollView; 这是与TN2154(它说“不依靠滚动视图来获得它们的大小”)相矛盾的部分:
contentView.height == scrollView.height
contentView.width == scrollView.width
注意:以上是编程实例化的高度约束的组成符号。
- 相对于他们的超级视图(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查看堆栈视图的行动。