MenuManage

主要实现类似新闻头部滚动标签与内容联动效果

描述

最近在做一个需求：要求顶部是有阴影部分的可滚动标签栏，内容是列表形式，且可以左右滚动，而且标签栏与内容的滚动具有联动效果。
笔者一开始想到的是scollView与scrollView联动，后来发现在细节点控制上比较难把握，由于项目需求，需要在初始化的时候，标签栏有一个内边距，一开始用scrollView设计的时候，这个内编剧死活无效，后来笔者想到了collectionView，用网上一个Grallery的库中自定义的layout，笔者套用到项目中，经过反复修改润色，目前已经比较贴合需求了

Simulator Screen Shot 2017年6月14日 20.24.36.png Simulator Screen Shot 2017年6月14日 20.24.45.png Simulator Screen Shot 2017年6月14日 20.24.53.png

如上面的几张图，在点击标签或者滚动顶部标签，以及滚动内容视图的时候，显示都会相应的发生变化，而且保证最终停止时中间的标签处于选中状态，理论上说起来很简单，在实现上，自己不动手是不晓得其中的猫腻的，对于这里的算法问题，下面给出简单的代码，详细的可以去我的github下载代码查看：

保证滚动结束的时候要展示的cell定位到collectionView中间位置，这一块主要是自定义layout中的这个方法：

/**
 * 在collectionView滑动停止之后collectionView的偏移量
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
    
    // 计算出最终显示的矩形框 遍历该矩形框中的cell相对中心线的间距选择最合适的cell进行调整
    CGRect currentRect;
    currentRect.origin.x = proposedContentOffset.x;
    currentRect.origin.y = 0;
    currentRect.size = CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height);
    
    // 获得对应rect中super已经计算好的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:currentRect];
    
    // 计算collectionView最中心点的x值
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    // 存放最小的间距值
    CGFloat minDelta = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attr in array) {
        
        if(ABS(minDelta) > ABS(attr.center.x - centerX)) {
            
            minDelta = attr.center.x - centerX;
        }
    }
    
    // 修改原有的偏移量
    proposedContentOffset.x += minDelta;
    
    return proposedContentOffset;
}

这样设置之后就可以实现cell到中间位置的效果了。

下面简要展示两者之间的联动效果，具体的可以下载源码查看

1.顶部标签栏的滚动方法及联动控制主要如下：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    
    [self updateScrollOffsetWith:indexPath.item];
    [self triggerTopItemRequestWith:indexPath.item];

}


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {

    [self updateScrollOffsetWith:(scrollView.contentOffset.x / self.itemWidth)];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    [self triggerTopItemRequestWith:(scrollView.contentOffset.x / self.itemWidth)];
}

触发此方法，回调，内容视图改变偏移量

- (void)triggerTopItemRequestWith:(int)itemIndex {

    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:itemIndex inSection:0];

    if (self.clickItemTop) {
        self.clickItemTop(indexPath.item);
      }

}

触发此方法，修改偏移量及其字体颜色大小设置

- (void)changeCollectionOffset:(int)itemIndex {

    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:itemIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
}

- (void)didChangeTagProperty:(int)itemIndex {
    
    
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:itemIndex inSection:0];
    
    if (self.currentIndexPath == indexPath) {
        return;
    }
    self.currentIndexPath = indexPath;
    
    [self.collectionView reloadData];
}

内容视图的滚动代理实现如下：

//self.containerScroll  标识是否是滚动内容视图引发的请求
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    self.containerScroll = YES;
   
}

//实现滚动到一半的时候带动标签栏改变
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    if (!self.containerScroll) {
        return;
    }
    //如果滚动到了半屏幕，就改变顶部的偏移量
    int index = scrollView.contentOffset.x / scrollView.frame.size.width;
    if (scrollView.contentOffset.x - index * scrollView.frame.size.width >= scrollView.frame.size.width * 0.5) {//表明是滑动到下一页，超过一半了
        [self.recommendTagView updateScrollOffsetWith:(scrollView.contentOffset.x / scrollView.frame.size.width + 1)];
    }
    
    if (index * scrollView.frame.size.width - scrollView.contentOffset.x  >= - scrollView.frame.size.width * 0.5) {
        [self.recommendTagView updateScrollOffsetWith:(scrollView.contentOffset.x / scrollView.frame.size.width)];
    }
    
}

//滚动结束才触发网络请求
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    int index = scrollView.contentOffset.x / kScreenW;
    //改变顶部的偏移量
    YGLog(@"第%d页内容",index);
    [self.recommendTagView updateScrollOffsetWith:index];
    [self.recommendTagView triggerTopItemRequestWith:index];
}

大致实现思路也就是这样，具体需求具体分析

ps:下面附带上我的GitHub源码，有感兴趣的伙伴们可以下载下来看下，有做的不好的地方，欢迎大家交流，共同进步，喜欢的同伴可以给个✨星星哦，谢谢
追加：经笔者测试发现在流畅度上有一定的欠缺，下面的介绍流畅度方面的提升弥补了这一缺点，有兴趣的同学可以前去查看哦