仿京东首页的下拉刷新

2018-03-01 11:05:59来源:oschina作者:ouyangshen人点击

分享

上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1、京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标、搜索框,以及消息图标; 2、把整个页面往上拉,状态栏的背景色从透明变为深灰,同时工具栏的背景也从透明变为白色; 3、页面下拉到顶后,继续下拉会拉出带有“下拉刷新”字样的布局,此时松手则会触发页面的刷新动作; 上面第一点的状态栏和工具栏悬浮效果,都有对应的解决办法;第二点的状态栏和工具栏背景变更,也存在可行的解决方案。倒是第三点的下拉刷新,以及第二点的上拉监听,却不容易实现。 虽然Android提供了专门的下拉刷新布局SwipeRefreshLayout,但它并没有页面随手势下滚的效果。一些第三方的开源库如PullToRefresh、SmartRefreshLayout固然能让整体页面下滑,可是顶部的下拉布局很难个性化定制,至于状态栏、工具栏的背景色修改更是三不管。因此若想呈现完全仿照京东的下拉刷新特效,只能由开发者编写一个自定义的布局控件了。 自定义的下拉刷新布局,首先要能够区分是页面的正常下滚,还是拉伸头部要求刷新。二者之间的区别很简单,直觉上看就是判断当前页面是否拉到顶了。倘若还没拉到顶,继续下拉动作属于正常的页面滚动;倘若已经拉到顶了,继续下拉动作才会拉出头部提示刷新。所以此处得捕捉页面滚动到顶部的事件,相对应的则是页面滚动到底部的事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。正好ScrollView提供了滚动行为的变化方法onScrollChanged,通过重写该方法即可判断是否到达顶部或底部,重写后的代码片段如下所示:


protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
boolean isScrolledToTop;
boolean isScrolledToBottom;
if (getScrollY() == 0) {
// 下拉滚动到顶部
isScrolledToTop = true;
isScrolledToBottom = false;
} else if (getScrollY() + getHeight() - getPaddingTop() - getPaddingBottom() == getChildAt(0).getHeight()) {
// 上拉滚动到底部
isScrolledToBottom = true;
isScrolledToTop = false;
} else {
// 未拉到顶部,也未拉到底部
isScrolledToTop = false;
isScrolledToBottom = false;
}
if (mScrollListener != null) {
if (isScrolledToTop) {
// 触发下拉到顶部的事件
mScrollListener.onScrolledToTop();
} else if (isScrolledToBottom) {
// 触发上拉到底部的事件
mScrollListener.onScrolledToBottom();
}
}
}
private ScrollListener mScrollListener;
// 设置滚动监听器的实例
public void setScrollListener(ScrollListener listener) {
mScrollListener = listener;
}
// 定义一个滚动监听器,用于捕捉到达顶部和到达底部的事件
public interface ScrollListener {
void onScrolledToBottom();
void onScrolledToTop();
}

如此改造一番,只要页面Activity设置滚动视图的滚动监听器,就能经由onScrolledToTop方法判断当前页面是否拉到顶了。既然可以知晓到顶与否,同步变更状态栏和工具栏的背景色也是可行的了。下面是演示页面拉到顶部附件的两种效果图,其中左图为上拉页面使之整体上滑,此时状态栏的背景变灰、工具栏的背景变白;右图为下拉页面使之接近顶部,此时状态栏和工具栏的背景均恢复透明。




然而成功监听页面是否到达顶部或底部,仅仅解决了状态栏和工具栏的变色问题。因为页面到顶时继续下拉,ScrollView要怎么处理?一方面是整个页面已经拉到顶了,造成ScrollView已经无可再拉;另一方面,用户在京东首页看到的下拉头部,其实并不属于ScrollView管辖,即使ScrollView想拉这个头部兄弟一把,也只能有心无力。不管ScrollView是惊慌失措,还是不知所措,恰恰说明它是真正的束手无策了,为此还要一个和事佬来摆平下拉布局和滚动视图之间的纠纷。 这个和事佬必须是下拉布局和滚动视图的上级布局,考虑到下拉布局在上,而滚动视图在下,故它俩的上级布局继承线性布局LinearLayout比较合适。新的上层视图需要完成以下三项任务: 一、在下层视图的最前面自动添加一个下拉刷新头部,保证该下拉头部位于整个页面的最上方; 二、给前面自定义的滚动视图注册滚动监听器和触摸监听器,其中滚动监听器用于处理到达顶部/底部的事件,触摸监听器用于处理下拉过程中的持续位移。 三、重写触摸监听器接口需要实现的onTouch函数,这个是重中之重,因为该函数包含了所有的手势下拉跟踪处理。既要准确响应正常的下拉手势,也要避免误操作不属于下拉的手势,比如下面几种情况就得统筹考虑: 1、水平方向的左右滑动,不做额外处理; 2、垂直方向的向上拉动,不做额外处理; 3、下拉的时候,如果尚未拉到页面顶部,也不做额外处理; 4、拉到顶之后继续下拉,则隐藏工具栏的同时,还要让下拉头部跟着往下滑动; 5、下拉刷新过程中松开手势,判断下拉滚动的距离,距离太短则直接缩回头部、不进行页面刷新;只有距离足够长,才能触发页面刷新动作,等待刷新完毕再缩回头部。 现在有了新定义的下拉上层布局,搭配自定义的滚动视图,就能很方便地实现高仿京东首页的下拉刷新效果了。具体实现的首页布局模板如下所示:


android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">

android:id="@+id/pdrl_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

android:id="@+id/pdsv_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">







以上布局模板用到的PullDownRefreshLayout和PullDownScrollView,因为代码量较多,这里就不贴出来,有需要的朋友请留下邮箱,我单独发过去。运行改造后的测试App,下拉刷新的效果见下列组图,其中左图为正在下拉时的截图,右图为松开下拉、开始刷新之时的截图。



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台