一款滚动菜单的实现

2016-10-11 本文已影响1843人桃妲

滚动菜单是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

一款滚动菜单的实现

需求分析

实现

猜你喜欢

热点阅读