如何在UICollectionViewCell内部的UITableView之间(在UICollectionViewController内部)同步滚动

时间:2018-08-03 13:57:00

标签: ios swift uitableview uicollectionview

当前,我正在尝试同步嵌套在UICollectionViewCell内的UITableView之间的滚动

我的视图层次结构类似于:

  • UICollectionViewController
    • UICollectionView
      • UICollectionReusableView(标题视图)
      • UICollectionViewCell
        • UITableView
          • UITableViewCell

我想要实现的是一种类似于视图传呼机的效果,您可以在页面之间滑动,并且在垂直滚动时可以看到其余的视图。导航栏会正常响应。

我现在正在做的是获取contentOffset.y中的UITableView,并相应地更新UICollectionView的内容偏移量。

滚动表格视图时,我正在使用NSNotificationCenter通知父ViewController。

@objc private func didScroll(_ notification: NSNotification) {
   guard let userInfo = notification.userInfo as? [String: CGPoint] else { return }
   guard let offset = userInfo["offset"] else { return }

   let y = offset.y
   collectionView?.setContentOffset(CGPoint(x: 0, y: y), animated: false)
}

结果如下:

enter image description here

主要问题是:

  1. 您不能向左或向右滑动,因为内容偏移量x是静态的并且设置为0

  2. 这种视图会卷起来,看起来很糟糕

  3. 小故障

在尝试此操作之前,我的视图最终看起来像这样:

enter image description here

在这里您可以看到我描述的问题,该视图没有响应UITableView滚动。

  

因此,简而言之,我需要:

     

了解如何使UICollectionView滚动到与UICollectionViewCell内部的UITableView同步(并允许更改   内容偏移量。x)

1 个答案:

答案 0 :(得分:0)

我没有使用嵌套的UICollectionView / UITableView的方法,并且认为很难解决两个UIScrollView之间的滚动同步。这是另一种方法:保留一个ListView(UICollectionView或UITableView)并添加划动手势,以实现水平滚动以与另一个显示部分列表数据的ListView进行分页。分页后,刷新主ListView以显示新的类别数据。

1。自定义UICollectionViewLayout以偏移用于分页的单元格视图:

// CollectionViewPagingLayout.h
@interface UICollectionViewPagingLayout : UICollectionViewFlowLayout

@property (nonatomic, assign) NSInteger pagingSection;
@property (nonatomic, assign) CGPoint pagingOffset;

@end

// CollectionViewPagingLayout.m
// The new InvalidationContext contains new flag, invalidatedOffset, to indicates that it is just offset change and doesn't need full layout 
@interface UICollectionViewPagingLayoutInvalidationContext : UICollectionViewFlowLayoutInvalidationContext
@property (nonatomic, assign) BOOL invalidateOffset; // Paging Or Sticky

@end

@interface UICollectionViewPagingLayout()
{
    BOOL m_layoutInvalidated; // Should be initialized to NO
}

@end

@implementation UICollectionViewPagingLayoutInvalidationContext

@end
@implementation UICollectionViewPagingLayout
@synthesize pagingOffset = m_pagingOffset;
@synthesize pagingSection = m_pagingSection;

// Skip initialization here...

+ (Class)invalidationContextClass
{
    return [UICollectionViewPagingLayoutInvalidationContext class];
}

- (void)setPagingOffset:(CGPoint)pagingOffset
{
    m_pagingOffset = pagingOffset;
    [self invalidateOffset];
}

- (void)setPagingSection:(NSInteger)pagingSection
{
    m_pagingSection = pagingSection;
    [self invalidateOffset];
}

- (void)invalidateOffset
{
    UICollectionViewPagingLayoutInvalidationContext *context = (UICollectionViewPagingLayoutInvalidationContext *)[[[UICollectionViewPagingLayout invalidationContextClass] alloc] init];
    context.invalidateOffset = YES;
    [self invalidateLayoutWithContext:context];
}

- (void)prepareLayout
{
    if (m_layoutInvalidated)
    {
        [super prepareLayout];
        m_layoutInvalidated = NO;
    }
}

- (void)invalidateLayout
{
    m_layoutInvalidated = YES;
    [super invalidateLayout];   
}

