XListView实现下拉刷新和上拉加载原理解析

2023-09-20 03:18:05 54

XListview是一个非常受欢迎的下拉刷新控件，但是已经停止维护了。之前写过一篇XListview的使用介绍，用起来非常简单，这两天放假无聊，研究了下XListview的实现原理，学到了很多，今天分享给大家。

提前声明，为了让代码更好的理解，我对代码进行了部分删减和重构，如果大家想看原版代码，请去github自行下载。

Xlistview项目主要是三部分：XlistView,XListViewHeader,XListViewFooter，分别是XListView主体、header、footer的实现。下面我们分开来介绍。

下面是修改之后的XListViewHeader代码

publicclassXListViewHeaderextendsLinearLayout{

privatestaticfinalStringHINT_NORMAL="下拉刷新";
privatestaticfinalStringHINT_READY="松开刷新数据";
privatestaticfinalStringHINT_LOADING="正在加载...";

//正常状态
publicfinalstaticintSTATE_NORMAL=0;
//准备刷新状态，也就是箭头方向发生改变之后的状态
publicfinalstaticintSTATE_READY=1;
//刷新状态，箭头变成了progressBar
publicfinalstaticintSTATE_REFRESHING=2;
//布局容器，也就是根布局
privateLinearLayoutcontainer;
//箭头图片
privateImageViewmArrowImageView;
//刷新状态显示
privateProgressBarmProgressBar;
//说明文本
privateTextViewmHintTextView;
//记录当前的状态
privateintmState;
//用于改变箭头的方向的动画
privateAnimationmRotateUpAnim;
privateAnimationmRotateDownAnim;
//动画持续时间
privatefinalintROTATE_ANIM_DURATION=180;

publicXListViewHeader(Contextcontext){
super(context);
initView(context);
}

publicXListViewHeader(Contextcontext,AttributeSetattrs){
super(context,attrs);
initView(context);
}

privatevoidinitView(Contextcontext){
mState=STATE_NORMAL;
//初始情况下，设置下拉刷新view高度为0
LinearLayout.LayoutParamslp=newLinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,0);
container=(LinearLayout)LayoutInflater.from(context).inflate(
R.layout.xlistview_header,null);
addView(container,lp);
//初始化控件
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=newRotateAnimation(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=newRotateAnimation(-180.0f,0.0f,
Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,
0.5f);
mRotateDownAnim.setDuration(ROTATE_ANIM_DURATION);
mRotateDownAnim.setFillAfter(true);
}

//设置header的状态
publicvoidsetState(intstate){
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){
caseSTATE_NORMAL:
if(mState==STATE_READY){
mArrowImageView.startAnimation(mRotateDownAnim);
}
if(mState==STATE_REFRESHING){
mArrowImageView.clearAnimation();
}
mHintTextView.setText(HINT_NORMAL);
break;
caseSTATE_READY:
if(mState!=STATE_READY){
mArrowImageView.clearAnimation();
mArrowImageView.startAnimation(mRotateUpAnim);
mHintTextView.setText(HINT_READY);
}
break;
caseSTATE_REFRESHING:
mHintTextView.setText(HINT_LOADING);
break;
}

mState=state;
}

publicvoidsetVisiableHeight(intheight){
if(height<0)
height=0;
LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)container
.getLayoutParams();
lp.height=height;
container.setLayoutParams(lp);
}

publicintgetVisiableHeight(){
returncontainer.getHeight();
}

publicvoidshow(){
container.setVisibility(View.VISIBLE);
}

publicvoidhide(){
container.setVisibility(View.INVISIBLE);
}

}

XListViewHeader继承自linearLayout，用来实现下拉刷新时的界面展示，可以分为三种状态：正常、准备刷新、正在加载。
在Linearlayout布局里面，主要有指示箭头、说明文本、圆形加载条三个控件。在构造函数中，调用了initView()进行控件的初始化操作。在添加布局文件的时候，指定高度为0，这是为了隐藏header，然后初始化动画，是为了完成箭头的旋转动作。
setState()是设置header的状态，因为header需要根据不同的状态，完成控件隐藏、显示、改变文字等操作，这个方法主要是在XListView里面调用。除此之外，还有setVisiableHeight()和getVisiableHeight()，这两个方法是为了设置和获取Header中根布局文件的高度属性，从而完成拉伸和收缩的效果，而show()和hide()则显然就是完成显示和隐藏的效果。
下面是Header的布局文件

