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

为什么80%的码农都做不了架构师？>>>   

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

转载于:https://my.oschina.net/daxia/blog/358377