帶你實現仿美團的下拉刷新

博文出處:帶你實現仿美團的下拉刷新,歡迎大家關注我的博客,謝謝!

有一段時間沒更新博客了,近來都在做畢業設計,今天空出時間來更新一發。給大家帶來的是仿美團的下拉刷新。相信美團大家都用過,下面就貼出了美團的下拉刷新效果:

美團的下拉刷新效果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下載鏈接:

MeiTuanListView.rar

goodbye!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容