自定義下拉重新整理控件-仿美團重新整理效果

概述

　　下拉重新整理是平時項目中最常用的功能,今天要說的就是如何自定義下拉重新整理控件。

　　第三方重新整理控件也比較多，例如Android-PullToRefresh,XListView等，但是這些控件自定義重新整理頭部不那麼容易擴充，它們基于addHeaderView作為重新整理控件頭部，耦合性較高。

　　我們采用android-Ultra-Pull-To-Refresh，支援任何View下拉重新整理，重新整理頭部可靈活自定義。核心類PtrFrameLayout繼承ViewGroup内部采用headerView+ContentView的組合,headerView就是自定義的重新整理頭部控件，contentView就是點選可進行重新整理的View。下面我們借助該控件輕松實作仿美團的下拉重新整理效果。

效果圖如下：

自定義下拉重新整理控件-仿美團重新整理效果

思路

分析下拉重新整理有幾個階段

step0:下拉/準備下拉狀态 [圖檔縮放階段]

step1:下拉->可重新整理狀态 [從圖檔縮放階段到動畫翻滾動畫]

step2:重新整理狀态[來回搖頭動畫]

step3:重新整理結束狀态[取消動畫]

step4:可重新整理->下拉狀态[動畫翻滾之後的圖檔到圖檔縮放階段]
實作對應狀态的效果
通過headerView implemets PtrUIHandler把狀态效果和重新整理過程對應起來
通過extends PtrFrameLayout把自定義headerView注入

關鍵代碼

1.下拉重新整理的布局檔案header_meituan.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:paddingBottom="10dp"
    android:paddingLeft="100dp"
    android:paddingTop="10dp">

    <ImageView
        android:id="@+id/ivFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:scaleType="matrix"
        android:src="@mipmap/pull_image"/>

    <ImageView
        android:id="@+id/ivSecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/animation_refresh_second"
        android:visibility="invisible"/>

    <ImageView
        android:id="@+id/ivThird"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/animation_refresh_third"
        android:visibility="invisible"/>

    <TextView
        android:id="@+id/tvMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="100dp"
        android:text="@string/cube_ptr_pull_down_to_refresh"
        android:textSize="14sp"/>
</RelativeLayout>

主要包括三個ImageView（分别用于顯示圖檔縮放，播放一次翻滾幀動畫，播放循環搖頭動畫）和一個TextView（顯示重新整理狀态文字，下拉重新整理，釋放重新整理，重新整理中…，重新整理完成。）

注意：ivFirst需要設定android:scaleType=”matrix”，否則ivFirst.setImageMatrix(mMatrix)縮放圖檔無效。

2.狀态時的效果實作

step0：下拉/準備下拉狀态，此階段是圖檔的一個縮放,過程關鍵代碼如下

private void pullStep0(float scale) {
    ivFirst.setVisibility(View.VISIBLE);
    ivSecond.setVisibility(View.INVISIBLE);
    ivThird.setVisibility(View.INVISIBLE);
    scaleImage(scale);
    tvMsg.setText(getResources().getString(R.string.cube_ptr_pull_down_to_refresh));
}

private void scaleImage(float scale) {
    mMatrix.setScale(scale, scale, ivFirst.getWidth() / , ivFirst.getHeight() / );
    ivFirst.setImageMatrix(mMatrix);
}

setp1：下拉->可重新整理狀态，此階段是播放一個幀動畫,過程關鍵代碼如下

private void pullStep1(PtrFrameLayout frame) {
        if (!frame.isPullToRefresh()) {
            ivFirst.setVisibility(View.INVISIBLE);
            ivSecond.setVisibility(View.VISIBLE);
            ivThird.setVisibility(View.INVISIBLE);
            mSecondAnimation.start();
            tvMsg.setText(getResources().getString(R.string.cube_ptr_release_to_refresh));
        }
    }

step2：重新整理狀态，此階段是播放一個幀動畫[循環播放],過程關鍵代碼如下

private void pullStep2() {
        ivFirst.setVisibility(View.INVISIBLE);
        ivSecond.setVisibility(View.INVISIBLE);
        ivThird.setVisibility(View.VISIBLE);
        cancelAnimationSecond();
        mThirdAnimation.start();
        tvMsg.setText(R.string.cube_ptr_refreshing);
    }

