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