- (void)invalidateLayoutWithContext:(UICollectionViewLayoutInvalidationContext *)context
{
    if ([context isKindOfClass:[UICollectionViewPagingLayout invalidationContextClass]])
    {
        UICollectionViewPagingLayoutInvalidationContext *pagingInvalidationContext = (UICollectionViewPagingLayoutInvalidationContext *)context;
        if (!pagingInvalidationContext.invalidateOffset)
        {
            // It is not caused by internal offset change, should call prepareLayout
            m_layoutInvalidated = YES;
        }
    }
    else
    {
        // It is not caused by offset change, should call prepareLayout
        m_layoutInvalidated = YES;
    }
    [super invalidateLayoutWithContext:context];
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray<UICollectionViewLayoutAttributes *> *layoutAttributesArray = [super layoutAttributesForElementsInRect:rect];

    // PagingOffset
    if (m_pagingSection != NSNotFound && !CGPointEqualToPoint(m_pagingOffset, CGPointZero))
    {
        for (UICollectionViewLayoutAttributes *layoutAttributes in layoutAttributesArray)
        {
            if (layoutAttributes.indexPath.section >= m_pagingSection)
            {
                layoutAttributes.frame = CGRectOffset(layoutAttributes.frame, m_pagingOffset.x, m_pagingOffset.y);
            }
        }
    }
    
    return layoutAttributesArray;
}

2。 PageingCollectionView类实现了手势:

// PagingCollectionView.h
// Define a protocol so that subclass can provide necessary information, such as current page, page size, the views for next page,
@protocol UIPagingCollectionViewDelegate<NSObject>
@optional

- (BOOL)collectionView:(nonnull UICollectionView *)collectionView pagingShouldBeginAtLocation:(CGPoint)location withTranslation:(CGPoint)translation andVelocity:(CGPoint)velocity onSection:(out NSInteger *_Nullable)section;
- (NSInteger)pageForSection:(NSInteger)section inPagingCollectionView:(nonnull UIPagingCollectionView *)pagingCollectionView;
- (NSInteger)pageSizeForSection:(NSInteger)section inPagingCollectionView:(nonnull UIPagingCollectionView *)pagingCollectionView;
- (nullable __kindof UIView *)pagingCollectionView:(nonnull UIPagingCollectionView *)pagingCollectionView viewForPage:(NSInteger)page;
- (void)collectionView:(nonnull UIPagingCollectionView *)pagingCollectionView pagingWithOffset:(CGPoint) offset decelerating:(BOOL)decelerating;
/ Notify subclass the paging action is completed, subclass should check if page is changed with necessary actions, for example, switch page on main collectionview, remove the collections on the left/right side, etc..
- (void)collectionView:(nonnull UIPagingCollectionView *)pagingCollectionView pagingEnded toNewPage:(NSInteger)page;

@end


@interface UIPagingCollectionView : UICollectionView

@property (nonatomic, weak, nullable) id <UIPagingCollectionViewDelegate> pagingDelegate;

- (void)enablePagingWithDirection:(UICollectionViewScrollDirection)direction;

@end

// PagingCollectionView.m
@interface UIPagingCollectionView() <UIGestureRecognizerDelegate>
{
    UIPanGestureRecognizer          *m_swipeGuestureRecognizer;
    UICollectionViewScrollDirection m_swipeDirection;   // Should provide a public property to update for subclass

    // subclass should has a strong reference and destroy it once pagination is completed and main collection finishes to load the data of new page
    __weak UIView                   *m_leftView;
    __weak UIView                   *m_rightView;
    CGRect                          m_originalLeftFrame;
    CGRect                          m_originalRightFrame;
}

@end

@implementation UIPagingCollectionView
@synthesize pagingDelegate = m_pagingDelegate;

- (void)enablePagingWithDirection:(UICollectionViewScrollDirection)direction
{
    if (nil == m_swipeGuestureRecognizer)
    {
        m_swipeGuestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
        m_swipeGuestureRecognizer.delegate = self;
        [self addGestureRecognizer:m_swipeGuestureRecognizer];
    }
    m_swipeDirection = direction;
}