说完了Header，我们再看看Footer。Footer是为了完成加载更多功能时候的界面展示，基本思路和Header是一样的，下面是Footer的代码

publicclassXListViewFooterextendsLinearLayout{

//正常状态
publicfinalstaticintSTATE_NORMAL=0;
//准备状态
publicfinalstaticintSTATE_READY=1;
//加载状态
publicfinalstaticintSTATE_LOADING=2;

privateViewmContentView;
privateViewmProgressBar;
privateTextViewmHintView;

publicXListViewFooter(Contextcontext){
super(context);
initView(context);
}

publicXListViewFooter(Contextcontext,AttributeSetattrs){
super(context,attrs);
initView(context);
}

privatevoidinitView(Contextcontext){

LinearLayoutmoreView=(LinearLayout)LayoutInflater.from(context)
.inflate(R.layout.xlistview_footer,null);
addView(moreView);
moreView.setLayoutParams(newLinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));

mContentView=moreView.findViewById(R.id.xlistview_footer_content);
mProgressBar=moreView.findViewById(R.id.xlistview_footer_progressbar);
mHintView=(TextView)moreView
.findViewById(R.id.xlistview_footer_hint_textview);
}

/**
*设置当前的状态
*
*@paramstate
*/
publicvoidsetState(intstate){

mProgressBar.setVisibility(View.INVISIBLE);
mHintView.setVisibility(View.INVISIBLE);

switch(state){
caseSTATE_READY:
mHintView.setVisibility(View.VISIBLE);
mHintView.setText(R.string.xlistview_footer_hint_ready);
break;

caseSTATE_NORMAL:
mHintView.setVisibility(View.VISIBLE);
mHintView.setText(R.string.xlistview_footer_hint_normal);
break;

caseSTATE_LOADING:
mProgressBar.setVisibility(View.VISIBLE);
break;

}

}

publicvoidsetBottomMargin(intheight){
if(height>0){

LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)mContentView
.getLayoutParams();
lp.bottomMargin=height;
mContentView.setLayoutParams(lp);
}
}

publicintgetBottomMargin(){
LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)mContentView
.getLayoutParams();
returnlp.bottomMargin;
}

publicvoidhide(){
LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)mContentView
.getLayoutParams();
lp.height=0;
mContentView.setLayoutParams(lp);
}

publicvoidshow(){
LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)mContentView
.getLayoutParams();
lp.height=LayoutParams.WRAP_CONTENT;
mContentView.setLayoutParams(lp);
}

}

从上面的代码里面，我们可以看出，footer和header的思路是一样的，只不过，footer的拉伸和显示效果不是通过高度来模拟的，而是通过设置BottomMargin来完成的。
下面是Footer的布局文件

在了解了Header和footer之后，我们就要介绍最核心的XListView的代码实现了。
在介绍代码实现之前，我先介绍一下XListView的实现原理。
首先，一旦使用XListView，Footer和Header就已经添加到我们的ListView上面了，XListView就是通过继承ListView，然后处理了屏幕点击事件和控制滑动实现效果的。所以，如果我们的Adapter中getCount()返回的值是20，那么其实XListView里面是有20+2个item的，这个数量即使我们关闭了XListView的刷新和加载功能，也是不会变化的。Header和Footer通过addHeaderView和addFooterView添加上去之后，如果想实现下拉刷新和上拉加载功能，那么就必须有拉伸效果，所以就像上面的那样，Header是通过设置height，Footer是通过设置BottomMargin来模拟拉伸效果。那么回弹效果呢？仅仅通过设置高度或者是间隔是达不到模拟回弹效果的，因此，就需要用Scroller来实现模拟回弹效果。在说明原理之后，我们开始介绍XListView的核心实现原理。
再次提示，下面的代码经过我重构了，只是为了看起来更好的理解。

