概述

　　下拉重新整理是平時專案中最常用的功能,今天要說的就是如何自定義下拉重新整理控制元件。
　　第三方重新整理控制元件也比較多，例如Android-PullToRefresh,XListView等，但是這些控制元件自定義重新整理頭部不那麼容易擴充套件，它們基於addHeaderView作為重新整理控制元件頭部，耦合性較高。
　　我們採用android-Ultra-Pull-To-Refresh，支援任何View下拉重新整理，重新整理頭部可靈活自定義。核心類PtrFrameLayout繼承ViewGroup內部採用headerView+ContentView的組合,headerView就是自定義的重新整理頭部控制元件，contentView就是點選可進行重新整理的View。下面我們藉助該控制元件輕鬆實現仿美團的下拉重新整理效果。

效果圖如下：

思路

1. 分析下拉重新整理有幾個階段
   step0:下拉/準備下拉狀態 [圖片縮放階段]
   step1:下拉->可重新整理狀態 [從圖片縮放階段到動畫翻滾動畫]
   step2:重新整理狀態[來回搖頭動畫]
   step3:重新整理結束狀態[取消動畫]
   step4:可重新整理->下拉狀態[動畫翻滾之後的圖片到圖片縮放階段]
2. 實現對應狀態的效果
3. 通過headerView implemets PtrUIHandler把狀態效果和重新整理過程對應起來
4. 通過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() / 2, ivFirst.getHeight() / 2);
    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);
           }
       }
}

原始碼

總結：

　　整體實現其實比較簡單，使用matrxi縮放圖片，播放幀動畫實現動畫效果，implements PtrUIHandler 實現下拉過程狀態的切換和展示，extends PtrFrameLayout實現headerView的注入。使用的時候直接使用PtrlMeiTuanFrameLayout就可以了。
　　第一次寫部落格，歡迎大家指正，請輕拍。

參考資料