- (void)offsetPagingViews:(CGPoint)offset
{
    if (nil != m_leftView)
    {
        m_leftView.frame = CGRectOffset(m_originalLeftFrame, offset.x, offset.y);
    }
    if (nil != m_rightView)
    {
        m_rightView.frame = CGRectOffset(m_originalRightFrame, offset.x, offset.y);
    }
}

- (void)handleSwipe:(UIGestureRecognizer *)gestureRecognizer
{
    if (gestureRecognizer == m_swipeGuestureRecognizer)
    {
        switch(m_swipeGuestureRecognizer.state)
        {
            case UIGestureRecognizerStateBegan:
            {
                CGPoint location =[m_swipeGuestureRecognizer locationInView:self];
                CGPoint translation =[m_swipeGuestureRecognizer translationInView:self];
                CGPoint velocity =[m_swipeGuestureRecognizer velocityInView:self];
                
                BOOL shouldBegin = NO;
                NSInteger section = NSNotFound;
                if ([self.pagingDelegate collectionView:self pagingShouldBeginAtLocation:location withTranslation:translation andVelocity:velocity onSection:&section])
                {
                    shouldBegin = YES;
                }

                if (shouldBegin)
                {
                    NSInteger page = [m_pagingDelegate pageForSection:section inPagingCollectionView:self];
                    NSInteger pageSize = [m_pagingDelegate pageSizeForSection:section inPagingCollectionView:self];
                    
                    // m_swipingContext.leftOrRight = (translation.x < 0);
                    BOOL leftOrRight = ((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (velocity.x < 0)) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (velocity.y < 0));
                    
                    // Check validation of newPage... 
                    
                    [self buildViewForNewPage:leftOrRight ? (page + 1) : (page - 1) withCurrentPage:page];
                    
                    CGPoint offset = (m_swipeDirection == UICollectionViewScrollDirectionHorizontal) ? CGPointMake(translation.x, 0) : CGPointMake(0, translation.y);
                    [self pagingWithOffset:offset decelerating:NO andBindingPagingViews:YES];
                    
                    // Add a flag to tell UIGestureRecognizerStateChanged and UIGestureRecognizerStateEnded that paging gesture is valid.
                }
            }
                break;
            case UIGestureRecognizerStateChanged:
            {
                if (/*the flag of paging gesture is valid*/)
                {
                    CGPoint translation = [m_swipeGuestureRecognizer translationInView:self];
                    
                    if (((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (translation.x == 0)) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (translation.y == 0)))
                    {
                        // NO Movement
                    }
                    else
                    {
                        BOOL leftOrRight = ((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (translation.x < 0)) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (translation.y < 0));
                        
                        [self buildViewForNewPage:leftOrRight ? (page + 1) : (page - 1) withCurrentPage:page];
                    }
                    
                    CGPoint offset = (m_swipeDirection == UICollectionViewScrollDirectionHorizontal) ? CGPointMake(translation.x, 0) : CGPointMake(0, translation.y);
                    [self pagingWithOffset:offset decelerating:NO andBindingPagingViews:YES];
                }
            }
                break;
            case UIGestureRecognizerStateEnded:
            {
                if (nil != m_pagingContext)
                {
                    CGPoint translation = [m_swipeGuestureRecognizer translationInView:self];
                    
                    CGPoint offset = (m_swipeDirection == UICollectionViewScrollDirectionHorizontal) ? CGPointMake(translation.x, 0) : CGPointMake(0, translation.y);
                    [self pagingWithOffset:offset decelerating:NO andBindingPagingViews:YES];
                    
                    if (((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (translation.x == 0)) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (translation.y == 0)))
                    {
                        // NO Movement, everything is as same as old, just notify subclass
                        [m_pagingDelegate collectionView:self pagingEnded toNewPage:page];
                        break;
                    }
                    
                    BOOL leftOrRight = ((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (translation.x < 0)) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (translation.y < 0));
                    
                    // Check (translation + sliding distance) is greater than half of size, if it is, start a sliding animation to complete the pagination and show new page
                    [m_pagingDelegate collectionView:self pagingEnded toNewPage:newPage];
                    // Otherwise, also start a sliding animation to move the current page to original position
                    [m_pagingDelegate collectionView:self pagingEnded toNewPage:page];
                }
            }
                break;
            default:
                break;
        }
    }
}

