博文出处：带你实现仿美团的下拉刷新，欢迎大家关注我的博客，谢谢！
有一段时间没更新博客了，近来都在做毕业设计，今天空出时间来更新一发。给大家带来的是仿美团的下拉刷新。相信美团大家都用过，下面就贴出了美团的下拉刷新效果：
美团的下拉刷新效果gif
我们可以大致地分析一下：首先根据下拉改变的 paddingTop 来动态地缩放“绿色椭圆物”,然后当 headerView 的 paddingTop 大于0时，播放美团小人出现的帧动画，最后就是手指松开时播放刷新中的帧动画了。
基本上思路就是上面分析的那样了，那么我们下面一步就是要获取帧动画的素材了。我们先下载好美团的 apk ，解压后在 res/drawable-xhdpi-v4 里，我们可以得到相关的图片了。如果嫌麻烦，文末有本 Demo 的下载链接，里面就有素材图片。
有了图片后我们先写个帧动画的 drawable.xml ：
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/pull_end_image_frame_01" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_02" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_03" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_04" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_05" android:duration="100"/>
</animation-list>
一共有两个 drawable.xml ，另外一个和这个类似，就不贴出来了。
现在开始编写代码了，创建一个 MeiTuanListView ，继承自 ListView :
public class MeiTuanListView extends ListView {
// 普通状态模式
private static final int NONE_MODE = 0;
// 下拉刷新模式
private static final int PULL_DOWN_MODE = 1;
// 可松开刷新模式
private static final int RELEASE_REFRESH_MODE = 2;
// 刷新中模式
private static final int REFRESHING_MODE = 3;
// 模式
private int mode = NONE_MODE;
// 阻值
private static final int RATIO = 3;
// 下拉刷新头部
private View headerRefreshView;
// 头部高度
private int refreshViewHeight;
// 手指按下的Y值
private float downY;
// 刷新监听器
private OnRefreshListener listener;
// “绿色椭圆物”的自定义View
private MeiTuanOvalView mtOvalView;
// 帧动画的ImageView
private ImageView aniImageView;
// 动画是否已经开始
private boolean isStart;
// 只有在listview顶端时下拉才可以刷新
private boolean canRefresh;
private static final String TAG = "MeiTuanListView";
public MeiTuanListView(Context context) {
this(context, null);
}
public MeiTuanListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MeiTuanListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
setOverScrollMode(View.OVER_SCROLL_NEVER);
headerRefreshView = LayoutInflater.from(getContext()).inflate(R.layout.layout_header, null);
mtOvalView = (MeiTuanOvalView) headerRefreshView.findViewById(R.id.mtFirstView);
aniImageView = (ImageView) headerRefreshView.findViewById(R.id.iv);
// 去测量
headerRefreshView.measure(0, 0);
refreshViewHeight = headerRefreshView.getMeasuredHeight();
headerRefreshView.setPadding(0, -refreshViewHeight, 0, 0);
addHeaderView(headerRefreshView, null, false);
}
...
}
在initView()中，初始化了下拉刷新的头部，并且设置了 setPadding (关于 ListView 下拉刷新的原理大家应该都懂吧？！)。
layout_header.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"
android:gravity="center">
<com.yuqirong.meituanlistview.view.MeiTuanOvalView
android:id="@+id/mtFirstView"
android:layout_width="45dp"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/iv_anim"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:visibility="gone" />
</RelativeLayout>
MeiTuanOvalView 这个是关于“绿色椭圆物”的自定义View，会根据 headerView.getPaddingTop() 的值自动缩放，这里就不讲解了，源码还是比较简单的，相关代码可以下载 Demo 查看。而 iv_anim 主要是用来播放帧动画的 ImageView 。
下拉刷新的主要代码都在 onTouchEvent(MotionEvent ev) 里：
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
// 在listview顶端时才可下拉刷新
if (getFirstVisiblePosition() == 0) {
Log.i(TAG, "canRefresh : " + canRefresh);
// 记录手指按下的Y坐标
downY = ev.getY();
canRefresh = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (mode != REFRESHING_MODE && canRefresh) {
float moveY = ev.getY();
float offsetY = moveY - downY;
// 动态改变paddingTop值
headerRefreshView.setPadding(0, (int) (headerRefreshView.getPaddingTop() + offsetY / RATIO), 0, 0);
if (headerRefreshView.getPaddingTop() <= 0) {
mode = PULL_DOWN_MODE;
mtOvalView.setVisibility(VISIBLE);
aniImageView.setVisibility(GONE);
mtOvalView.setScale((refreshViewHeight + headerRefreshView.getPaddingTop()) * 1f / refreshViewHeight);
isStart = false;
} else {
mode = RELEASE_REFRESH_MODE;
if (!isStart) {
mtOvalView.setVisibility(GONE);
aniImageView.setVisibility(VISIBLE);
aniImageView.setImageResource(R.drawable.pull_end_imag_frame);
AnimationDrawable animationDrawable = (AnimationDrawable) aniImageView.getDrawable();
// 只执行一次动画
animationDrawable.setOneShot(true);
animationDrawable.start();
isStart = true;
}
}
downY = moveY;
}
break;
case MotionEvent.ACTION_UP:
if (mode != REFRESHING_MODE && canRefresh) {
if (headerRefreshView.getPaddingTop() > 0) {
mode = REFRESHING_MODE;
headerRefreshView.setPadding(0, 0, 0, 0);
aniImageView.setImageResource(R.drawable.refreshing_image_frame);
AnimationDrawable animationDrawable = (AnimationDrawable) aniImageView.getDrawable();
animationDrawable.start();
if (listener != null) {
listener.refreshing();
}
} else {
mode = NONE_MODE;
headerRefreshView.setPadding(0, -refreshViewHeight, 0, 0);
mtOvalView.setScale(0f);
isStart = false;
canRefresh = false;
}
}
break;
}
return super.onTouchEvent(ev);
}
里面的代码逻辑还是比较简单的：
- ACTION_DOWN ：首先判断了当 ListView 在顶端时才可以下拉刷新，并且记录了手指按下的Y坐标；
- ACTION_MOVE ：根据滑动的 offsetY 来动态地设置 headerView 的 paddingTop 。我们可以看到在
if (headerRefreshView.getPaddingTop() <= 0)里面根据 paddingTop 的值来动态地设置mtOvalView的 scale ，并且在setScale()方法里面会调用invalidate()，从而让mtOvalView去重绘。不然headerRefreshView.getPaddingTop()大于0时就播放了美团小人出场的动画。 - ACTION_UP ：当手指松开的时候，还是判断了
headerRefreshView.getPaddingTop()的值。若大于0则把 headerView 全部显示出来，播放刷新中的动画，并且回调了刷新监听器的接口；小于0则把 headerView 重新隐藏起来。并重置相关的值。
要注意的一点是，在 onTouchEvent(MotionEvent ev) 里要返回 super.onTouchEvent(ev) 。不能是直接返回 true 。因为在 super.onTouchEvent(ev) 里处理了 ListView 滑动的相关逻辑。
当获取到最新数据后，可以调用notifyRefreshFinished()方法完成下拉刷新：
public interface OnRefreshListener {
void refreshing();
}
public void setOnRefreshListener(OnRefreshListener listener) {
this.listener = listener;
}
// 刷新完成后调用
public void notifyRefreshFinished() {
mode = NONE_MODE;
headerRefreshView.setPadding(0, -refreshViewHeight, 0, 0);
aniImageView.setVisibility(GONE);
mtOvalView.setVisibility(VISIBLE);
isStart = false;
canRefresh = false;
}
最后就是附上效果图了：
Demo效果图gif
到这里整体就讲解得差不多了，至于 MeiTuanListView 的使用示例以及 MeiTuanOvalView 的源码可以在 Demo 里查看。
Demo下载链接：
goodbye!
网友评论