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

jopen 10年前

1:结果图:

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

2: 实现思路:

2.1:UI层次框架:

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

如 图所示:最低层为RelativeLayout,第二层为ScrollView,第三层为顶部的祝导航栏。IndexNavigator是在 ScrollView层上,会跟着一起滑动。而MainNavigator则是一直呆在顶部。我的实现思路就是监听ScrollView的活动情况来调整 IndexNavigator的布局,让IndexNavigator和MainNavigator完全重合。

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

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

如图(一次滑动)所示:

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

好, 让我们一起先来研究一下OnScrollChange方法回调回来的回传参数究竟有哪些情况存在吧。这个方法是在ScrollView内部的一个 protected方法,因此我们需要使用一个简单的类继承它,然后开放出来。这个很简单,就演示代码了,我们重点研究这个方法的回传参数:onScrollChanged(int newLeft, int newTop, int oldLeft, int oldTop)

经过观察打印结果后分析,对于ScrollView滑动经过的一片小区域,一次滑动一共可能出现的情况有:

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

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

2.3:动画分解

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

通 过观察豌豆荚的动画效果,我分解出来了这四个步骤的动画,在整个滑动过程中,下面的导航栏其实和上面的主导航栏是两个不同的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