ListView詳解之二----XListView

本次分析的是github上一個用於下拉刷新上拉加載的控件XListView,這個開源的ListView相信大家在開發的過程中會經常用到。

XListView控件的源碼地址是Android">https://github.com/Maxwin-z/XListView-Android

參考了其源碼與網上的各種分析總結而成。

1. XListView功能

XListView中我們經常用的就是下拉刷新和上拉加載這兩個功能，我們可以在此基礎上進行擴展和自定義。它的實現原理也比較簡單，在此也感謝這位大神給我們提供的這個開源的ListView，使我們在開發中節省了不少時間。

下面分別分析其下拉刷新與上拉加載的實現過程。

2. 下拉刷新

1. 下拉刷新原理
先來看下拉刷新的效果，一般來說ListView的下拉刷新效果如下所示：

下拉刷新是指當ListView滑動到最上面時，按住某一個item，然後下拉，就可以改變ListView的顯示狀態，並且我們可以重新刷新ListView中Adapter的數據的操作。

那麼如何實現下拉刷新呢。我們很自然想到給listview加上一個永遠在第一位的頭部，首先自定義一個頭部，然後添加到listview就可以了，這樣解決了繪制的問題。

怎麼保證這個header永遠在頭部呢？listview為我們提供了一個方法addHeaderView()方法，該方法可以為我們添加一個View永遠在頭部。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPtK7sOPAtMu1o6zPwsCttcTKsbrytrzTw7avu63Qp7n7oaPPwsCttcTKsbryvP3Nt8/yz8Io1eLA79PQ0ru0ztD916opo6zLycrW0tS686OsvP3Nt7vhuMSx5Le9z/KjqNXiwO/T0Lj20P3Xqravu62jqaGj1eLA79Kyv8nS1MztvNPG5Mv7tq+7raOstavKx7TzzOXB97PMysfSu7aotcShozwvY29kZT48L3A+DQo8cD7O0sPH1PXDtMrHvP3Nt9D916rE2KOsvP3Nt8P3z9TKx9K7uPZpbWFnZXZpZXcsxMfDtM7Sw8fWu9Kqyei2qMG9uPa2r7utUm90YXRlQW5pbWF0aW9uo6zSu7j2y7PKsdXrMTgwo6zSu7j2xObKsdXrMTgwyLu689Taz8LArShhY3Rpb25fbW92KcqxtffTw7Xa0ru49qOsy8nK1rrzKGFjdGlvbl91cCm199PDtdq2/rj2oaM8L2NvZGU+PC9wPg0KPHA+1NnAtL+8wsfArbavtcTOyszio6xYTGlzdFZpZXe4+M7Sw8e1xLDst6jKx6OsaGVhZGVyysfSu7j2bGF5b3V0LMDvw+a7udPQ0ru49mxheW91dLD8ufzXxcv509CyvL7WKLPGzqpDb250YWluZXIpo6zO0sPHzai5/cno1sPV4rj2Q29udGFpbmVyzqpHcmF2aXR5LkJPVFRPTaOs0rK+zcrHyMPL/NPA1LbU2mhlYWRlcrXEtdeyv6Gjwe3N4s7Sw8e8x8K8aGVhZGVytcS437bI1ebKtWhlaWdodKOsyLu6872raGVhZGVyuN+2yMno1sPOqjAs08PT2tL+sthoZWFkZXKhozwvY29kZT48L3A+DQo8cD7Dv7TOzc+2r6OsvMbL41m3vc/ytcRvZmZzZXSjqMD708NhY3Rpb25fZG93brrNYWN0aW9uX3VwysK8/qOpo6zIu7rzvMfCvNXiuPZvZmZzZXQot8ezo9bY0qqjrL3Tz8LAtNKquPm+3W9mZnNldLSmwO2499bWx+m/9imho9LyzqpoZWFkZXLKx7zT1NpsaXN0dmlld8Dvw+a1xKOsy/nS1M/CwK3Nz7avtcTQp7n7srux2LWj0MShozwvY29kZT48L3A+DQo8cD6908/CwLS/vMLHz8LArbn9s8y1xLj31tbH6b/2o7o8L2NvZGU+PC9wPg0KytfPyM7Sw8e8x8K8wctvZmZzZXSjrMO/tM5tb3ZlLLa809DSu7j2b2Zmc2V0o6zIu7rzuPm+3dXiuPZvZmZzZXTO0sPHv8nS1NT2vNNoZWFkZXK1xLjftsijrLTTtvjKx2hlYWRlctW5yr6z9sC0oaMgtbFvZmZzZXQgJmx0OyBoZWlnaHQoaGVhZGVytcTIq7K/uN+2yCmjrNKyvs3Kx8u1aGVhZGVyw7vT0M3qyKvVucq+s/bAtKOsvs3LycrWo6zDu9PQsdjSqrvYtfe4/NDCuq/K/SjO0sPHu+HT0NXi0fnSu7j2uq/K/bXEKSC1sW9mZnNldCAmZ3Q7IGhlaWdodCzLycrW0tS686Os06a4w7vYtb2809TY17TMrKOsyOfPws28oaPV4sqxaGVhZGVyy/XQobXEuN+2yKOsvs3Kx29mZnNldC1oZWlnaHSho9fuuvPU2sr9vt2809TYzeqzyaOsssW72Mv11sGyu7/JvPs8YnIgLz4NCjxpbWcgYWx0PQ=="這裡寫圖片描述" src="/uploadfile/Collfiles/20160823/20160823091316994.png" title="\" />

