Android-仿豌豆荚首页导航实现

1：结果图：

2: 实现思路：

2.1：UI层次框架：

如 图所示：最低层为RelativeLayout,第二层为ScrollView,第三层为顶部的祝导航栏。IndexNavigator是在 ScrollView层上，会跟着一块儿滑动。而MainNavigator则是一直呆在顶部。个人实现思路就是监听ScrollView的活动状况来调整 IndexNavigator的布局，让IndexNavigator和MainNavigator彻底重合。

2.2：有关ScrollView滑动的一些属性：

如图(一次滑动)所示：

ScrollView滑动的距离是滚动条上端到ScrollView顶部的距离，在这里我称呼为ScrollTop。一次用户滑动操做会触发不少次OnScrollChange事件，这也正是咱们能够在手指触碰屏幕的过程当中定义动画的基础事件，在这里咱们把一次ScrollView的滑动定义为内部触发的一次OnScrollChange事件，那么，一次滑动的距离就会和用户的滑动的速度有关，固然，ScrollView内部已经帮咱们处理好了最后的结果，咱们只须要在回调OnScrollChange方法里取出来就好了。

好， 让咱们一块儿先来研究一下OnScrollChange方法回调回来的回传参数究竟有哪些状况存在吧。这个方法是在ScrollView内部的一个 protected方法，所以咱们须要使用一个简单的类继承它，而后开放出来。这个很简单，就演示代码了，咱们重点研究这个方法的回传参数：onScrollChanged(int newLeft, int newTop, int oldLeft, int oldTop)

通过观察打印结果后分析，对于ScrollView滑动通过的一片小区域，一次滑动一共可能出现的状况有：

假 定咱们如今的方向为上下滑动，其中，绿色框能够理解为固定在屏幕中的一块区域，箭头为滑动方向，newTop为箭头的顶部到ScrollView顶部的距 离，oldTop为箭尾到ScrollView顶部的距离。那么一次滑动的状况可能出现的结果就如上图所示的六种状况之一。

2.3：动画分解

通 过观察豌豆荚的动画效果，我分解出来了这四个步骤的动画，在整个滑动过程当中，下面的导航栏其实和上面的主导航栏是两个不一样的View层，也就是对应上面 UI层图的IndexNavigator和MainNavigator部分，是经过使两者重合，而后以相同的垂直速度移动达到的效果。

1：字体消失：这里我经过改变TextView的TextColor值来实现。

2：移动View组件：其实就是改变每一个View的Margin或者Padding值来实现。

3：源码地址

第一次在gitbug上传代码：https://github.com/YeDaxia/WanDaoJiaIndex

---

博客原文：http://www.darcye.com/article/44558296