一、概述

本篇續 廈門之旅 的第二篇。這期間找工作真的心態幾多變化，剛開始興致高昂，信心滿滿，面試了幾家不錯的公司，結果都是因為工資問題不了了之。後面的連面試機會都沒有了，每天在狹小的租房裡面吃了睡，睡了玩，陌生的環境消磨這我的意志。我很討厭消沉的自我，這邊招 Android 開發並沒有我以為的那麼多，實在是太少了，想找到滿意的工作更是難上加難。引用公眾號【AndroidDeveloper】的一句話

願意積極爭取，肯努力上進的年輕人，運氣不會太差

在我快要放棄在這邊找工作的時候，收到了一家公司的面試通知，並順利的拿到了 offer，他們公司旗下有一款 咪咕動漫 的產品。本篇我以自己的方式實現了 App 中列表的下拉重新整理以及上拉載入。

二、效果展示

效果圖一欄：

三、具體實現

1、圖片資源

下載 咪咕動漫App ，修改成 .zip 格式並解壓。獲取到圖片資源如下：

pull_down （下拉）

pull_end （釋放重新整理）

refreshing_01 （正在重新整理圖片_1）

refreshing_02 （正在重新整理圖片_2）

refreshing_03 （正在重新整理圖片_3）

正在重新整理的幀動畫：

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android
 
="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item android:duration="100" android:drawable="@drawable/refreshing_01" />
    <item android:duration="100" android:drawable="@drawable/refreshing_02" />
    <item android:duration="100" android:drawable="@drawable/refreshing_03"
 
 />

</animation-list>

屬性 android:oneshot=”false” 表示動畫迴圈播放。 如果為 true，表示動畫只播放一次停止在最後一幀上。

2、下拉重新整理

原理淺析

下拉重新整理作為一個單獨控制元件新增到列表頂部，並且初始狀態的高度為 0 ，隨著手指觸控的偏移量高度而發生改變，並且在不同的狀態之間來回切換。控制元件的四種狀態：

• STATE_NORMAL 下拉狀態 （高度小於重新整理的臨界高度） 預設 40dp

• STATE_RELEASE_TO_REFRESH 釋放重新整理狀態 （高度大於重新整理的臨界高度）

• STATE_REFRESHING 重新整理狀態 （高度大於重新整理的臨界高度，手指釋放後的狀態）

• STATE_DONE 重新整理完成狀態

處了四種狀態，還需要實現三個方法：

• void onMove(float delta); 移動，引數 delta 兩點之間的偏移量

• boolean releaseAction(); 釋放是否滿足重新整理狀態

• void refreshComplete(); 重新整理完成

重新整理控制元件（MiGuRefreshHeader）

