带你实现仿美团的下拉刷新

发表于 | 更新于 | 分类于 | 评论数：

有一段时间没更新博客了，近来都在做毕业设计，今天空出时间来更新一发。给大家带来的是仿美团的下拉刷新。相信美团大家都用过，下面就贴出了美团的下拉刷新效果：

这里写图片描述

我们可以大致地分析一下：首先根据下拉改变的 paddingTop 来动态地缩放“绿色椭圆物”,然后当 headerView 的 paddingTop 大于0时，播放美团小人出现的帧动画，最后就是手指松开时播放刷新中的帧动画了。

基本上思路就是上面分析的那样了，那么我们下面一步就是要获取帧动画的素材了。我们先下载好美团的 apk ，解压后在 res/drawable-xhdpi-v4 里，我们可以得到相关的图片了。如果嫌麻烦，文末有本 Demo 的下载链接，里面就有素材图片。

有了图片后我们先写个帧动画的 drawable.xml ：

1
2
3
4
5
6
7
8
9
10
<?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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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 的布局如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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) 里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@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()方法完成下拉刷新：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}

最后就是附上效果图了：

这里写图片描述

到这里整体就讲解得差不多了，至于 MeiTuanListView 的使用示例以及 MeiTuanOvalView 的源码可以在 Demo 里查看。

Demo下载链接：

MeiTuanListView.rar

good bye!

俞其荣 wechat
欢迎订阅我的微信公众号来获取我的动态！
坚持原创技术分享，您的支持将鼓励我继续创作！