Maxwin-z/XListView-Android(下拉刷新上拉加载)源码解析(一)

标签：

本次解析的内容，是github上一个用于下拉刷新上拉加载的控件xlistview,这个功能相信大家在开发的过程中会经常用到。

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

在这个控件之前，我看过一些相同功能的控件，挑选后觉得XListView功能比较完善，而且易于理解。在android-open-project里面，有提到一个DropDownListView，个人使用过以后，觉得功能是具备了，但是操作体验不好，原因就是没有使用到Scroller来处理滑动问题，导致下拉和回滚时的速度都是一样的(很快) ，原则上来说，回滚时应该先快后慢，而下拉则是越拉越要用力(feeling)。

以上是我没有选中DropDownListView的原因，下面我们具体来看一下XListView。

我们知道拉刷新上拉加载这个功能，最经常就是用在ListView上，所以我们需要继承ListView，给它加上头部和尾部

对于下拉刷新上拉加载，我们分开来讨论(虽然原理是大同小异)

下拉刷新：

我们很自然想到给listview加上一个永远在第一位的头部，首先自定义一个头部，然后添加到listview就可以了，这样解决了绘制的问题。

怎么保证这个header永远在头部呢？listview为我们提供了一个方法addHeaderView()

再来考虑动画的问题，我们知道，下拉的时候箭头向下(这里有一次旋转)，松手以后，箭头会改变方向（这里有个旋转动画）

我们怎么是箭头旋转呢，箭头明显是一个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里面的，所以下拉拖动的效果不必担心。

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

1，首先我们记录了offset，每次move,都有一个offset，然后根据这个offset我们可以增加header的高度，从而是header展示出来。

当offset<height(header的全部高度)，也就是说header没有完全展示出来，就松手，没有必要回调更新函数(我们会有这样一个函数的)

2，当offset>height,松手以后，应该回到加载状态，如下图。这时header缩小的高度，就是offset-height。

最后在数据加载完成，才回缩至不可见。

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

下拉刷新原理就讲到这里，上拉加载更多的原来是一样的，只是header改变的height,而footer改变的是margin-bottom

下面我们来看源码

先看XListViewHeader，也就是自定义的头部

头部布局

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

    <RelativeLayout
        android:id="@+id/xlistview_header_content"
        android:layout_width="fill_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: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>

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;
	}
	
	/**
	 * 设置下拉头有效高度
	 * @param height
	 */
	public void setVisiableHeight(int height) {
		if (height < 0)
			height = 0;
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContainer
				.getLayoutParams();
		lp.height = height;
		mContainer.setLayoutParams(lp);
	}

	/**
	 * 获得下拉头有效高度
	 * @return
	 */
	public int getVisiableHeight() {
		return mContainer.getLayoutParams().height;
	}

}

首先是初始化函数initView()这里获得了布局中的控件，设置了箭头旋转动画，将header的高度设置为0

然后是setState()函数，根据传入的state，判断是否隐藏控件，调用哪个旋转动画等，这个函数将会被外部调用

另外还有setVisiableHeight(int height)函数，用于记录下拉的距离(其实就是传入的height)，这距离在之前说得很清楚，用于判断下拉的状态，非常重要

getVisiableHeight()函数没有什么好说的。

OK，完成了header，我们来看Xlistview

首先是一些基本属性，用于大家在接下来的源码中，做参考，大家可以忽略掉，但遇到不明意思的属性时，回头再找出来看

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;

	/**
	 * 下拉头部
	 */
	private XListViewHeader mHeaderView;	
	/**
	 * 下拉头主体，用于计算头部的高度
	 * 当不能刷新时，被隐藏
	 */
	private RelativeLayout mHeaderViewContent;
	/**
	 * 下拉箭头
	 */
	private TextView mHeaderTimeView;
	/**
	 * 下拉头部的高度
	 */
	private int mHeaderViewHeight;
	/**
	 * 能否下拉刷新
	 */
	private boolean mEnablePullRefresh = true;
	/**
	 * 是否正在刷新,false表示正在刷新
	 */
	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;
	/**
	 * footer滑动返回
	 */
	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.

        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);

		//初始化下拉头
		mHeaderView = new XListViewHeader(context);
		mHeaderViewContent = (RelativeLayout) mHeaderView
				.findViewById(R.id.xlistview_header_content);
		mHeaderTimeView = (TextView) mHeaderView
				.findViewById(R.id.xlistview_header_time);
		addHeaderView(mHeaderView);

		//初始化底部
		mFooterView = new XListViewFooter(context);

		//初始化下拉头高度
		mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {
					@Override
					public void onGlobalLayout() {
						mHeaderViewHeight = mHeaderViewContent.getHeight();//获得下拉头的高度
						getViewTreeObserver()
								.removeGlobalOnLayoutListener(this);
					}
				});
	}

控件绘制好以后，我们来处理下拉问题

