在UIScrollView中嵌套的UICollectionView之间的连续垂直滚动 [英] Continuous vertical scrolling between UICollectionView nested in UIScrollView

问题描述

虽然我知道嵌套的scrollViews并不理想，但我们的设计师为我提供了这个设置，所以我尽力让它工作。让我们开始吧！

While I know nested scrollViews aren't ideal, our designers provided me with this setup, so I'm doing my best to make it work. Let's begin!

查看层次结构

• UIView
  
  
  
  • UIScrollView （仅垂直滚动）
    
    
    
    • UIImageView
    
    
    • UICollectionView＃1（仅水平滚动）
    
    
    • UIImageView（与以前的UIImageView不同）
    
    
    • UICollectionView＃2 （仅垂直滚动）
    
    
    • UIView
      • UIScrollView (Vertical Scrolling Only)
        • UIImageView
        • UICollectionView #1 (Horizontal Scrolling Only)
        • UIImageView (different from previous UIImageView)
        • UICollectionView #2 (Vertical Scrolling Only)

        重要提示

        我的所有视图都是使用程序化自动布局定义的。 UIScrollView的子视图层次结构中的每个连续视图都对前面的视图具有y坐标依赖关系。

        All my views are defined using programmatic Auto Layout. Each successive view in the UIScrollView's subview hierarchy has a y-coordinate dependency on the view that came before it.

        问题

        为了简单起见，让我们修改命名法a位：

        For the sake of simplicity, let's modify the nomenclature a bit:

        
        
        • _outerScrollView 将引用 UIScrollView
        
        
        • _innerScrollView 将引用 UICollectionView＃2
        
        
        • _outerScrollView will refer to UIScrollView
        • _innerScrollView will refer to UICollectionView #2

        我希望我的 _outerScrollView 将其触摸事件路由到<到达其contentSize的底部时code> _innerScrollView 。当我向后滚动时，我想反过来发生。

        I'd like for my _outerScrollView to route its touch event to the _innerScrollView upon reaching the bottom of its contentSize. I'd like the reverse to happen when I scroll back up.

        目前，我有以下代码：

        - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
        {
            CGFloat bottomEdge = [scrollView contentOffset].y + CGRectGetHeight(scrollView.frame);
            if (bottomEdge >= [_outerScrollView contentSize].height) {
                _outerScrollView.scrollEnabled = NO;
                _innerScrollView.scrollEnabled = YES;
            } else {
                _outerScrollView.scrollEnabled = YES;
                _innerScrollView.scrollEnabled = NO;
            }
        }
        

        其中初始条件（在任何滚动发生之前）是设置为：

        where the initial conditions (before any scrolling occurs) is set to:

        outerScrollView.scrollEnabled = YES;
        innerScrollView.scrollEnabled = NO;
        

        会发生什么？

        触摸视图时， outerScrollView 滚动到其下边缘，然后由于 _outerScrollView.bounces = YES而产生橡皮筋效果; 如果我再次触摸视图，则innerScrollView会滚动直到它触及其底边。在备份的过程中，相反的橡皮筋效果会以相反的顺序发生。我想要发生的是两个子视图之间的流畅运动。

        Upon touching the view, the outerScrollView scrolls until its bottom edge, and then has a rubber band effect due to _outerScrollView.bounces = YES; If I touch the view again, the innerScrollView scroll until it hits its bottom edge. On the way back up, the same rubber banding effect occurs in the reverse order. What I want to happen is have a fluid motion between the two subviews.

        显然，这是由于代码片段中条件设置的 scrollEnabled 条件造成的。我想弄清楚的是如何在击中边缘时将一个scrollView的速度/速度路由到下一个scrollView。

        Obviously, this is due to the scrollEnabled conditions that are set in the conditional in the code snippet. What I'm trying to figure out is how to route the speed/velocity of one scrollView to the next scrollView upon hitting an edge.

        此问题中的任何帮助都将是非常感谢。

        Any assistance in this issue would be greatly appreciated.

        其他笔记

        
        
        1. 这对我不起作用： https://github.com/ole/OLEContainerScrollView
        
        
        2. 我正在考虑在 UICollectionView＃2 <$中将所有内容放在UIScrollView层次结构中（ UICollectionView＃2 除外） C $ C> supplementaryView 。不确定这是否有效。
        
        
        1. This did not work for me: https://github.com/ole/OLEContainerScrollView
        2. I am considering putting everything in the UIScrollView hierarchy (except for UICollectionView #2) inside UICollectionView #2 supplementaryView. Not sure if that would work.

        
        

        推荐答案

        想出来！

        首先：

        _scrollView.pagingEnabled = YES;

        第二：

        - (void)scrollViewDidScroll:(UIScrollView *)scrollView
        {
            if (scrollView == _scrollView || scrollView == _offersCollectionView) {
        
                CGFloat offersCollectionViewPosition = _offersCollectionView.contentOffset.y;
                CGFloat scrollViewBottomEdge = [scrollView contentOffset].y + CGRectGetHeight(scrollView.frame);
        
                if (scrollViewBottomEdge >= [_scrollView contentSize].height) {
                    _scrollView.scrollEnabled = NO;
                    _offersCollectionView.scrollEnabled = YES;
                } else if (offersCollectionViewPosition <= 0.0f && [_offersCollectionView isScrollEnabled]) {
                    [_scrollView scrollRectToVisible:[_scrollView frame] animated:YES];
                    _scrollView.scrollEnabled = YES;
                    _offersCollectionView.scrollEnabled = NO;
                }
            }
        }
        

        其中：

        
        
        • _scrollView 是 _outerScrollView
        
        
        • _offersCollectionView 是 _innerScrollView （这是 UICollectionView＃ 2 在我的原帖中。）
        
        
        • _scrollView is the _outerScrollView
        • _offersCollectionView is the _innerScrollView (which was UICollectionView #2 in my original post).

        以下是现在发生的事情：

        Here's what happens now:

        
        
        • 当我向上滑动（因此视图向下移动）时， offersCollectionView 接管整个视图，移动视图外的其他子视图。
        
        
        • 如果我向下滑动（所以视图向上），其余的子视图将重新聚焦于scrollView的反弹效果。
        
        
        • When I swipe up (so the view moves down), the offersCollectionView takes over the entire view, moving the other subViews out of the view.
        • If I swipe down (so the views up), the rest of the subviews come back into focus with the scrollView's bounce effect.

        这篇关于在UIScrollView中嵌套的UICollectionView之间的连续垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！