- (void)pagingWithOffset:(CGPoint)offset decelerating:(BOOL)decelerating andBindingPagingViews:(BOOL)bindingPagingViews
{   
    if ([m_pagingDelegate conformsToProtocol:@protocol(UIPagingCollectionViewDelegate)] && [m_pagingDelegate respondsToSelector:@selector(collectionView:pagingWithOffset:decelerating:)])
    {
        [self.pagingDelegate collectionView:self pagingWithOffset:offset decelerating:decelerating];
    }
    
    if (bindingPagingViews)
    {
        [UIView performWithoutAnimation:^{
            if (nil != self->m_leftView)
            {
                self->m_leftView.frame = CGRectOffset(self->m_originalLeftFrame, offset.x, offset.y);
            }
            if (nil != self->m_rightView)
            {
                self->m_rightView.frame = CGRectOffset(self->m_originalRightFrame, offset.x, offset.y);
            }
        }];
    }
}

- (void)buildViewForNewPage:(UIPagingContext *)newPage withCurrentPage:(NSInteger)page
{
    // newPage < page: draging dreiction is right
    // newPage > page: draging dreiction is left
    BOOL leftOrRight = newPage > page;
    UIView * __strong *pView = leftOrRight ? (&m_leftView) : (&m_rightView);
    if (nil != *pView)
    {
        return;
    }
    CGRect * pOriginalFrame = leftOrRight ? (&m_originalLeftFrame) : (&m_originalRightFrame);

    UIView *view = [self.pagingDelegate pagingCollectionView:self viewForPage:newPage];
    CGFloat xOffset = (m_swipeDirection == UICollectionViewScrollDirectionHorizontal) ? (pageContext.leftOrRight ? self.bounds.size.width : -self.bounds.size.width) : 0;
    CGFloat yOffset = (m_swipeDirection == UICollectionViewScrollDirectionHorizontal) ? 0 : (pageContext.leftOrRight ? self.bounds.size.height : -self.bounds.size.height);
    view.frame = CGRectOffset(view.frame, xOffset, yOffset);
    *pOriginalFrame = view.frame;

    *pView = view;
    
    [self addSubview:view];
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    if (gestureRecognizer == m_swipeGuestureRecognizer)
    {
        CGPoint location =[m_swipeGuestureRecognizer locationInView:self];
        CGPoint velocity =[m_swipeGuestureRecognizer velocityInView:self];
        CGPoint translation =[m_swipeGuestureRecognizer translationInView:self];
        
        BOOL shouldBegin = NO;
        NSInteger section = NSNotFound;
        // Check direction first
        if (((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (fabs(velocity.x) > fabs(velocity.y))) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (fabs(velocity.y) > fabs(velocity.x))))
        {
            if ([self.pagingDelegate collectionView:self pagingShouldBeginAtLocation:location withTranslation:translation andVelocity:velocity onSection:&section])
            {
                shouldBegin = YES;
            }
        }
        
        if (shouldBegin)
        {
            NSInteger page = [m_pagingDelegate pageForSection:section inPagingCollectionView:self];
            NSInteger pageSize = [m_pagingDelegate pageSizeForSection:section inPagingCollectionView:self];
            
            
            BOOL leftOrRight = ((m_swipeDirection == UICollectionViewScrollDirectionHorizontal) && (velocity.x < 0)) || ((m_swipeDirection == UICollectionViewScrollDirectionVertical) && (velocity.y < 0));
            
            [self buildViewForNewPage:leftOrRight ? (page + 1) : (page - 1) withCurrentPage:page];
        }
        
        return shouldBegin;
    }
    
    return [super gestureRecognizerShouldBegin:gestureRecognizer];
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:(nonnull UIGestureRecognizer *)otherGestureRecognizer
{
    if ((gestureRecognizer == m_swipeGuestureRecognizer) &&
        (otherGestureRecognizer == self.panGestureRecognizer))
    {
        return YES;
    }
    
    return NO;
}

@end

3。实现子类

然后,我们可以绕开嵌套UIScrollViews之间的滚动问题。完整的示例代码为here