@Override
	public boolean onTouchEvent(MotionEvent ev) {
		if (mLastY == -1) {//获得触摸时的y坐标
			mLastY = ev.getRawY();
		}

		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mLastY = ev.getRawY();
			break;
		case MotionEvent.ACTION_MOVE:
			final float deltaY = ev.getRawY() - mLastY;//下拉或者上拉了多少offset
			mLastY = ev.getRawY();
			if (getFirstVisiblePosition() == 0
					&& (mHeaderView.getVisiableHeight() > 0 || deltaY > 0)) {//第一个item可见并且头部部分显示或者下拉操作,则表示处于下拉刷新状态
				// 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)) {//最后一个item可见并且footer被上拉显示或者上拉操作,则表示处于上拉刷新状态
				// last item, already pulled up or want to pull up.
				updateFooterHeight(-deltaY / OFFSET_RADIO);
			}
			break;
		default://action_up
			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);
	}

action_down:获得手指触摸的坐标

action_move:这时根据移动坐标，计算出offset，我们就可以改变header的高度(当然也可能是上拉，判断条件看上面的注释)

判断是下拉刷新，首先要检查listview的第一个item是否可见(也就是header)，如果可见，有两种情况，一头部部分显示，一是下拉操作

接着调用了updateHeaderHeight()用于更新header的高度，从而使header显示出来，同时记录下拉的距离

/**
	 * 更新头部高度
	 * 这个函数用于下拉时，记录下拉了多少
	 * @param delta
	 */
	private void updateHeaderHeight(float delta) {
		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
	}

高度一直更新，所以header会被越拉越大

最后我们松手

action_up:同样判断是下拉还是上拉，这样我们先只看下拉的部分

if (mEnablePullRefresh
						&& mHeaderView.getVisiableHeight() > mHeaderViewHeight) {

mListViewListener.onRefresh();

我们看看resetHeaderHeight()

/**
	 * 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; // 默认最终高度，也就是说要让头部消失
		// 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
		invalidate();
	}

if (mPullRefreshing && height > mHeaderViewHeight)

在下拉松手后，height(下拉过程中使header增加的高度)是大于mHeaderViewHeight(header的真实高度)，所以我们改变了finalHeight，这样就会使header滑动到加载状态

而在加载状态，这时height等于mHeaderViewHeight，所以finalHeight=0，我们再次调用resetHeaderHeight()，就可以使header隐藏

这里有点绕，但是很关键，希望大家仔细理解。

怎么滑动回滚呢，当然是使用Scroller

//从当前位置，返回到头部被隐藏
		mScroller.startScroll(0, height, 0, finalHeight - height,
				SCROLL_DURATION);

@Override
	public void computeScroll() {
		if (mScroller.computeScrollOffset()) {
			if (mScrollBack == SCROLLBACK_HEADER) {
				mHeaderView.setVisiableHeight(mScroller.getCurrY());//改变头部高度，实现回滚
			} else {
				mFooterView.setBottomMargin(mScroller.getCurrY());
			}
			postInvalidate();
			invokeOnScrolling();
		}
		super.computeScroll();
	}

到此位置，下拉刷新就解析完毕了，但是我们没有看到第二次调用resetHeaderHeight()，使下拉头隐藏的操作啊

当然没有，因为我们要在加载完数据，才调用这个函数，也就是说调用时机是不确定的，根据具体需求的，所以控件没有办法觉得什么时候调用，这个调用权在你手上，也就是说我们加载完数据，需要主动调用

xlistview为我们提供了一个public用于主动调用，内部进行了resetHeaderHeight()操作

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

这还有什么困难吗？无非就是拉动的方向不一样

我还是为大家提几个重要的点，首先是保证footer永远在listview的最后一个，怎么保证呢？看下面

@Override
	public void setAdapter(ListAdapter adapter) {
		/*
		 * 将上拉加载更多footer加入listview的底部
		 * 并且保证只加入一次
		 */
		if (mIsFooterReady == false) {
			mIsFooterReady = true;
			addFooterView(mFooterView);//listview原生方法
		}
		super.setAdapter(adapter);
	}

xlistview的上拉加载功能是默认不开启的，我们需要主动调用setPullLoadEnable()函数，完成初始化操作

注意，如果不开启上拉加载，隐藏footer的时候，要将listview自带的分割线也隐藏

/**
	 * 设置上拉加载更多功能是否开启
	 * 如果要开启，必须主动调用这个函数	 
	 * @param enable
	 */
	public void setPullLoadEnable(boolean enable) {
		mEnablePullLoad = enable;
		if (!mEnablePullLoad) {//如果不开启
			mFooterView.hide();//隐藏footer
			mFooterView.setOnClickListener(null);//取消监听
			//make sure "pull up" don't show a line in bottom when listview with one page 
			//保证listview的item之间的分割线消失(最后一条)
			setFooterDividersEnabled(false);//listview原生方法
		} else {
			mPullLoading = false;
			mFooterView.show();
			mFooterView.setState(XListViewFooter.STATE_NORMAL);
			//make sure "pull up" don't show a line in bottom when listview with one page  
			setFooterDividersEnabled(true);
			// both "pull up" and "click" will invoke load more.
			mFooterView.setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View v) {
					startLoadMore();
				}
			});
		}
	}

xlistview解析完毕，我将在”Maxwin-z/XListView-Android(下拉刷新上拉加载)源码解析(二)“贴出几个类的具体代码，很xlistview的简单使用

Maxwin-z/XListView-Android(下拉刷新上拉加载)源码解析(一)

标签：

原文地址：http://blog.csdn.net/crazy__chen/article/details/45956179