publicclassXListViewextendsListView{

privatefinalstaticintSCROLLBACK_HEADER=0;
privatefinalstaticintSCROLLBACK_FOOTER=1;
//滑动时长
privatefinalstaticintSCROLL_DURATION=400;
//加载更多的距离
privatefinalstaticintPULL_LOAD_MORE_DELTA=100;
//滑动比例
privatefinalstaticfloatOFFSET_RADIO=2f;
//记录按下点的y坐标
privatefloatlastY;
//用来回滚
privateScrollerscroller;
privateIXListViewListenermListViewListener;
privateXListViewHeaderheaderView;
privateRelativeLayoutheaderViewContent;
//header的高度
privateintheaderHeight;
//是否能够刷新
privatebooleanenableRefresh=true;
//是否正在刷新
privatebooleanisRefreashing=false;
//footer
privateXListViewFooterfooterView;
//是否可以加载更多
privatebooleanenableLoadMore;
//是否正在加载
privatebooleanisLoadingMore;
//是否footer准备状态
privatebooleanisFooterAdd=false;
//totallistitems,usedtodetectisatthebottomoflistview.
privateinttotalItemCount;
//记录是从header还是footer返回
privateintmScrollBack;

privatestaticfinalStringTAG="XListView";

publicXListView(Contextcontext){
super(context);
initView(context);
}

publicXListView(Contextcontext,AttributeSetattrs){
super(context,attrs);
initView(context);
}

publicXListView(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);
initView(context);
}

privatevoidinitView(Contextcontext){

scroller=newScroller(context,newDecelerateInterpolator());

headerView=newXListViewHeader(context);
footerView=newXListViewFooter(context);

headerViewContent=(RelativeLayout)headerView
.findViewById(R.id.xlistview_header_content);
headerView.getViewTreeObserver().addOnGlobalLayoutListener(
newOnGlobalLayoutListener(){
@SuppressWarnings("deprecation")
@Override
publicvoidonGlobalLayout(){
headerHeight=headerViewContent.getHeight();
getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
}
});
addHeaderView(headerView);

}

@Override
publicvoidsetAdapter(ListAdapteradapter){
//确保footer最后添加并且只添加一次
if(isFooterAdd==false){
isFooterAdd=true;
addFooterView(footerView);
}
super.setAdapter(adapter);

}

@Override
publicbooleanonTouchEvent(MotionEventev){

totalItemCount=getAdapter().getCount();
switch(ev.getAction()){
caseMotionEvent.ACTION_DOWN:
//记录按下的坐标
lastY=ev.getRawY();
break;
caseMotionEvent.ACTION_MOVE:
//计算移动距离
floatdeltaY=ev.getRawY()-lastY;
lastY=ev.getRawY();
//是第一项并且标题已经显示或者是在下拉
if(getFirstVisiblePosition()==0
&&(headerView.getVisiableHeight()>0||deltaY>0)){
updateHeaderHeight(deltaY/OFFSET_RADIO);
}elseif(getLastVisiblePosition()==totalItemCount-1
&&(footerView.getBottomMargin()>0||deltaY<0)){
updateFooterHeight(-deltaY/OFFSET_RADIO);
}
break;

caseMotionEvent.ACTION_UP:

if(getFirstVisiblePosition()==0){
if(enableRefresh
&&headerView.getVisiableHeight()>headerHeight){
isRefreashing=true;
headerView.setState(XListViewHeader.STATE_REFRESHING);
if(mListViewListener!=null){
mListViewListener.onRefresh();
}
}
resetHeaderHeight();
}elseif(getLastVisiblePosition()==totalItemCount-1){
if(enableLoadMore
&&footerView.getBottomMargin()>PULL_LOAD_MORE_DELTA){
startLoadMore();
}
resetFooterHeight();
}
break;
}
returnsuper.onTouchEvent(ev);
}

@Override
publicvoidcomputeScroll(){

//松手之后调用
if(scroller.computeScrollOffset()){

if(mScrollBack==SCROLLBACK_HEADER){
headerView.setVisiableHeight(scroller.getCurrY());
}else{
footerView.setBottomMargin(scroller.getCurrY());
}
postInvalidate();
}
super.computeScroll();

}

