滚动菜单是app展示数据常用的控件，使用频率极高，实现的过程就是对UIScrollView的应用，大体都是顶部一个标题滚动视图，下边一个用来铺显示数据的View的滚动视图，然后实现联动效果，基本差不多了。
需求分析
- 从笔者安装的应用上观察，大体要实现功能标题下划线自适应，菜单的半透明，左右的不同按钮（参考优酷，网易云音乐）。
屏幕快照 2016-10-11 10.31.31.png
屏幕快照 2016-10-11 10.26.41.png
屏幕快照 2016-10-11 10.26.53.png
实现
-
总思想
将标题视图，展示数据的视图放到一个View 上,View 来管理不同的子视图的滑动，子视图由各自的控制管理，要做的就是封装好这个视图，名字就叫HYPageView。
屏幕快照 2016-10-11 10.53.26.png
简单的说就是把控制器的View放到scrollView,滑到某一页，就加载某一页的控制器，并且将控制器的View放到这一页。需要注意的是，创建的控制器必需要强引用，因为局部变量会导致"控制器死掉"造成控制器里边所有事件无法响应，比如tabView没有Cell，Button点上去没反应等等，都是因为控制器从内存释放了。
- 下划线自适应
HYPageView00.gif
就是一边滑，一边动，根据当前滑动的位置改变线条的位置，线条的长度也总是趋于下一个位置的长度，这种很细节的东西吸引了笔者，如何实现呢？
需要计算两点位置，长度；
- 方法1(坑)
首先想到是 计算相对偏移量，我们总是能知道当前位置和下一个位置，只要计算线条位置相对与手指拖拽的位置的偏移量，通过加减就可以算出准确的位置，线条的长度一个道理。感觉有点麻烦，但我尝试的这么做了。
在UIScrollViewDelegate 里的scrollViewDidScroll 方法中算出并记录每一次偏移量，然后累计到下划线上，结果是效果差不多。但总是有误差，误差的原因是误差累计，与越界，前者是在计算的过程精度的丢失，多次累加产生的误差，后者是在滑动的过程，结束的位置不会保证是下一个位置的结束点，我也尝试的修复这种误差，但滑的越快误差就越大。然后我就尝试寻找更好的方法。
找到了一个例子，和方法1的坑一毛一样
传送门👉快速集成App中顶部标题滚动条
反例1.gif
越来长的原因：可能是越界的问题，从图中可以看出，在返回自身位置时是一个累减的过程，而返回的最后一段距离终点不一定恰好是零界点，这段长度可能没有减去，拖着不放，误差越来越大。从图中也可以看出作者在结束滚动时对线条进行了校正。
- 方法2
想要精确无误，就想到了利用数学的知识来解决，通过观察想到了contentOffset 的值与线条点的位置唯一对应，也就是说线条点的位置是关于contentOffset的一个函数，不难发现就是一个分段函数，而且每一段都是一个 一次函数 形如y=kx+b 这里x 是 contentOffset ，y 是 线条的点或长度，写一个方法，传入contentOffset返回点的位置或线条的宽度，显然要一组k与b，而k 与 b 在 构造标题位置的就可以计算出来 k = △y/△x ，得到k后b也可以得到。
然后在- (void)scrollViewDidScroll:(UIScrollView *)scrollView;方法里只有两行代码
_lineBottom.center = CGPointMake([self getTitleWidth:scrollView.contentOffset.x], _lineBottom.center.y);
_lineBottom.bounds = CGRectMake(0, 0, [self getTitlePoint:scrollView.contentOffset.x], LINEBOTTOM_HEIGHT);
计算的代码
#pragma mark - Calculation Method
- (CGFloat)getTitleWidth:(CGFloat)offset{
NSInteger index = (NSInteger)(offset / _selfFrame.size.width);
CGFloat k = [_width_k_array[index] floatValue];
CGFloat b = [_width_b_array[index] floatValue];
CGFloat x = offset;
return k * x + b;
}
- (CGFloat)getTitlePoint:(CGFloat)offset{
NSInteger index = (NSInteger)(offset / _selfFrame.size.width);
CGFloat k = [_point_k_array[index] floatValue];
CGFloat b = [_point_b_array[index] floatValue];
CGFloat x = offset;
return k * x + b;
}
这样就达到完美的线条自适应效果如下：
HYPageView03.gif
HYPageView08.gif
-
菜单的半透明
菜单的半透明很简单，设置好ScrollView的contentInset和frame就好了，需要注意的是有navigationController时控制器的automaticallyAdjustsScrollViewInsets 属性 和 edgesForExtendedLayout属性在开启navigationBar 半透明效果时 navigationController会对 控制器的 contentInset 和 frame进行调整 以达到半透明效果。 -
左右的不同按钮
前边的步骤做好了这里也很简单，设计可以根据navigationBar 的左右item来设计。笔者直接添加Button然后重新计算顶部菜单滚动视图的宽，效果如下：
HYPageView05.gif
HYPageView06.gif
- 接口的设计
/**
Initializes and returns a newly allocated view object with the specified frame rectangle.
@param frame ...
@param titles Some title
@param controllers Name of some controllers
@param parameters You need to set a property called "parameter" for your controller to receive.
@return self
*/
- (instancetype)initWithFrame:(CGRect)frame withTitles:(NSArray *)titles withViewControllers:(NSArray *)controllers withParameters:(NSArray *)parameters;
```
frame，titles 不用说，controllers是传控制器的名称，这样可以在需要的时候再创建控制器，parameters是要给控制器传的参数，传递的方式是KVC,当然传递的时候需要检查参数是否存在，控制器是否有parameters参数，具体实现可以看demo。
https://github.com/runlhy/HYPageView