上述過程的回縮，都是手指離開屏幕以後發生的，顯然我們要使用Scroller來處理。

下拉刷新原理就講到這裡，上拉加載更多的原理是一樣的，只是HeaderView改變的height,而FooterView改變的是margin_bottom。因為上啦加載時我們一般來說，”上拉加載”這個View是要顯示的。因此為了讓這個View隨著我們的拉動而改變位置，我們需要改變其margin_bottom這個LayoutParams布局參數。

XListView已經包含有下拉刷新與上拉加載的功能。我們從這裡開始就分析其不同的實現。

1. XListView下拉刷新分析

1. XListViewHeader分析
先看XListViewHeader，也就是自定義的頭部。頭部布局文件R.layout.xlistview_header

可以看到,布局文件包含一個id為xlistview_header_content的RelativeLayout,高度為60dp,主要包含一個LinearLayout用於顯示刷新信息及時間，一個ImageView用於顯示箭頭，一個ProgressBar用於顯示進度條。

該布局文件可以自定義，我們需要根據下拉刷新中不同的狀態來改變該HeaderView的顯示。操作見XListViewHeader類。

2. XListViewHeader

import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;

public class XListViewHeader extends LinearLayout {
    private LinearLayout mContainer;// 下拉布局主體
    private ImageView mArrowImageView;// 下拉箭頭
    private ProgressBar mProgressBar;// 環形進度條
    private TextView mHintTextView;// 提示文本
    private int mState = STATE_NORMAL;

    private Animation mRotateUpAnim;
    private Animation mRotateDownAnim;

    private final int ROTATE_ANIM_DURATION = 180;// 動畫時間

    public final static int STATE_NORMAL = 0; //普通狀態
    public final static int STATE_READY = 1; //下拉准備刷新
    public final static int STATE_REFRESHING = 2; //正在加載

    public XListViewHeader(Context context) {
        super(context);
        initView(context);
    }

    /**
     * @param context
     * @param attrs
     */
    public XListViewHeader(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        // 初始情況，設置下拉刷新view高度為0
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LayoutParams.FILL_PARENT, 0);
        mContainer = (LinearLayout) LayoutInflater.from(context).inflate(
                R.layout.xlistview_header, null);
        addView(mContainer, lp);
        setGravity(Gravity.BOTTOM);

