ListView详解之二----XListView-CSDN博客

本文链接：https://blog.csdn.net/qiyei2009/article/details/52276493

本次分析的是github上一个用于下拉刷新上拉加载的控件XListView,这个开源的ListView相信大家在开发的过程中会经常用到。

XListView控件的源码地址是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永远在头部。

一般来说，下拉的时候都用动画效果。下拉的时候箭头向下(这里有一次旋转)，松手以后，箭头会改变方向（这里有个旋转动画）。这里也可以添加其他动画，但是大体流程是一定的。

我们怎么是箭头旋转呢，箭头明显是一个imageview,那么我们只要设定两个动画RotateAnimation，一个顺时针180，一个逆时针180然后在下拉(action_mov)时调用第一个，松手后(action_up)调用第二个。

再来考虑拉动的问题，XListView给我们的办法是，header是一个layout,里面还有一个layout包裹着所有布局(称为Container)，我们通过设置这个Container为Gravity.BOTTOM，也就是让它永远在header的底部。另外我们记录header的高度真实height，然后将header高度设置为0,用于隐藏header。

每次拖动，计算Y方向的offset（利用action_down和action_up事件），然后记录这个offset(非常重要，接下来要根据offset处理各种情况)。因为header是加在listview里面的，所以下拉拖动的效果不必担心。

接下来考虑下拉过程的各种情况：

首先我们记录了offset，每次move,都有一个offset，然后根据这个offset我们可以增加header的高度，从而是header展示出来。
当offset < height(header的全部高度)，也就是说header没有完全展示出来，就松手，没有必要回调更新函数(我们会有这样一个函数的)
当offset > height,松手以后，应该回到加载状态，如下图。这时header缩小的高度，就是offset-height。最后在数据加载完成，才回缩至不可见

上述过程的回缩，都是手指离开屏幕以后发生的，显然我们要使用Scroller来处理。

下拉刷新原理就讲到这里，上拉加载更多的原理是一样的，只是HeaderView改变的height,而FooterView改变的是margin_bottom。因为上啦加载时我们一般来说，”上拉加载”这个View是要显示的。因此为了让这个View随着我们的拉动而改变位置，我们需要改变其margin_bottom这个LayoutParams布局参数。

XListView已经包含有下拉刷新与上拉加载的功能。我们从这里开始就分析其不同的实现。

1. XListView下拉刷新分析

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom" >

    <RelativeLayout
        android:id="@+id/xlistview_header_content"
        android:layout_width="match_parent"
        android:layout_height="60dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical"
            android:id="@+id/xlistview_header_text">

            <TextView
                android:id="@+id/xlistview_header_hint_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/xlistview_header_hint_normal" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:layout_marginTop="3dp" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/xlistview_header_last_time"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/xlistview_header_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <ImageView
            android:id="@+id/xlistview_header_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/xlistview_header_text"
            android:layout_centerVertical="true"
            android:layout_marginLeft="-35dp"
            android:src="@drawable/xlistview_arrow" />

        <ProgressBar
            android:id="@+id/xlistview_header_progressbar"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignLeft="@id/xlistview_header_text"
            android:layout_centerVertical="true"
            android:layout_marginLeft="-40dp"
            android:visibility="invisible" />
    </RelativeLayout>
</LinearLayout>

可以看到,布局文件包含一个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，下拉刷新相信已经说清楚。整个的下拉刷新操作就分析完成了。