文档章节

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

叶大侠
 叶大侠
发布于 2014/12/20 17:59
字数 782
阅读 2264
收藏 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
思路,但感觉还有优化空间,加油么么哒
金贞花
金贞花
一会儿看看
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

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
27
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部