publicvoidsetPullRefreshEnable(booleanenable){
enableRefresh=enable;

if(!enableRefresh){
headerView.hide();
}else{
headerView.show();
}
}

publicvoidsetPullLoadEnable(booleanenable){
enableLoadMore=enable;
if(!enableLoadMore){
footerView.hide();
footerView.setOnClickListener(null);
}else{
isLoadingMore=false;
footerView.show();
footerView.setState(XListViewFooter.STATE_NORMAL);
footerView.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
startLoadMore();
}
});
}
}

publicvoidstopRefresh(){
if(isRefreashing==true){
isRefreashing=false;
resetHeaderHeight();
}
}

publicvoidstopLoadMore(){
if(isLoadingMore==true){
isLoadingMore=false;
footerView.setState(XListViewFooter.STATE_NORMAL);
}
}

privatevoidupdateHeaderHeight(floatdelta){
headerView.setVisiableHeight((int)delta
+headerView.getVisiableHeight());
//未处于刷新状态，更新箭头
if(enableRefresh&&!isRefreashing){
if(headerView.getVisiableHeight()>headerHeight){
headerView.setState(XListViewHeader.STATE_READY);
}else{
headerView.setState(XListViewHeader.STATE_NORMAL);
}
}

}

privatevoidresetHeaderHeight(){
//当前的可见高度
intheight=headerView.getVisiableHeight();
//如果正在刷新并且高度没有完全展示
if((isRefreashing&&height<=headerHeight)||(height==0)){
return;
}
//默认会回滚到header的位置
intfinalHeight=0;
//如果是正在刷新状态，则回滚到header的高度
if(isRefreashing&&height>headerHeight){
finalHeight=headerHeight;
}
mScrollBack=SCROLLBACK_HEADER;
//回滚到指定位置
scroller.startScroll(0,height,0,finalHeight-height,
SCROLL_DURATION);
//触发computeScroll
invalidate();
}

privatevoidupdateFooterHeight(floatdelta){
intheight=footerView.getBottomMargin()+(int)delta;
if(enableLoadMore&&!isLoadingMore){
if(height>PULL_LOAD_MORE_DELTA){
footerView.setState(XListViewFooter.STATE_READY);
}else{
footerView.setState(XListViewFooter.STATE_NORMAL);
}
}
footerView.setBottomMargin(height);

}

privatevoidresetFooterHeight(){
intbottomMargin=footerView.getBottomMargin();
if(bottomMargin>0){
mScrollBack=SCROLLBACK_FOOTER;
scroller.startScroll(0,bottomMargin,0,-bottomMargin,
SCROLL_DURATION);
invalidate();
}
}

privatevoidstartLoadMore(){
isLoadingMore=true;
footerView.setState(XListViewFooter.STATE_LOADING);
if(mListViewListener!=null){
mListViewListener.onLoadMore();
}
}

publicvoidsetXListViewListener(IXListViewListenerl){
mListViewListener=l;
}

publicinterfaceIXListViewListener{

publicvoidonRefresh();

publicvoidonLoadMore();
}
}