        mArrowImageView = (ImageView)findViewById(R.id.xlistview_header_arrow);
        mHintTextView = (TextView)findViewById(R.id.xlistview_header_hint_textview);
        mProgressBar = (ProgressBar)findViewById(R.id.xlistview_header_progressbar);
        //旋轉動畫
        mRotateUpAnim = new RotateAnimation(0.0f, -180.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);
        mRotateUpAnim.setDuration(ROTATE_ANIM_DURATION);
        //動畫終止時停留在最後一幀,也就是保留動畫以後的狀態
        mRotateUpAnim.setFillAfter(true);
        mRotateDownAnim = new RotateAnimation(-180.0f, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);
        mRotateDownAnim.setDuration(ROTATE_ANIM_DURATION);
        mRotateDownAnim.setFillAfter(true);
    }

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

        if (state == STATE_REFRESHING) {    // 顯示進度
            mArrowImageView.clearAnimation();
            mArrowImageView.setVisibility(View.INVISIBLE);
            mProgressBar.setVisibility(View.VISIBLE);
        } else {    // 顯示箭頭圖片
            mArrowImageView.setVisibility(View.VISIBLE);
            mProgressBar.setVisibility(View.INVISIBLE);
        }

        switch(state){
        case STATE_NORMAL:
            if (mState == STATE_READY) {
                mArrowImageView.startAnimation(mRotateDownAnim);
            }
            if (mState == STATE_REFRESHING) {
                mArrowImageView.clearAnimation();
            }
            mHintTextView.setText(R.string.xlistview_header_hint_normal);
            break;
        case STATE_READY:
            if (mState != STATE_READY) {
                mArrowImageView.clearAnimation();
                mArrowImageView.startAnimation(mRotateUpAnim);
                mHintTextView.setText(R.string.xlistview_header_hint_ready);
            }
            break;
        case STATE_REFRESHING:
            mHintTextView.setText(R.string.xlistview_header_hint_loading);
            break;
            default:
        }

        mState = state;
    }

    public void setVisiableHeight(int height) {
        if (height < 0)
            height = 0;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContainer
                .getLayoutParams();
        lp.height = height;
        mContainer.setLayoutParams(lp);
    }

    public int getVisiableHeight() {
        return mContainer.getLayoutParams().height;
    }

}

上面注釋已經說得非常清楚了，我再進行一些解釋。

首先是初始化函數initView()這裡獲得了布局中的控件，設置了箭頭旋轉動畫，將header的高度設置為0

然後是setState()函數，根據傳入的state，判斷是否隱藏控件，調用哪個旋轉動畫等，這個函數將會被外部調用

另外還有setVisiableHeight(intheight)函數，用於記錄下拉的距離(其實就是傳入的height)，這距離在之前說得很清楚，用於判斷下拉的狀態，非常重要

getVisiableHeight()函數沒有什麼好說的。用於顯示View的可見高度，與真正的高度有所區別。

接下來看XListView的代碼

3. XListView

/**
 * @file XListView.java
 * @package me.maxwin.view
 * @create Mar 18, 2012 6:28:41 PM
 * @author Maxwin
 * @description An ListView support (a) Pull down to refresh, (b) Pull up to load more.
 *      Implement IXListViewListener, and see stopRefresh() / stopLoadMore().
 */

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.animation.DecelerateInterpolator;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Scroller;
import android.widget.TextView;

public class XListView extends ListView implements OnScrollListener {

    private float mLastY = -1; // save event y
    private Scroller mScroller; // used for scroll back
    private OnScrollListener mScrollListener; // user's scroll listener

    // the interface to trigger refresh and load more.
    private IXListViewListener mListViewListener;

    // -- header view
    private XListViewHeader mHeaderView;
    // header view content, use it to calculate the Header's height. And hide it
    // when disable pull refresh.
    private RelativeLayout mHeaderViewContent;
    private TextView mHeaderTimeView;
    private int mHeaderViewHeight; // header view's height
    private boolean mEnablePullRefresh = true;
    private boolean mPullRefreshing = false; // is refreashing.

    // -- footer view
    private XListViewFooter mFooterView;
    private boolean mEnablePullLoad;
    private boolean mPullLoading;
    private boolean mIsFooterReady = false;

    // total list items, used to detect is at the bottom of listview.
    private int mTotalItemCount;

    // for mScroller, scroll back from header or footer.
    private int mScrollBack;
    private final static int SCROLLBACK_HEADER = 0;
    private final static int SCROLLBACK_FOOTER = 1;

    private final static int SCROLL_DURATION = 400; // scroll back duration
    private final static int PULL_LOAD_MORE_DELTA = 50; // when pull up >= 50px
                                                        // at bottom, trigger
                                                        // load more.
    private final static float OFFSET_RADIO = 1.8f; // support iOS like pull
                                                    // feature.
    private boolean isForbinRefresh=false;
    /**
     * @param context
     */
    public XListView(Context context) {
        super(context);
        initWithContext(context);
    }

