我们经常会用到各种分栏，比如：
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，随意下载。
如果本文对你有用，给个👍吧，谢谢~
网友评论