MiGuRefreshHeader 控制元件繼承 LinearLayout ，MiGuRefreshHeader 的構造方法：

    public MiGuRefreshHeader(Context context) {
        this(context, null);
    }

    public MiGuRefreshHeader(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MiGuRefreshHeader(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

初始化 View，比較簡單我這裡就不在細講，文章最後會附上原始碼：

    private void initView() {

        // 初始情況，設定下拉重新整理view高度為0
        mContainer = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.refresh_header, null);
        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        lp.setMargins(0, 0, 0, 0);
        this.setLayoutParams(lp);
        this.setPadding(0, 0, 0, 0);

        addView(mContainer, new LayoutParams(LayoutParams.MATCH_PARENT, 0));
        setGravity(Gravity.BOTTOM);

        //圖片控制元件
        mMiGuImageView = (ImageView) findViewById(R.id.iv_refresh);
        //文字控制元件
        mStatusTextView = (TextView) findViewById(R.id.tv_status);

        //獲取控制元件的預設高度方法一
        measure(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mMeasureHeight = getMeasuredHeight();//獲取控制元件高度 預設 40dp 由於測試機密度為 3 所以畫素為 120px
    }

獲取控制元件的預設高度方式二：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mMeasureHeight = h;
    }

不同狀態下文字控制元件，圖片控制元件的顯示：

    public void setState(int state) {
        if (state == mState) return;

        if (state == STATE_NORMAL) {
            //下拉
            mMiGuImageView.setImageResource(R.drawable.pull_down);
            mStatusTextView.setText(R.string.pull_refresh);
        } else if (state == STATE_RELEASE_TO_REFRESH) {
            //釋放
            mMiGuImageView.setImageResource(R.drawable.pull_end);
            mStatusTextView.setText(R.string.release_refresh);
        } else if (state == STATE_REFRESHING) {
            //重新整理
            mStatusTextView.setText(R.string.refreshing);
            mMiGuImageView.setImageResource(R.drawable.refreshing);
            mMiGuDrawable = (AnimationDrawable) mMiGuImageView.getDrawable();
            //播放動畫
            mMiGuDrawable.start();

            smoothScrollTo(mMeasureHeight);
        } else if (state == STATE_DONE) {
            //完成
            if (mMiGuDrawable != null)
                //停止動畫
                mMiGuDrawable.stop();
        }

        mState = state;
    }

如果你需要替換文字或圖片，請修改這裡。

以下是3個方法的實現，onMove(float delta) 方法：

        if (getVisibleHeight() > 0 || delta > 0) {
            //控制元件滑動的距離
            setVisibleHeight((int) delta + getVisibleHeight());
            //處於釋放重新整理狀態
            if (mState <= STATE_RELEASE_TO_REFRESH) {
                //判定距離是否大於重新整理的臨界值
                if (getVisibleHeight() < mMeasureHeight) {
                    setState(STATE_NORMAL);
                } else {
                    setState(STATE_RELEASE_TO_REFRESH);
                }
            }
        }

releaseAction() 方法：

    @Override
    public boolean releaseAction() {

        boolean isOnRefresh = false;

        int height = getVisibleHeight();

        if (height == 0) {
            isOnRefresh = false;
        }

        if (getVisibleHeight() > mMeasureHeight && mState < STATE_REFRESHING) {
            //重新整理狀態
            setState(STATE_REFRESHING);
            isOnRefresh = true;
        }

        if (mState == STATE_REFRESHING && height <= mMeasureHeight) {
            //處於重新整理狀態，手指還在向上滑動
        }

        if (mState != STATE_REFRESHING) {
            smoothScrollTo(0);
        }

        if (mState == STATE_REFRESHING) {
            int destHeight = mMeasureHeight;
            smoothScrollTo(destHeight);
        }

        return isOnRefresh;
    }

重新整理完成 refreshComplete() 方法：

    @Override
    public void refreshComplete() {
        setState(STATE_DONE);
        reset();
    }

理解了重新整理控制元件的四種狀態，再來分析程式碼就比較容易了。接著我們處理 RecyclerView 的 onTouchEvent 方法獲取 Y 軸的偏移量作為引數傳入 onMove(float delta) 方法中。

MiGuRecyclerView

MiGuRecyclerView 繼承 RecyclerView 控制元件。主要分析 onTouchEvent 方法，如果你對其他地方還有疑問，請留言。

注意：本文使用的 RecyclerView 基於RecyclerView 之通用適配，重寫 setAdapter 方法新增頭部重新整理控制元件：

 mRefreshAdapter.addHeaderView(mMiGuRefreshHeader, 0);

onTouchEvent 方法程式碼如下：

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mLastY == -1) {
            mLastY = ev.getRawY();
        }

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastY = ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (mRefreshAdapter != null) {
                    final float deltaY = ev.getRawY() - mLastY;
                    mLastY = ev.getRawY();
                    if (isScrollTop && isOnTop() && pullRefreshEnabled && appbarState == AppBarStateChangeListener.State.EXPANDED) {
                        mMiGuRefreshHeader.onMove(deltaY / DRAG_RATE);
                        if (mMiGuRefreshHeader.getVisibleHeight() > 0 && mMiGuRefreshHeader.getState() < MiGuRefreshHeader.STATE_REFRESHING) {
                            return false;
                        }
                    }
                }
                break;
            default:
                if (mRefreshAdapter != null) {
                    mLastY = -1; // reset
                    if (isScrollTop && isOnTop() && pullRefreshEnabled && appbarState == AppBarStateChangeListener.State.EXPANDED) {
                        if (mMiGuRefreshHeader.releaseAction()) {
                            if (mRefreshListener != null) {
                                mRefreshListener.onRefresh();
                            }
                        }
                    }
                }
                break;
        }

        return super.onTouchEvent(ev);
    }

ACTION_DOWN 手勢獲取相對於螢幕觸控點 Y 座標

    final float deltaY = ev.getRawY() - mLastY;
    mLastY = ev.getRawY();

獲取手勢滑動兩點的偏移量，isScrollTop 判定當前 RecyclerView 是否滑動到頂部。我採取了重寫 onScrolled 方法通過：

findFirstCompletelyVisibleItemPosition();

來判定 isScrollTop 值，如果您有好的方案可以給我留言，萬分感謝。

3、上拉載入

【咪咕動漫】採取的是播放幀動畫，比較簡單。實現方案你可以參考原始碼。

技術交流群歡迎你的加入

原始碼傳送門

參考文獻