    public XListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initWithContext(context);
    }

    public XListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initWithContext(context);
    }

    private void initWithContext(Context context) {
        mScroller = new Scroller(context, new DecelerateInterpolator());
        // XListView need the scroll event, and it will dispatch the event to
        // user's listener (as a proxy).
        super.setOnScrollListener(this);

        // init header view
        mHeaderView = new XListViewHeader(context);
        mHeaderViewContent = (RelativeLayout) mHeaderView
                .findViewById(R.id.xlistview_header_content);
        mHeaderTimeView = (TextView) mHeaderView
                .findViewById(R.id.xlistview_header_time);
        addHeaderView(mHeaderView);

        // init footer view
        mFooterView = new XListViewFooter(context);
        // init header height
        mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        mHeaderViewHeight = mHeaderViewContent.getHeight();
                        getViewTreeObserver()
                                .removeGlobalOnLayoutListener(this);
                    }
                });
    }

構造方法和初始化方法主要是初始化HeaderView，FootView，並且初始化了Scroller,並且設置了AbsListView的ScrollerListener監聽，這樣需要復寫onScrollStateChanged與onScroll方法。接著初始化了HeaderView,並獲取了其實際高度mHeaderViewHeight。這個是我們用於判斷下拉狀態的另外一個重要指標。當控件繪制好以後，我們來處理下拉問題。

接下來是很重要的一個方法，復寫了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:
            final float deltaY = ev.getRawY() - mLastY;
            mLastY = ev.getRawY();
            if (getFirstVisiblePosition() == 0
                    && (mHeaderView.getVisiableHeight() > 0 || deltaY > 0)) {
                // the first item is showing, header has shown or pull down.
                updateHeaderHeight(deltaY / OFFSET_RADIO);
                invokeOnScrolling();
            } else if (getLastVisiblePosition() == mTotalItemCount - 1
                    && (mFooterView.getBottomMargin() > 0 || deltaY < 0)) {
                // last item, already pulled up or want to pull up.
                updateFooterHeight(-deltaY / OFFSET_RADIO);
            }
            break;
        default:
            mLastY = -1; // reset
            if (getFirstVisiblePosition() == 0) {
                // invoke refresh
                if (mEnablePullRefresh
                        && mHeaderView.getVisiableHeight() > mHeaderViewHeight) {
                    mPullRefreshing = true;
                    mHeaderView.setState(XListViewHeader.STATE_REFRESHING);
                    if (mListViewListener != null) {
                        mListViewListener.onRefresh();
                    }
                }
                resetHeaderHeight();
            } else if (getLastVisiblePosition() == mTotalItemCount - 1) {
                // invoke load more.
                if (mEnablePullLoad
                    && mFooterView.getBottomMargin() > PULL_LOAD_MORE_DELTA
                    && !mPullLoading) {
                    startLoadMore();
                }
                resetFooterHeight();
            }
            break;
        }
        return super.onTouchEvent(ev);
    }

想一下我們的下拉動作，點住ListView後手指向下拖動，這個時候我們根據手指的動作來處理事件。

由於初始HeaderView時，我們把布局參數LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0);所以，ListView的Header是不會顯示出來的。

action_down:獲得手指觸摸的坐標，即mLastY(首次)

action_move:再次獲取手指的坐標，並根據移動的距離計算出offset,我們就可以改變header的高度(當然也可能是上拉，判斷條件看上面的注釋)。就會看到Header開始顯示出來了。

判斷是下拉刷新，首先要檢查listview的第一個item是否可見(由於ListView添加了headerView,那麼HeaderView就是第一個了即getFirstVisiblePosition() == 0是HeaderView)，這個時候如果HeaderView可見，或者下拉的偏移大於0，我們就應該更新Header的高度。從而使header顯示出來，同時記錄下拉的距離。這個時候就說明我們是在進行下拉操作。

更新Header的高度是下面這個方法。

private void updateHeaderHeight(float delta) {
        if (!isForbinRefresh) {

            mHeaderView.setVisiableHeight((int) delta
                    + mHeaderView.getVisiableHeight());
            if (mEnablePullRefresh && !mPullRefreshing) { // 未處於刷新狀態，更新箭頭
                if (mHeaderView.getVisiableHeight() > mHeaderViewHeight) {
                    mHeaderView.setState(XListViewHeader.STATE_READY);
                } else {
                    mHeaderView.setState(XListViewHeader.STATE_NORMAL);
                }
            }
            setSelection(0); // scroll to top each time
        }
    }