step3：重新整理結束狀态，此階段是取消相關動畫，隐藏headerView

private void pullStep3() {
        ivFirst.setVisibility(View.INVISIBLE);
        ivSecond.setVisibility(View.INVISIBLE);
        ivThird.setVisibility(View.VISIBLE);
        cancelAnimationThird();
        tvMsg.setText(getResources().getString(R.string.cube_ptr_refresh_complete));
    }

step4：可重新整理->下拉狀态，此階段主要就是從step2>step0狀态切換

private void pullStep4() {
        ivFirst.setVisibility(View.VISIBLE);
        ivSecond.setVisibility(View.INVISIBLE);
        ivThird.setVisibility(View.INVISIBLE);
        tvMsg.setText(getResources().getString(R.string.cube_ptr_pull_down_to_refresh));
    }

3.借助PtrUIHandler接口，實作對應方法，來搭配重新整理的幾個狀态。

public interface PtrUIHandler {
    /**
     * When the content view has reached top and refresh has been completed, view will be reset.
     * 重新整理結束隐藏hederView
     * @param frame
     */
    public void onUIReset(PtrFrameLayout frame);
    /**
     * prepare for loading
     * 準備重新整理[對應step0]
     * @param frame
     */
    public void onUIRefreshPrepare(PtrFrameLayout frame);
    /**
     * perform refreshing UI
     * 重新整理中[對應step2]
     * @param frame
     */
    public void onUIRefreshBegin(PtrFrameLayout frame);
    /**
     * perform UI after refresh
     * 重新整理結束[對應step3]
     * @param frame
     */
    public void onUIRefreshComplete(PtrFrameLayout frame);
    /**
     * perform UI after refresh
     * 下拉，上拉過程[邏輯判斷對應step0,step4]
     * @param frame
     */
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, int oldPosition, int currentPosition, float oldPercent, float currentPercent);
}

onUIPositionChange控制着三個狀态的切換，核心代碼如下

@Override
public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
       final int mOffsetToRefresh = frame.getOffsetToRefresh();
       final int currentPos = ptrIndicator.getCurrentPosY();
       final int lastPos = ptrIndicator.getLastPosY();
       if (lastPos < mOffsetToRefresh) {
           if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
           // step0:下拉狀态，根據距離對圖檔進行縮放
               float scale = lastPos / Float.valueOf(mOffsetToRefresh);
               pullStep0(scale);
           }
       }
       // mOffsetToRefresh:下拉重新整理的門檻值，也就是下拉距離(currentPos)超過時才變成(釋放重新整理)，該值預設為布局檔案header_meituan.xml高度的1.2倍，可通過在PtrFrameLayout設定app:ptr_ratio_of_header_height_to_refresh進行修改。
       // currentPos目前滑動的距離
       // lastPos上次滑動的距離
       // currentPos與lastPos始終差1
       // 下拉時：currentPos=lastPos+1;
       // 上滑時：currentPos=lastPos-1;
       Log.i(TAG, "mOffsetToRefresh =" + mOffsetToRefresh + ",currentPos =" + currentPos + ",lastPos =" + lastPos);
       if (currentPos < mOffsetToRefresh && lastPos >= mOffsetToRefresh) {
           if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
           // step4:可重新整理->下拉狀态[動畫翻滾之後的圖檔到圖檔縮放階段]
               pullStep4();
           }
       } else if (currentPos > mOffsetToRefresh && lastPos <= mOffsetToRefresh) {
           if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
           //step1:下拉->可重新整理狀态 [從圖檔縮放階段到動畫翻滾動畫]   
               pullStep1(frame);
           }
       }
}

源碼

https://github.com/zhetengxiang/MeiTuanRefresh

總結：

　　整體實作其實比較簡單，使用matrxi縮放圖檔，播放幀動畫實作動畫效果，implements PtrUIHandler 實作下拉過程狀态的切換和展示，extends PtrFrameLayout實作headerView的注入。使用的時候直接使用PtrlMeiTuanFrameLayout就可以了。

　　第一次寫部落格，歡迎大家指正，請輕拍。

參考資料

http://www.imooc.com/article/2112

https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

http://android-ultra-ptr.liaohuqiu.net/cn/

自定義下拉重新整理控件-仿美團重新整理效果

概述

思路

關鍵代碼

源碼

總結：

參考資料

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