Android仿京东、天猫下拉刷新效果
程序员文章站
2023-12-12 23:24:46
说到下拉刷新，相信大家都不陌生，现在基本上每个项目都会用到。我们公司的项目一直都是使用swiperefreshlayout，官方的material design风格，好用少...
说到下拉刷新，相信大家都不陌生，现在基本上每个项目都会用到。我们公司的项目一直都是使用swiperefreshlayout，官方的material design风格，好用少bug。现在下拉刷新大概有下面几种实现方式：一种是直接包在listview或者recyclerview的头部，有的则是像swiperefreshlayout一样，包在视图的最外层，个人建议使用包在最外层的做法，可拓展性比较强。下面用包在最外层的方法实现京东和天猫的下拉刷新。
1.使用框架android-ultra-pull-to-refresh
https://github.com/liaohuqiu/android-ultra-pull-to-refresh
大家有兴趣的可以去看一下这个下拉刷新框架，可拓展性非常强，兼容各种view的下拉刷新事件。
2.京东下拉刷新
先看看京东的下拉刷新动画：
从上图可以看出，就是一个动画，当然截图有点卡，首先，我们解压手机京东的app，得到上面的图片：
先看看头部刷新的布局怎么实现：
jd_refresh_header_view.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <framelayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toleftof="@+id/layout_tx"> <imageview android:id="@+id/iv_man" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/a2a" /> <imageview android:id="@+id/iv_goods" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center" android:src="@drawable/a29" /> </framelayout> <linearlayout android:id="@+id/layout_tx" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:layout_marginleft="5dp" android:gravity="center_vertical" android:orientation="vertical" android:padding="5dp"> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="让购物更便捷" android:textsize="14sp" /> <textview android:id="@+id/tv_remain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="5dp" android:text="松开刷新" android:textsize="12sp" /> </linearlayout> </relativelayout>
咱们再看看android-ultra-pull-to-refresh这个框架：
package in.srain.cube.views.ptr;
import in.srain.cube.views.ptr.indicator.ptrindicator;
/**
*
*/
public interface ptruihandler {
/**
* when the content view has reached top and refresh has been completed, view will be reset.
*
* @param frame
*/
public void onuireset(ptrframelayout frame);
/**
* prepare for loading
*
* @param frame
*/
public void onuirefreshprepare(ptrframelayout frame);
/**
* perform refreshing ui
*/
public void onuirefreshbegin(ptrframelayout frame);
/**
* perform ui after refresh
*/
public void onuirefreshcomplete(ptrframelayout frame);
public void onuipositionchange(ptrframelayout frame, boolean isundertouch, byte status, ptrindicator ptrindicator);
}
这是一个下拉刷新事件处理接口，包括准备刷新，开始刷新，刷新完成和刷新改变等事件的处理，直接上代码：
jdrefreshheader.java
package com.jackie.pulltorefresh.jd;
import android.content.context;
import android.graphics.drawable.animationdrawable;
import android.util.attributeset;
import android.view.layoutinflater;
import android.view.view;
import android.widget.framelayout;
import android.widget.imageview;
import android.widget.textview;
import com.jackie.pulltorefresh.r;
import in.srain.cube.views.ptr.ptrframelayout;
import in.srain.cube.views.ptr.ptruihandler;
import in.srain.cube.views.ptr.indicator.ptrindicator;
/**
* 下拉刷新headerview
*/
public class jdrefreshheader extends framelayout implements ptruihandler {
/**
* 提醒文本
*/
private textview mtvremind;
/**
* 快递员logo
*/
private imageview mivman;
/**
* 商品logo
*/
private imageview mivgoods;
/**
* 状态识别
*/
private int mstate;
/**
* 重置
* 准备刷新
* 开始刷新
* 结束刷新
*/
public static final int state_reset = -1;
public static final int state_prepare = 0;
public static final int state_begin = 1;
public static final int state_finish = 2;
public static final int margin_right = 100;
/**
* 动画
*/
private animationdrawable manimationdrawable;
public jdrefreshheader(context context) {
this(context, null);
}
public jdrefreshheader(context context, attributeset attrs) {
this(context, attrs, 0);
}
public jdrefreshheader(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
initview();
}
/**
* 初始化view
*/
private void initview() {
view view = layoutinflater.from(getcontext()).inflate(r.layout.jd_refresh_header_view, this, false);
mtvremind = (textview) view.findviewbyid(r.id.tv_remain);
mivman = (imageview) view.findviewbyid(r.id.iv_man);
mivgoods = (imageview) view.findviewbyid(r.id.iv_goods);
addview(view);
}
@override
public void onuireset(ptrframelayout frame) {
mstate = state_reset;
}
@override
public void onuirefreshprepare(ptrframelayout frame) {
mstate = state_prepare;
}
@override
public void onuirefreshbegin(ptrframelayout frame) {
mstate = state_begin;
//隐藏商品logo,开启跑步动画
mivgoods.setvisibility(view.gone);
mivman.setbackgroundresource(r.drawable.runningman);
manimationdrawable = (animationdrawable) mivman.getbackground();
if (!manimationdrawable.isrunning()) {
manimationdrawable.start();
}
}
@override
public void onuirefreshcomplete(ptrframelayout frame) {
mstate = state_finish;
mivgoods.setvisibility(view.visible);
//停止动画
if (manimationdrawable.isrunning()) {
manimationdrawable.stop();
}
mivman.setbackgroundresource(r.drawable.a2a);
}
@override
public void onuipositionchange(ptrframelayout frame, boolean isundertouch, byte status, ptrindicator ptrindicator) {
//处理提醒字体
switch (mstate) {
case state_prepare:
//logo设置
mivman.setalpha(ptrindicator.getcurrentpercent());
mivgoods.setalpha(ptrindicator.getcurrentpercent());
layoutparams params = (layoutparams) mivman.getlayoutparams();
if (ptrindicator.getcurrentpercent() <= 1) {
mivman.setscalex(ptrindicator.getcurrentpercent());
mivman.setscaley(ptrindicator.getcurrentpercent());
mivgoods.setscalex(ptrindicator.getcurrentpercent());
mivgoods.setscaley(ptrindicator.getcurrentpercent());
int marginright = (int) (margin_right - margin_right * ptrindicator.getcurrentpercent());
params.setmargins(0, 0, marginright, 0);
mivman.setlayoutparams(params);
}
if (ptrindicator.getcurrentpercent() < 1.2) {
mtvremind.settext("下拉刷新...");
} else {
mtvremind.settext("松开刷新...");
}
break;
case state_begin:
mtvremind.settext("更新中...");
break;
case state_finish:
mtvremind.settext("加载完成...");
break;
}
}
}
创建一个成员变量mstate，用于保存下拉刷新的时候，每一个状态，然后根据保存好的状态在uipositionchange的接口中，对ui进行相应的修改，保存每个状态文本的提示，在下拉的过程中，通过uipositionchange的回调，获取ptrindicator中，可以获取下拉的百分比，根据这个百分比我们可以做很多东西，例如京东的快递小哥从远处跑过来拿商品，以及快递小哥与商品之间的大小，都可以根据这个ptrindicator百分比进行设置其大小的比例，跑过来这个过程我使用的方法是利用marginright进行设置两者之间的距离，当达到下拉刷新的临界点时，快递小哥跟商品之间的margin为0，达到了快递小哥获取商品的效果，然后当刷新的时候，隐藏商品，使用之前所提供的三张图片进行效应的切换，也就是动画：
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/a2b" android:duration="70" /> <item android:drawable="@drawable/a2c" android:duration="70" /> <item android:drawable="@drawable/a2d" android:duration="70" /> </animation-list>
效果图如下：
3.天猫下拉刷新
天猫的更简单，毫无动画可言，说白了就是个gif，大家可以去下载个apk，解压后能得到其gif。原理跟之前的是一样，但这里我使用的是fresco进行加载gif，方法有很多，大家感兴趣的可以去试试。
tmallrefreshheader.java
package com.jackie.pulltorefresh.tmall;
import android.content.context;
import android.net.uri;
import android.util.attributeset;
import android.view.layoutinflater;
import android.view.view;
import android.widget.framelayout;
import android.widget.textview;
import com.facebook.drawee.backends.pipeline.fresco;
import com.facebook.drawee.interfaces.draweecontroller;
import com.facebook.drawee.view.simpledraweeview;
import com.jackie.pulltorefresh.r;
import in.srain.cube.views.ptr.ptrframelayout;
import in.srain.cube.views.ptr.ptruihandler;
import in.srain.cube.views.ptr.indicator.ptrindicator;
/**
* 下拉刷新headerview
*/
public class tmallrefreshheader extends framelayout implements ptruihandler {
/**
* 提醒文本
*/
private textview mtvremind;
/**
* 状态识别
*/
private int mstate;
/**
* 重置
* 准备刷新
* 开始刷新
* 结束刷新
*/
public static final int state_reset = -1;
public static final int state_prepare = 0;
public static final int state_begin = 1;
public static final int state_finish = 2;
public tmallrefreshheader(context context) {
this(context, null);
}
public tmallrefreshheader(context context, attributeset attrs) {
this(context, attrs, 0);
}
public tmallrefreshheader(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
initview();
}
/**
* 初始化view
*/
private void initview() {
view view = layoutinflater.from(getcontext()).inflate(r.layout.tmall_refresh_header_view, this, false);
mtvremind = (textview) view.findviewbyid(r.id.tv_remind);
simpledraweeview sdv = (simpledraweeview) view.findviewbyid(r.id.tm_logo);
draweecontroller draweecontroller = fresco.newdraweecontrollerbuilder()
.setautoplayanimations(true)
//设置uri,加载本地的gif资源
.seturi(uri.parse("res://" + getcontext().getpackagename() + "/" + r.drawable.tm_mui_bike))//设置uri
.build();
sdv.setcontroller(draweecontroller);
addview(view);
}
@override
public void onuireset(ptrframelayout frame) {
mstate = state_reset;
}
@override
public void onuirefreshprepare(ptrframelayout frame) {
mstate = state_prepare;
}
@override
public void onuirefreshbegin(ptrframelayout frame) {
mstate = state_begin;
}
@override
public void onuirefreshcomplete(ptrframelayout frame) {
mstate = state_finish;
}
@override
public void onuipositionchange(ptrframelayout frame, boolean isundertouch, byte status, ptrindicator ptrindicator) {
//处理提醒字体
switch (mstate) {
case state_prepare:
if (ptrindicator.getcurrentpercent() < 1) {
mtvremind.settext("下拉刷新");
} else {
mtvremind.settext("松开立即刷新");
}
break;
case state_begin:
mtvremind.settext("正在刷新...");
break;
case state_finish:
mtvremind.settext("加载完成...");
break;
}
}
}
效果图如下：
最后附上github地址：
https://github.com/shineflower/jdtmallpulltorefresh
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。