本次解析的内容,是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>
头部java类
- 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();
- }
通过Scroller通过的位置,改变头部高度,实现回滚。
到此位置,下拉刷新就解析完毕了,但是我们没有看到第二次调用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);
- }
在setAdapter里面,调用addFooterView()保证footer的位置
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();
- }
- });
- }
- }
其他部分跟header就大同小异了,改变footer的margin-bottom,就可以产生上拉的效果。
xlistview解析完毕,我将在”Maxwin-z/XListView-Android(下拉刷新上拉加载)源码解析(二)“贴出几个类的具体代码,很xlistview的简单使用
转载请注明出处http://blog.csdn.net/crazy__chen/article/details/45956179
源文件下载地址http://download.csdn.net/detail/kangaroo835127729/8736887