ListView之二 XListView
本次分析的是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
- 当offset>height,松手以后，应该回到加载状态，如下图。这时header缩小的高度，就是offset-height。最后在数据加载完成，才回缩至不可见
上述过程的回缩，都是手指离开屏幕以后发生的，显然我们要使用Scroller来处理。
下拉刷新原理就讲到这里，上拉加载更多的原理是一样的，只是HeaderView改变的height,而FooterView改变的是margin_bottom。因为上啦加载时我们一般来说，”上拉加载”这个View是要显示的。因此为了让这个View随着我们的拉动而改变位置，我们需要改变其margin_bottom这个LayoutParams布局参数。
XListView已经包含有下拉刷新与上拉加载的功能。我们从这里开始就分析其不同的实现。
2. XListView下拉刷新分析
- XListViewHeader分析
先看XListViewHeader，也就是自定义的头部。头部布局文件R.layout.xlistview_header
可以看到,布局文件包含一个id为xlistview_header_content的RelativeLayout,高度为60dp,主要包含一个LinearLayout用于显示刷新信息及时间，一个ImageView用于显示箭头，一个ProgressBar用于显示进度条。
该布局文件可以自定义，我们需要根据下拉刷新中不同的状态来改变该HeaderView的显示。操作见XListViewHeader类。
- 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的代码
- 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
publicboolean onTouchEvent(MotionEvent ev) {
if(mLastY == -1) {
mLastY= ev.getRawY();
}
switch(ev.getAction()) {
caseMotionEvent.ACTION_DOWN:
mLastY= ev.getRawY();
break;
caseMotionEvent.ACTION_MOVE:
finalfloat 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.
//第一个item可见并且头部部分显示或者下拉操作,则表示处于下拉刷新状态
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最后一个item可见并且footer被上拉显示或者上拉操作,则表示处于上拉刷新状态
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;
}
returnsuper.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.
*/
privatevoid resetHeaderHeight() {
intheight = mHeaderView.getVisiableHeight();
if(height == 0) // not visible.
return;
//refreshing and header isn't shown fully. do nothing.
//正在刷新，或者头部没有完全显示，返回
if(mPullRefreshing && height <= mHeaderViewHeight) {
return;
}
intfinalHeight = 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，下拉刷新相信已经说清楚。整个的下拉刷新操作就分析完成了。