文档章节

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

叶大侠
 叶大侠
发布于 2014/12/20 17:59
字数 782
阅读 2251
收藏 94
点赞 3
评论 6

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

© 著作权归作者所有

共有 人打赏支持
叶大侠

叶大侠

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

评论(6)

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

引用来自“mrxiexie”的评论

写的很用心,谢谢了,收藏之
感谢阅读
mrxiexie
mrxiexie
写的很用心,谢谢了,收藏之
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

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

android开发常用工具类、高仿客户端、附近厕所、验证码助手、相机图片处理等源码

Android精选源码 android开发过程经常要用的工具类源码(http://www.apkbus.com/thread-599826-1-1.html) Android类似QQ空间个人主页下拉头部放大的布局效果(http://www.apkbus.com/thread-5...

逆鳞龙 ⋅ 05/29 ⋅ 0

如何让你的app在后台被干掉后优雅的启动。

作为一名Android开发师,肯定在处理用户的体验上下一定的功夫。有这么一个场景,在用户用着你开发的app的时候,突然某个聊天工具来消息了,切换到聊天工具后长时间停留,并且可能做了一些你不...

她的梦z ⋅ 04/11 ⋅ 0

求安卓上架技术员

高薪寻找会制作安卓上架高手 主打360 豌豆荚 小米 应用宝 华为平台 有技术的请立即 寇 寇 详谈949 181 609

外蒙水手 ⋅ 02/21 ⋅ 0

tcgames无需安卓模拟器电脑玩手游连接黑屏、闪退、连接不上问题汇总

tcgames连接不上手机怎么办?tcgames连接电脑黑屏闪退如何解决?tcgames为什么一直显示正在连接中?tcgames是一款无需安卓模拟器也可以在电脑上玩手机游戏匹配手游服玩家的工具,部分玩家在使...

cdjiehua ⋅ 03/27 ⋅ 0

android蓝牙手柄、仿QQ看房、仿慕课网、数据库二维码框架等源码

Android精选源码 可自定义图片指示器并支持自定义Tab宽度的TabLayout源码(http://www.apkbus.com/thread-599243-1-1.html) android蓝牙控制手柄操作源码(http://www.apkbus.com/thread-59928...

逆鳞龙 ⋅ 05/15 ⋅ 0

仿微博App 才搭了个架子 仅做个人记录

才做了一点点。。。之所以写本文,是因为,架构搭的还算可以,个人记录下,哈哈 lib是我的代码库,micro blog是这个项目的东西 lib没有直接从我的Lib项目拷过来 原因:1.还用不上那么多 2.养成...

qq_36523667 ⋅ 04/18 ⋅ 0

Android P 导航栏变为两颗虚拟键,或支持原生手势操作

从目前的趋势来看,手机继续弱化按键将成为主流,技术支撑包括全面屏、屏下指纹,以后今后的屏下摄像头、传感器甚至是听筒等。 没有了按键,交互完全依赖屏幕,所以在iPhone X的iOS 11系统上...

局长 ⋅ 04/15 ⋅ 0

Android Studio 3.2新功能特性

android studio3.2预览版本已经发布了,下面这些功能在最新的版本已经提供,但可能尚未在测试版本中发布渠道中提供。 什么是新的助理 Android Studio 3.2有一个新的Assistant面板,可以通知您...

我就是马云飞 ⋅ 06/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 23分钟前 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 昨天 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 昨天 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 昨天 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部