知乎分栏滑动效果实现--附Demo

2016-08-11 本文已影响1295人 0o冻僵的企鹅o0

我们经常会用到各种分栏，比如：

app store分栏

知乎分栏

第一张图是app store排行榜的分栏，它最普通的分栏，使用系统的UISegmentControl即可实现（是不是发现这个导航条很高，或者说UISegmentControl与导航条看起来是一个整体，我之前研究了一下，实现方法在这里：App Store 排行榜导航条实现）。

第二张图是知乎"通知"模块导航实现，用过知乎的小伙伴，如果细心的话会发现当左右滚动通知模块时，顶部的分段控件会发生如下变化：

分段控件的标题颜色变化，选中则为黑色，未选中则为灰色
标题底部有一根蓝色的条，选中那个标题，蓝色的条就会在哪个标题下面
蓝色的条在轻轻滑动页面时，蓝色的条也会跟随滑动，且带有过度效果
蓝色的条在跟随滑动时，长度也会随着文本的变化而变化，且带有过度效果

我们平时的实现，或者一些开源库的实现一般只是做到了前面两点，虽然功能都实现了，但是用起来却没有丝滑般的感受啊😄。所以强迫症的我就研究了一下如何实现后两点中提到的效果。

这里为了方便，我使用了一个分段控件的开源库：RKSwipeBetweenViewControllers。它很好的实现了前面两点功能，而且想要实现后两点的话直接修改它的代码也是非常方便的。

我们先看一下第三点的效果如何实现，我们需要在页面滚动时，蓝色的条跟随滚动，所以需要不停的变化蓝色条的坐标，因此关键代码在UIScollView的代理scrollViewDidScroll:中。
实现代码如下：

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat percentX = (scrollView.contentOffset.x - CGRectGetWidth(scrollView.frame)) / CGRectGetWidth(scrollView.frame);//往左滑动大于0，往右小于0(由于默认偏移320)
    NSLog(@"percentX:%f",percentX);
    
    NSInteger currentPageIndex = self.currentPageIndex;
    
    UIButton *curBtn = [[navigationView subviews] objectAtIndex:currentPageIndex];
    CGFloat centerxOfSelectionBar = curBtn.center.x + percentX*_titleWidth;
    selectionBar.center = CGPointMake(centerxOfSelectionBar, selectionBar.center.y);
}

首先说明一下，这里scrollview的contentOffset.x默认偏移了320（即屏幕宽，我用的iPhone SE，屏宽320）。切每切换一个页面，偏移都会被修改为320。
这里percentX是一个偏移度，绝对值小于或等于1。往左滑动大于0，往右小于0。
这里我是通过蓝色条的中心点来确定蓝色条的位置的，centerxOfSelectionBar是计算的蓝色条的中心。而_titleWidth是顶部标题按钮的宽度（这里标题是用的按钮，等宽）。

CGFloat centerxOfSelectionBar = curBtn.center.x + percentX*_titleWidth;

这行应该比较好理解，看下面这张图(不要夸我，我知道我画的好O(∩_∩)O谢谢)

0.jpeg

往左滑动时，蓝色条的中心由1滑动到2，1到2的间距正好是_titleWidth，所以1到2任意一点的x坐标就是1的x坐标加上偏移的量，即上面代码所示。

这样就实现了第三点的效果。

至于第四点中提到的效果，很明显也是在同一个代理中实现，实现如下：

    NSInteger currentPageIndex = self.currentPageIndex;

    UIButton *curBtn = [[navigationView subviews] objectAtIndex:currentPageIndex];

    NSInteger targetPage = percentX > 0 ? currentPageIndex+1:currentPageIndex-1;
    if (targetPage >= 0 && targetPage < _buttonText.count)
    {
        UIButton *targetBtn = [[navigationView subviews] objectAtIndex:targetPage];
        
        CGSize sizeOrigin = MB_TEXTSIZE(curBtn.currentTitle, [UIFont systemFontOfSize:FONT_SIZE_16]);
        CGFloat lengthOrigin = sizeOrigin.width;
        
        CGSize sizeTarget = MB_TEXTSIZE(targetBtn.currentTitle, [UIFont systemFontOfSize:FONT_SIZE_16]);
        CGFloat lengthTarget = sizeTarget.width;
        
        CGFloat selctionBarLength = lengthTarget + (lengthOrigin - lengthTarget)*(1-ABS(percentX));
        selectionBar.frame = CGRectMake(selectionBar.frame.origin.x, selectionBar.frame.origin.y, selctionBarLength, selectionBar.frame.size.height);
    }

MB_TEXTSIZE是MBProgress中定义的计算文字尺寸的宏定义，我直接拷过来用的。
上面的代码我想大部分应该都容易看明白，就只有下面这行有点麻烦：

CGFloat selctionBarLength = lengthTarget + (lengthOrigin - lengthTarget)*(1-ABS(percentX));

我来说明一下：

FullSizeRender.jpg

如上图所示，假设a位置的标题长度为a，b位置长度为b，由a滑动到b,L是目标长度，即最后停留位置蓝色条的长度：

如果a>b,L1 = b + (a - b)*(1-ABS(percentX))
如果b>a,L2 = b - (b - a)*(1-ABS(percentX))
对比一下会发现，L1 与 L2 是相等的，所以公式可以简化为

L = b - (b - a)*(1-ABS(percentX))

demo地址在这：SegmentControlDemo，随意下载。

如果本文对你有用，给个👍吧，谢谢~

知乎分栏滑动效果实现--附Demo

猜你喜欢

热点阅读