首先判斷是否禁止下刷新，如果是禁止刷新的，就不更新HeaderView了。否則就設置HeaderView的高度為mHeaderView.setVisiableHeight((int) delta+mHeaderView.getVisiableHeight());高度一直更新，所以header會被越拉越大。接著如果使能了下拉刷新，並且沒有正在刷新，根據HeaderView的VisiableHeight高度是否超過HeaderView的原始高度來設置刷新的不同狀態。如果HeaderView的VisiableHeight超過了原始高度mHeaderViewHeight。我們就認為處於刷新裝備好了，可以開始刷新操作了。否則就設置成正常狀態。最後調用ListView的setSelection(0)。目的是為了讓下拉的時候感到困難(feeling),需要用力才行。

在action_up時，即松開手指:重新復位mLastY,並且在那一刻，根據下拉的距離與HeaderView的可視高度來設置下拉刷新使能mPullRefreshing = true;設置HeaderView的狀態為XListViewHeader.STATE_REFRESHING。然後調用IXListViewListener監聽器mListViewListener.onRefresh();進行刷新操作，一般我們就會使用這個接口調用我們的刷新操作刷新數據了。最後調用resetHeaderHeight();將HeaderView復位，變為不可見。

/**
 * reset header view's height.
 */
private void resetHeaderHeight() {
    int height = mHeaderView.getVisiableHeight();
    if(height == 0) // not visible.
        return;
    //refreshing and header isn't shown fully. do nothing.
    //正在刷新，或者頭部沒有完全顯示，返回
    if(mPullRefreshing && height <= mHeaderViewHeight) {
        return;
    }
    int finalHeight = 0; // default: scroll back to dismiss header. 默認最終高度，也就是說要讓頭部消失
    //is refreshing, just scroll back to show all the header.
    //正在刷新，並且下拉頭部完全顯示
    if(mPullRefreshing && height > mHeaderViewHeight) {
        finalHeight= mHeaderViewHeight;
    }
    mScrollBack= SCROLLBACK_HEADER;
    //從當前位置，返回到頭部被隱藏
    mScroller.startScroll(0,height, 0, finalHeight - height,SCROLL_DURATION);
    //trigger computeScroll
    //重繪HeaderView
    invalidate();
}

這裡有一個重要判斷，就是if(mPullRefreshing && height > mHeaderViewHeight)用於判斷是下拉後，到加載數據狀態，還是加載數據完畢，到隱藏頭部狀態在下拉松手後，height(下拉過程中使header增加的高度)是大於mHeaderViewHeight(header的真實高度)，所以我們改變了finalHeight，這樣就會使header滑動到加載狀態，而在加載狀態，這時height等於mHeaderViewHeight，所以finalHeight=0，我們再次調用resetHeaderHeight()，就可以使header隱藏

這裡有點繞，但是很關鍵，希望大家仔細理解。

怎麼滑動回滾呢，當然是使用Scroller

//從當前位置，返回到頭部被隱藏
mScrollBack = SCROLLBACK_HEADER;
mScroller.startScroll(0, height, 0, finalHeight - height,SCROLL_DURATION);真正的回滾，是在computeScroll裡面實現的
Scrooller的回滾需要View重寫其computeScroll方法

@Override
public void computeScroll() {
    if (mScroller.computeScrollOffset()) {
        if (mScrollBack == SCROLLBACK_HEADER) {
            mHeaderView.setVisiableHeight(mScroller.getCurrY());//改變頭部高度，實現回滾
        } else {
            mFooterView.setBottomMargin(mScroller.getCurrY());
        }
        postInvalidate();
        invokeOnScrolling();
    }
    super.computeScroll();
}

通過Scroller通過的位置，改變頭部高度，實現回滾。

到此位置，下拉刷新就解析完畢了，但是我們沒有看到第二次調用resetHeaderHeight()，使下拉頭隱藏的操作啊

當然沒有，因為我們要在加載完數據，才調用這個函數，也就是說調用時機是不確定的，根據具體需求的，所以控件沒有辦法覺得什麼時候調用，這個調用權在你手上，也就是說我們加載完數據，需要主動調用

XListView為我們提供了一個public方法用於主動調用，內部進行了resetHeaderHeight()操作

/**
 * stop refresh, reset header view.
 * 停止刷新，重置頭部
 */
public void stopRefresh() {
    if (mPullRefreshing == true) {
        mPullRefreshing = false;
        resetHeaderHeight();
    }
}

OK，下拉刷新相信已經說清楚。整個的下拉刷新操作就分析完成了。