带有分页的 UIScrollView + 显示部分上一页/下一页 [英] UIScrollView with pagination + showing part of the previous/following pages

问题描述

我正在尝试创建一种类似于割绳子"游戏用于选择关卡包的游戏模式"菜单:

I'm trying to create a kind of a "game mode" menu similar to the one used by the "Cut the Rope" game to select the level pack:

我特别想要的是实现显示当前项目"(在本例中为2. Fabric Box"项目)加上一些前后项目(以确保用户知道滚动有更多可用模式)，启用分页(使滚动视图自动居中"在这些项目上).

What I want in particular is to achieve the same effect of showing the "current item" (in this case, the "2. Fabric Box" item) plus a bit of the previous and following items (to make sure the user is aware that there are more modes available by scrolling), with pagination enabled (to make the scroll view automatically "center" on these items).

对于启用分页的 UIScrollView 来说，这似乎是一项很自然的工作，但是从文档看来，分页发生在多个视图边界上.

This seems like a natural job for a UIScrollView with pagination enabled, however from the documentation it seems the pagination occurs on multiples of the view bounds.

那么:如果分页发生在多个视图边界上，有没有办法通过 UIScrollView 来实现这种效果?

So: if pagination occurs on multiples of the view bounds, is there any way to achieve this effect with a UIScrollView?

我们看到整个屏幕宽度的事实表明，在这种情况下 UIScrollView 框架的宽度将是 320 像素，但每个单独的项目都需要小于该宽度才能显示前一个和下一项，从而弄乱了分页...

The fact that we see the full width of the screen would suggest that the UIScrollView frame's width would be 320px in this case, but each individual item would need to be smaller than that in order to show that little bit of the previous and next items, thus messing up the pagination...

推荐答案

供您参考，您可以从此处查看页面控件的示例实现.https://developer.apple.com/library/content/samplecode/PageControl/Introduction/Intro.html

For your reference, you can see a sample implementation of a page control from here. https://developer.apple.com/library/content/samplecode/PageControl/Introduction/Intro.html

对于您想要的实现，令您惊讶的是，滚动视图的宽度实际上小于 320(或 480).要设置的魔法属性是:

For the implementation you want, to your surprise, the scrollview's width is actually smaller than 320 (or 480). The magic property to set is:

scrollView.clipsToBounds = NO

这个实现的唯一问题是，如果触摸超出了滚动视图的边界，滚动视图不会收到任何触摸事件.这可以通过将其父 hitTest 事件传递给 scrollView 来解决.

The only problem with this implementation is that the scrollview get no touch events if the touch is outside the bounds of the scrollView. This can be fix by passing its parent hitTest event to scrollView.

只是为了链接到更好的解释:UIScrollView水平分页，如移动Safari标签

Just to link to to a better explanation: UIScrollView horizontal paging like Mobile Safari tabs

与我推荐的略有不同，但作用相同.

Slightly different from what I recommend but does the same thing.

我有一个名为 LXPagingViews 的小项目，它可以执行上述操作，希望以开箱即用的方式(请给我一个拉取请求或问题反馈):https://github.com/lxcid/LXPagingViews

I have a small project called LXPagingViews that does the above, hopefully in an out of the box manner (Do drop me a pull request or feedback in issue): https://github.com/lxcid/LXPagingViews

这篇关于带有分页的 UIScrollView + 显示部分上一页/下一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！