文档章节

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

叶大侠
 叶大侠
发布于 2014/12/20 17:59
字数 782
阅读 2259
收藏 94

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

© 著作权归作者所有

共有 人打赏支持
叶大侠

叶大侠

粉丝 57
博文 44
码字总数 67312
作品 5
广州
程序员
加载中

评论(6)

BensonZhengXb
BensonZhengXb
思路,但感觉还有优化空间,加油么么哒
J-Fla
J-Fla
一会儿看看
OTooo
OTooo
效果不错
blindcat
blindcat
83学习了
叶大侠
叶大侠

引用来自“mrxiexie”的评论

写的很用心,谢谢了,收藏之
感谢阅读
mrxiexie
mrxiexie
写的很用心,谢谢了,收藏之
android实例源码,渐变图像图片浏览高仿美团!

渐变颜色渐变文字渐变图像GradualshowcolorAndResourse 根据图片高度动态变化的ViewPager android Kotlin开发的一款超简单的图片浏览源码 android多种reveal动画效果 栗子——高仿美团首页分...

莫非有道
2017/11/08
0
0
关于微信的那点帖。。。。。。(各种实例)

照惯例发帖先吐槽一下:最近看到大家发防微信功能特别的多,所以就汇总了一下,看看大家还有什么其他方面的汇总需求,回复我噢,均可满足。。。。。 (ps:有些帖子由于主观、客观还有神马原因...

程序袁_绪龙
2015/04/01
0
0
android仿摩拜单车APP、炫酷RecyclerView、卡片滑动、仿饿了么点餐、自定义索引等源码

Android精选源码 Android自定义索引源码(http://www.apkbus.com/thread-599163-1-1.html) LayoutManager实现的卡片滑动(http://www.apkbus.com/thread-599396-1-1.html) android仿摩拜单车A......

逆鳞龙
05/22
0
0
Android项目-几种常见的应用架构

android两种Tab分页的方式:TabActivity和ActivityGroup http://www.apkbus.com/blog-70574-40942.html 1、单个Activity架构(推荐) 首页是Activity,里面页面为View 头部底部栏都是公用的,...

刘遇安
2014/08/28
0
0
android高仿抖音、点餐界面、天气项目、自定义view指示、爬取美女图片等源码

Android精选源码 一个爬取美女图片的app(http://www.apkbus.com/thread-600077-1-1.html) Android高仿抖音(http://www.apkbus.com/thread-600081-1-1.html) android一个可以上拉下滑的Ui效果......

逆鳞龙
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[MicroPython]STM32F407开发板驱动OLED液晶屏

1.实验目的 1.学习在PC机系统中扩展简单I/O 接口的方法。 2.进一步学习编制数据输出程序的设计方法。 3.学习 F407 Micropython开发板控制OLED显示字符。 2.所需元器件 F407 Micropython开发板...

bodasisiter
20分钟前
0
0
php require和include 相对路径一个有趣的坑

以前总是被教育,不要使用相对路径,这样性能比较差,但是相对路径的问题不仅仅是性能哦,看下面这里例子 这是项目结构 .├── main.php├── t│ ├── t1.php│ └── t2.php└─...

anoty
21分钟前
9
0
x64技术之SSDT_Hook

测试环境: 虚拟机: Windows 7 64bit 过PG工具 驱动加载工具 PCHunter64 系统自带的计算器和任务管理器等 实现思路: 实际思路与win32的思路一样.都是替换SSDT表里边的函数地址.不过微软被搞怕...

simpower
22分钟前
0
0
TreeMap源码分析,看了都说好

一、简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现。TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey、get、put 和 remove 操作,效率很...

Java小铺
32分钟前
0
0
协变、逆变

概念 假设 A、B表示类型 ≤ 表示继承关系 f<⋅>表示类型转换 若A ≤ B,则 A是B的子类,B是A的超类 协变、逆变 什么是型变?型变(type variance)允许对类型进行子类型转换。 为了下面讲解先...

obaniu
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部