在三个构造函数中，都调用initView进行了header和footer的初始化，并且定义了一个Scroller，并传入了一个减速的插值器，为了模仿回弹效果。在initView方法里面，因为header可能还没初始化完毕，所以通过GlobalLayoutlistener来获取了header的高度，然后addHeaderView添加到了listview上面。
通过重写setAdapter方法，保证Footer最后天假，并且只添加一次。
最重要的，要属onTouchEvent了。在方法开始之前，通过getAdapter().getCount()获取到了item的总数，便于计算位置。这个操作在源代码中是通过scrollerListener完成的，因为ScrollerListener在这里没大有用，所以我直接去掉了，然后把位置改到了这里。如果在setAdapter里面获取的话，只能获取到没有header和footer的item数量。
在ACTION_DOWN里面，进行了lastY的初始化，lastY是为了判断移动方向的，因为在ACTION_MOVE里面，通过ev.getRawY()-lastY可以计算出手指的移动趋势，如果>0，那么就是向下滑动，反之向上。getRowY()是获取元Y坐标，意思就是和Window和View坐标没有关系的坐标，代表在屏幕上的绝对位置。然后在下面的代码里面，如果第一项可见并且header的可见高度>0或者是向下滑动，就说明用户在向下拉动或者是向上拉动header，也就是指示箭头显示的时候的状态，这时候调用了updateHeaderHeight，来更新header的高度，实现header可以跟随手指动作上下移动。这里有个OFFSET_RADIO，这个值是一个移动比例，就是说，你手指在Y方向上移动400px，如果比例是2，那么屏幕上的控件移动就是400px/2=200px，可以通过这个值来控制用户的滑动体验。下面的关于footer的判断与此类似，不再赘述。
当用户移开手指之后，ACTION_UP方法就会被调用。在这里面，只对可见位置是0和item总数-1的位置进行了处理，其实正好对应header和footer。如果位置是0，并且可以刷新，然后当前的header可见高度>原始高度的话，就说明用户确实是要进行刷新操作，所以通过setState改变header的状态，如果有监听器的话，就调用onRefresh方法，然后调用resetHeaderHeight初始化header的状态，因为footer的操作如出一辙，所以不再赘述。但是在footer中有一个PULL_LOAD_MORE_DELTA，这个值是加载更多触发条件的临界值，只有footer的间隔超过这个值之后，才能够触发加载更多的功能，因此我们可以修改这个值来改变用户体验。
说到现在，大家应该明白基本的原理了，其实XListView就是通过对用户手势的方向和距离的判断，来动态的改变Header和Footer实现的功能，所以如果我们也有类似的需求，就可以参照这种思路进行自定义。
下面再说几个比较重要的方法。
前面我们说道，在ACTION_MOVE里面，会不断的调用下面的updateXXXX方法，来动态的改变header和fooer的状态，

privatevoidupdateHeaderHeight(floatdelta){
headerView.setVisiableHeight((int)delta
+headerView.getVisiableHeight());
//未处于刷新状态，更新箭头
if(enableRefresh&&!isRefreashing){
if(headerView.getVisiableHeight()>headerHeight){
headerView.setState(XListViewHeader.STATE_READY);
}else{
headerView.setState(XListViewHeader.STATE_NORMAL);
}
}

}

privatevoidupdateFooterHeight(floatdelta){
intheight=footerView.getBottomMargin()+(int)delta;
if(enableLoadMore&&!isLoadingMore){
if(height>PULL_LOAD_MORE_DELTA){
footerView.setState(XListViewFooter.STATE_READY);
}else{
footerView.setState(XListViewFooter.STATE_NORMAL);
}
}
footerView.setBottomMargin(height);

}

在移开手指之后，会调用下面的resetXXX来初始化header和footer的状态

privatevoidresetHeaderHeight(){
//当前的可见高度
intheight=headerView.getVisiableHeight();
//如果正在刷新并且高度没有完全展示
if((isRefreashing&&height<=headerHeight)||(height==0)){
return;
}
//默认会回滚到header的位置
intfinalHeight=0;
//如果是正在刷新状态，则回滚到header的高度
if(isRefreashing&&height>headerHeight){
finalHeight=headerHeight;
}
mScrollBack=SCROLLBACK_HEADER;
//回滚到指定位置
scroller.startScroll(0,height,0,finalHeight-height,
SCROLL_DURATION);
//触发computeScroll
invalidate();
}

privatevoidresetFooterHeight(){
intbottomMargin=footerView.getBottomMargin();
if(bottomMargin>0){
mScrollBack=SCROLLBACK_FOOTER;
scroller.startScroll(0,bottomMargin,0,-bottomMargin,
SCROLL_DURATION);
invalidate();
}
}

我们可以看到，滚动操作不是通过直接的设置高度来实现的，而是通过Scroller.startScroll()来实现的，通过调用此方法，computeScroll()就会被调用，然后在这个里面，根据mScrollBack区分是哪一个滚动，然后再通过设置高度和间隔，就可以完成收缩的效果了。
至此，整个XListView的实现原理就完全的搞明白了，以后如果做滚动类的自定义控件，应该也有思路了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

XListView实现下拉刷新和上拉加载原理解析

热门推荐

随机推荐