三重嵌套UIScrollView分页问题 [英] Triple Nested UIScrollView paging issue

问题描述

Backstory


我有一个iPad应用，需要允许用户浏览图像组。每个组都在其自己的垂直UIScrollView（分页）中布局，因此用户可以向上和向下滑动以查看每个图像。每个组UIScrollViews都放在一个单独的（只有一个存在于应用程序中）外部水平UIScrollView（也是分页）。这很有用....我可以上下滑动以查看组中的图像并向左和向右滑动以转到下一组或上一组。

问题


当我需要为每个图像添加缩放时，问题就出现了。我通过将每个图像放在自己的UIScrollView中来实现这一点。当图像被缩放时，我可以平移图像，当我到达缩放图像的顶部或底部时，组的垂直UIScrollView页面按预期页面到下一个或上一个图像。不幸的是，当图像被缩放并且我平移到最左边或最右边时，外部水平滚动视图将不会翻页到下一组。

有没有比三重嵌套UIScrollView更好（更正确）的方法，还是可以以某种方式将触摸转发到外部水平滚动视图？

非常感谢任何帮助或建议。

解决方案

希望我不会太迟，但我想我有一个解决你问题的方法。

在这里你可以找到一个Xcode项目，展示你的滚动视图设置，你的问题和建议的解决方案： https://bitbucket.org/reydan/threescrollviews

基本上解决方案是向contentSize.width添加1个像素垂直滚动视图。当您平移到缩放图像的边缘时，这会强制垂直滚动视图滚动一点。它滚动一点，然后继续下一个垂直滚动视图。

如果你下载项目，你会看到我在 viewDidLoad 方法。在那里，我创建了一个包含3个垂直滚动视图的水平滚动视图，每个包含5个图像。实际上，每个图像都在滚动视图中封装，以实现每个图像的缩放。总共...三重嵌套滚动视图。

我还留下了一些彩色边框，以便我可以轻松地看到每个滚动视图如何滚动。

• magenta =水平scrollview


• white = vertical scrollview


• 蓝色=图像scrollview（包含图像并允许缩放的图像）


• 红色= UIImageView

你会看到我用值10标记每个图像scrollview。这用于的实现 - （UIView *）viewForZoomingInScrollView：（UIScrollView *） scrollView 委托方法，其中我返回 nil 除非事件来自其中一个图像滚动视图。

如果您对我所做的项目有任何疑问，请随时提出。

在结束，我想说这种浏览方式对我来说有点古怪，因为我有时会向不想要的方向滚动。通常我认为我垂直地弹动我的手指只是为了找到向左或向右滚动视图，因为它解释了我的一些微小的水平运动。

我发现水平和垂直移动分页启用的问题是滚动视图是方向锁定的，或者在我看来是这样。

编辑：

今天我已经对此问题进行了更多调查。这些是我的结论：

• 缩放不是问题，最里面的滚动视图中的内容比可见区域（您可以通过缩放或简单地初始化大于边界的内容大小来尝试此操作）。这样可以在最内部的滚动视图内进行平移，并完全改变触摸事件的行为。




• 滚动视图标记的反弹会影响平移的行为（拖动手势到达内容的边缘。如果 bounces = false ，那么您的平移手势将停在边缘，而不是将拖动事件转发到链上（因此不会滚动父滚动视图以显示其他图像）。如果 bounces = true 然后，当您到达边缘并继续拖动时，事件将被转发到父滚动视图，并且还将拖动该滚动视图。但是，我发现在弹跳时拖动可以减少大约50％的距离。这也发生在照片应用程序中。




• 如果您开始拖动，而最里面的scrollview位于内容的边缘，那么scrollview是智能的并且将转发父滚动视图的所有事件。




• 由于某种原因，三重嵌套滚动视图是有问题的，因为事件在最顶层和中间滚动视图之间不会被转发而在内部平移最里面的滚动视图。我不明白为什么。

我的内容大小为+1像素的解决方案，部分解决了问题。

编辑2013

男孩，这些滚动视图不属于这个世界： （

经过一年多的搜索（开玩笑......实际上是2天）我觉得我找到了一个优秀的三重嵌套滚动视图解决方案。
我在这里创建了一个测试项目：
https://github.com/reydanro/TripleNestedScrollViews

在应用程序内部，有一个开关可用于测试是否有修复。

<我在我的应用程序中使用的设置与这个问题有点不同。我有一个垂直页面滚动视图。在其中，我有多个水平分页滚动视图。
在一些水平滚动视图中我有另一个垂直分页scrollview。

没有修复，一旦你到达最里面的滚动视图的页面，你几乎停留在那里，因为垂直滚动手势不会被转发到最外面的滚动。

修复是您需要添加到最里面的滚动视图的自定义UIGestureRecognizer。此识别器跟踪触摸事件，如果它检测到contentArea之外的拖动，则它将暂时禁用其余的scrollview识别器。这是我发现使滚动视图将事件向上转发到链中的唯一方法

手势识别器代码非常粗糙，定制有限，但应该完成工作。目前我专注于我开发的应用程序，但将继续更新存储库。

PS：我还没有测试缩放会发生什么，但我认为没有理由说这种方法不适用（或适应工作）。

Backstory
I have an iPad app that needs to allow the user to navigate through groups of images. Each group is laid out in its own vertical UIScrollView (paged) so the user can swipe up and down down to see each image. Each of the group UIScrollViews is placed in a single (only one exists in the app) outer horizontal UIScrollView (also paged). This works great.... I can swipe up and down to view the images in a group and swipe left and right to go to the next or previous group.

Problem
The problem started when I needed to add zooming for each image. I accomplished this by placing each image inside its own UIScrollView. When the image is zoomed I can pan around the image and when I get to the top or the bottom of the zoomed image the group's vertical UIScrollView pages to the next or previous image as expected. Unfortunately the outer horizontal scrollview will not page to the next group when the image is zoomed and I pan to the leftmost or rightmost edge.

Is there a better(more correct) approach than triple nesting UIScrollViews or can I somehow forward touches to the outer horizontal scrollview?

Any help or suggestions would be greatly appreciated.

解决方案

hope i'm not too late but I think I have a solution for your problem.

Here you can find an Xcode project demonstrating the scrollview setup you have, your problem and the proposed solution: https://bitbucket.org/reydan/threescrollviews

Basically the solution was to add 1 pixel to the contentSize.width of the vertical scrollviews. This forces the vertical scrollview to scroll a little when you pan to the edge of the zoomed image. It scrolls a little and then continues to the next vertical scrollview.

If you download the project you will see that I've created some scrollviews in the viewDidLoad method. There, I create one horizontal scrollview containing 3 vertical scrollviews, each containing 5 images. Each image is actually incapsulated in a scrollview to enable per-image zooming. In total... triple nested scrollviews.

I've also left some colored borders so that I can easily see how each scrollview scrolls.

• the magenta = horizontal scrollview
• the white = vertical scrollview
• the blue = the image scrollview (the one that contains the image and allows for zooming)
• the red = the UIImageView

You will see that I've tagged each image scrollview with value 10. This is used in the implementation of - (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView delegate method where I return nil unless the event came from one of the image scrollviews.

If you have any questions about the project I made feel free to ask.

In the end, I would like to say that this browsing method is a little quirky for me as I sometimes scroll in the unwanted direction. Often I think I flick my finger vertically only to find the scrollview going left or right because it interpreted some tiny horizontal movement I had.

The problem I found with paging enabled for both horizontal and vertical movement is that the scrollviews are direction-locked, or so it seemed to me.

EDIT:

Today I've investigated the problem even more. These are my conclusions:

• it's not a problem with zooming, it's a problem with having larger content in the innermost scrollview than the visible area(you can try this by zooming or simply initializing the content size larger than the bounds). This enables panning inside the inner-most scrollview and completely changes the behaviour of the touch events.

• the bounce for a scrollview flag affects the behaviour of the panning(dragging) gesture when it reaches the edges of the content. If bounces=false then your panning gesture will stop at the edge, not forwarding the drag event up the chain (and thus not scrolling the parent scrollviews to show you other images). If bounces=true then, when you reach the edge and continue to drag the events will be forwarded to the parent scrollview and that scrollview will also be dragged. However, I've found that the dragging while bouncing reduces the distance dragged by aproximately 50%. This also happens in the Photos app.

• if you start the dragging while the innermost scrollview is at the edge of the content then the scrollview is smart and will forward all events to the parent scrollview.

• for some reason, triple nested scrollviews are problematic as the events are simply not forwarded between the topmost and middle scrollviews while panning inside the innermost scrollview. I have no idea why.

My solution with that +1 pixel to the content size, partially solves the problem.

EDIT 2013

Boy, these scrollviews are something out of this world :(

After more than a year of searching (just kidding... it was actually 2 days) I think I found a good elegant solution to the triple nested scrollviews. I created a test project here: https://github.com/reydanro/TripleNestedScrollViews

Inside the app, there is a switch which you can use to test with/without the fix.

The setup I am using in my app is a little different than this question. I have 1 vertical paged scrollview. Inside it, I have multiple horizontal paged scrollviews. Inside some of the horizontal scrollviews I have another vertical paged scrollview.

Without the fix, once you get to the page with the inner-most scrollview you are pretty much stuck there as the vertical scrolling gestures are not forwarded to the outer-most scroll.

The fix is a custom UIGestureRecognizer that you need to add to the inner-most scrollviews. This recognizer follows touch events and if it detects a drag beyond the contentArea, then it will temporarily disable the rest of the scrollview's recognizers. This is the only method I discovered to make the scrollview forward the events up the chain

The gesture recognizer code is very rough with limited customization but should get the job done. At the moment I am focused on the app I develop, but will continue to update the repository.

PS: I haven't tested what happens with zoom but I see no reason why this method should not work (or be adapted to work).

这篇关于三重嵌套UIScrollView分页问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！