Android中实现下拉刷新

分类：Android 2012-03-23 15:43 1404人阅读评论(1) 收藏举报

需求：项目中的消息列表界面要求实现类似sina微博的下拉刷新；

思路：一般的消息列表为ListView类型，将list加载到adapter中，再将adapter加载到ListView中，从而实现消息列表的展示。而下拉刷新要求给消息列表加一个头部，其中有图片（向上/向下箭头）和提示字样（下拉刷新/松开刷新），从而我们需要做的事情：1.需要做一个head.xm来实现头部的样式定义；2.需要自定义一个继承了ListView的MsgListView，在该类中将head加在MsgListView对象的头部；3.将原有的消息界面布局文件中的ListView改为cn.xd.microblogging.tools.MsgListView（包名.MsgListView）；4.将原有的消息界面后台代码中创建的ListView对象改为MsgListView对象，注意消息界面Activity要继承ListActivity，并且实现其刷新监听。

说明：实现下拉刷新很简单，仅需要4个文件：MsgRcvListActivity.java（消息列表界面的后台文件，真正的刷新动作在这里完成，下拉刷新相关code下面列出），msgrcvlistactivity.xml（消息列表界面的前台文件，下拉刷新相关code下面列出），MsgListView.java（本文件拿来主义即可不用改，下拉刷新自定义的列表类，监听并执行下拉刷新、松开刷新、正在刷新、完成刷新等状态的改变，但真正的刷新动作不在这里完成，完整code下面列出），head.xml（本文件拿来主义即可不用改，下拉刷新的样式定义文件，包括向上、向下箭头，刷新状态提示等，完整code下面列出）；

效果：

Android中实现下拉刷新_第1张图片

代码：

1.MsgRcvListActivity.java ：

[java] view plain copy

publicclassMsgRcvListActivityextendsListActivity{//注意：要继承ListActivity
…………//变量定义，略
MsgListViewlist;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.msgrcvlistactivity);
list=(MsgListView)findViewById(android.R.id.list);//继承ListActivity，id要写成android.R.id.list，否则报异常
…………//其他代码，略
//刷新监听，此处实现真正刷新
list.setonRefreshListener(newOnRefreshListener(){
publicvoidonRefresh(){
newAsyncTask<Void,Void,Void>(){
protectedVoiddoInBackground(Void...params){
try{
Thread.sleep(1000);
}catch(Exceptione){
e.printStackTrace();
}
returnnull;
}
@Override
protectedvoidonPostExecute(Voidresult){
adapter.notifyDataSetChanged();
newMsgLoad().execute();//刷新监听中，真正执行刷新动作
list.onRefreshComplete();
}
}.execute(null);
}
});
list.setItemsCanFocus(false);
list.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
}
…………//其他代码，略
publicclassMsgLoadextendsAsyncTask<Void,Void,List<MsgBean>>{
…………//其他代码，略
}
}

2.msgrcvlistactivity.xml：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayoutandroid:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000">
//将ListView改为包名.自定义的列表类名，MsgListView.java代码见后，此代码不需改通用，下拉刷新相关即此处，其他无关
<cn.xd.microblogging.tools.MsgListView
android:id="@android:id/list"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1.0"
android:drawSelectorOnTop="false"
android:scrollbars="vertical"
android:fadingEdgeLength="0dip"
android:divider="@drawable/line"
android:dividerHeight="3.0dip"
android:cacheColorHint="#00000000"
android:paddingBottom="40dp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/msg_list_load"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayoutandroid:id="@android:id/empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include
android:id="@android:id/empty"
layout="@layout/empty_loading"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

3.MsgListView.java，拷进项目基本不需改：

[java] view plain copy

packagecn.xd.microblogging.tools;
importjava.util.Date;
importcn.xd.microblogging.R;
importandroid.content.Context;
importandroid.util.AttributeSet;
importandroid.util.Log;
importandroid.view.LayoutInflater;
importandroid.view.MotionEvent;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.view.animation.LinearInterpolator;
importandroid.view.animation.RotateAnimation;
importandroid.widget.AbsListView;
importandroid.widget.BaseAdapter;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.ListView;
importandroid.widget.AbsListView.OnScrollListener;
importandroid.widget.ProgressBar;
importandroid.widget.TextView;
/**
*
*自定义MsgListView，继承了ListView，
*但填充了listview的头部，即下拉刷新样式，并实现其功能
*@authoryanbo
*
*/
publicclassMsgListViewextendsListViewimplementsOnScrollListener{
privatefinalstaticintRELEASE_To_REFRESH=0;
privatefinalstaticintPULL_To_REFRESH=1;
privatefinalstaticintREFRESHING=2;
privatefinalstaticintDONE=3;
privateLayoutInflaterinflater;
privateLinearLayoutheadView;//头部
privateTextViewtipsTextview;//下拉刷新
privateTextViewlastUpdatedTextView;//最新更新
privateImageViewarrowImageView;//箭头
privateProgressBarprogressBar;//刷新进度条
privateRotateAnimationanimation;//旋转特效刷新中箭头翻转向下变向上
privateRotateAnimationreverseAnimation;
//用于保证startY的值在一个完整的touch事件中只被记录一次
privatebooleanisRecored;
privateintheadContentWidth;//头部宽度
privateintheadContentHeight;//头部高度
privateintstartY;//高度起始位置，用来记录与头部距离
privateintfirstItemIndex;//列表中首行索引，用来记录其与头部距离
privateintstate;//下拉刷新中、松开刷新中、正在刷新中、完成刷新
privatebooleanisBack;
publicOnRefreshListenerrefreshListener;//刷新监听
privatefinalstaticStringTAG="abc";
publicMsgListView(Contextcontext,AttributeSetattrs){
super(context,attrs);
init(context);
}
privatevoidinit(Contextcontext){
inflater=LayoutInflater.from(context);
headView=(LinearLayout)inflater.inflate(R.layout.head,null);//listview拼接headview
arrowImageView=(ImageView)headView
.findViewById(R.id.head_arrowImageView);//headview中各view
arrowImageView.setMinimumWidth(50);
arrowImageView.setMinimumHeight(50);
progressBar=(ProgressBar)headView
.findViewById(R.id.head_progressBar);//headview中各view
tipsTextview=(TextView)headView.findViewById(R.id.head_tipsTextView);//headview中各view
lastUpdatedTextView=(TextView)headView
.findViewById(R.id.head_lastUpdatedTextView);//headview中各view
measureView(headView);
headContentHeight=headView.getMeasuredHeight();//头部高度
headContentWidth=headView.getMeasuredWidth();//头部宽度
headView.setPadding(0,-1*headContentHeight,0,0);//setPadding(intleft,inttop,intright,intbottom)
headView.invalidate();//Invalidatethewholeview
Log.v("size","width:"+headContentWidth+"height:"
+headContentHeight);
addHeaderView(headView);//添加进headview
setOnScrollListener(this);//滚动监听
animation=newRotateAnimation(0,-180,
RotateAnimation.RELATIVE_TO_SELF,0.5f,
RotateAnimation.RELATIVE_TO_SELF,0.5f);
animation.setInterpolator(newLinearInterpolator());
animation.setDuration(250);
animation.setFillAfter(true);//特效animation设置
reverseAnimation=newRotateAnimation(-180,0,
RotateAnimation.RELATIVE_TO_SELF,0.5f,
RotateAnimation.RELATIVE_TO_SELF,0.5f);
reverseAnimation.setInterpolator(newLinearInterpolator());
reverseAnimation.setDuration(250);
reverseAnimation.setFillAfter(true);//特效reverseAnimation设置
}
publicvoidonScroll(AbsListViewarg0,intfirstVisiableItem,intarg2,//滚动事件
intarg3){
firstItemIndex=firstVisiableItem;//得到首item索引
}
publicvoidonScrollStateChanged(AbsListViewarg0,intarg1){
}
publicbooleanonTouchEvent(MotionEventevent){//触摸事件
switch(event.getAction()){
caseMotionEvent.ACTION_DOWN://手按下对应下拉刷新状态
if(firstItemIndex==0&&!isRecored){//如果首item索引为0，且尚未记录startY,则在下拉时记录之，并执行isRecored=true;
startY=(int)event.getY();
isRecored=true;
Log.v(TAG,"在down时候记录当前位置‘");
}
break;
caseMotionEvent.ACTION_UP://手松开对应松开刷新状态
if(state!=REFRESHING){//手松开有4个状态：下拉刷新、松开刷新、正在刷新、完成刷新。如果当前不是正在刷新
if(state==DONE){//如果当前是完成刷新，什么都不做
}
if(state==PULL_To_REFRESH){//如果当前是下拉刷新，状态设为完成刷新（意即下拉刷新中就松开了，实际未完成刷新），执行changeHeaderViewByState()
state=DONE;
changeHeaderViewByState();
Log.v(TAG,"由下拉刷新状态，到done状态");
}
if(state==RELEASE_To_REFRESH){//如果当前是松开刷新，状态设为正在刷新（意即松开刷新中松开手，才是真正地刷新），执行changeHeaderViewByState()
state=REFRESHING;
changeHeaderViewByState();
onRefresh();//真正刷新，所以执行onrefresh，执行后状态设为完成刷新
Log.v(TAG,"由松开刷新状态，到done状态");
}
}
isRecored=false;//手松开，则无论怎样，可以重新记录startY,因为只要手松开就认为一次刷新已完成
isBack=false;
break;
caseMotionEvent.ACTION_MOVE://手拖动，拖动过程中不断地实时记录当前位置
inttempY=(int)event.getY();
if(!isRecored&&firstItemIndex==0){//如果首item索引为0，且尚未记录startY,则在拖动时记录之，并执行isRecored=true;
Log.v(TAG,"在move时候记录下位置");
isRecored=true;
startY=tempY;
}
if(state!=REFRESHING&&isRecored){//如果状态不是正在刷新，且已记录startY：tempY为拖动过程中一直在变的高度，startY为拖动起始高度
//可以松手去刷新了
if(state==RELEASE_To_REFRESH){//如果状态是松开刷新
//往上推了，推到了屏幕足够掩盖head的程度，但是还没有推到全部掩盖的地步
if((tempY-startY<headContentHeight)//如果实时高度大于起始高度，且两者之差小于头部高度，则状态设为下拉刷新
&&(tempY-startY)>0){
state=PULL_To_REFRESH;
changeHeaderViewByState();
Log.v(TAG,"由松开刷新状态转变到下拉刷新状态");
}
//一下子推到顶了
elseif(tempY-startY<=0){//如果实时高度小于等于起始高度了，则说明到顶了，状态设为完成刷新
state=DONE;
changeHeaderViewByState();
Log.v(TAG,"由松开刷新状态转变到done状态");
}
//往下拉了，或者还没有上推到屏幕顶部掩盖head的地步
else{//如果当前拖动过程中既没有到下拉刷新的地步，也没有到完成刷新（到顶）的地步，则保持松开刷新状态
//不用进行特别的操作，只用更新paddingTop的值就行了
}
}
//还没有到达显示松开刷新的时候,DONE或者是PULL_To_REFRESH状态
if(state==PULL_To_REFRESH){//如果状态是下拉刷新
//下拉到可以进入RELEASE_TO_REFRESH的状态
if(tempY-startY>=headContentHeight){//如果实时高度与起始高度之差大于等于头部高度，则状态设为松开刷新
state=RELEASE_To_REFRESH;
isBack=true;
changeHeaderViewByState();
Log.v(TAG,"由done或者下拉刷新状态转变到松开刷新");
}
//上推到顶了
elseif(tempY-startY<=0){//如果实时高度小于等于起始高度了，则说明到顶了，状态设为完成刷新
state=DONE;
changeHeaderViewByState();
Log.v(TAG,"由DOne或者下拉刷新状态转变到done状态");
}
}
//done状态下
if(state==DONE){//如果状态是完成刷新
if(tempY-startY>0){//如果实时高度大于起始高度了，则状态设为下拉刷新
state=PULL_To_REFRESH;
changeHeaderViewByState();
}
}
//更新headView的size
if(state==PULL_To_REFRESH){//如果状态是下拉刷新，更新headview的size?
headView.setPadding(0,-1*headContentHeight
+(tempY-startY),0,0);
headView.invalidate();
}
//更新headView的paddingTop
if(state==RELEASE_To_REFRESH){//如果状态是松开刷新，更新headview的paddingtop?
headView.setPadding(0,tempY-startY-headContentHeight,
0,0);
headView.invalidate();
}
}
break;
}
returnsuper.onTouchEvent(event);
}
//当状态改变时候，调用该方法，以更新界面
privatevoidchangeHeaderViewByState(){
switch(state){
caseRELEASE_To_REFRESH:
arrowImageView.setVisibility(View.VISIBLE);
progressBar.setVisibility(View.GONE);
tipsTextview.setVisibility(View.VISIBLE);
lastUpdatedTextView.setVisibility(View.VISIBLE);
arrowImageView.clearAnimation();
arrowImageView.startAnimation(animation);
tipsTextview.setText("松开刷新");
Log.v(TAG,"当前状态，松开刷新");
break;
casePULL_To_REFRESH:
progressBar.setVisibility(View.GONE);
tipsTextview.setVisibility(View.VISIBLE);
lastUpdatedTextView.setVisibility(View.VISIBLE);
arrowImageView.clearAnimation();
arrowImageView.setVisibility(View.VISIBLE);
//是由RELEASE_To_REFRESH状态转变来的
if(isBack){
isBack=false;
arrowImageView.clearAnimation();
arrowImageView.startAnimation(reverseAnimation);
tipsTextview.setText("下拉刷新");
}else{
tipsTextview.setText("下拉刷新");
}
Log.v(TAG,"当前状态，下拉刷新");
break;
caseREFRESHING:
headView.setPadding(0,0,0,0);
headView.invalidate();
progressBar.setVisibility(View.VISIBLE);
arrowImageView.clearAnimation();
arrowImageView.setVisibility(View.GONE);
tipsTextview.setText("正在刷新...");
lastUpdatedTextView.setVisibility(View.VISIBLE);
Log.v(TAG,"当前状态,正在刷新...");
break;
caseDONE:
headView.setPadding(0,-1*headContentHeight,0,0);
headView.invalidate();
progressBar.setVisibility(View.GONE);
arrowImageView.clearAnimation();
arrowImageView
.setImageResource(R.drawable.ic_pulltorefresh_arrow);
tipsTextview.setText("下拉刷新");
lastUpdatedTextView.setVisibility(View.VISIBLE);
Log.v(TAG,"当前状态，done");
break;
}
}
publicvoidsetonRefreshListener(OnRefreshListenerrefreshListener){
this.refreshListener=refreshListener;
}
publicinterfaceOnRefreshListener{
publicvoidonRefresh();
}
publicvoidonRefreshComplete(){
state=DONE;
lastUpdatedTextView.setText("最近更新:"+newDate().toLocaleString());//刷新完成时，头部提醒的刷新日期
changeHeaderViewByState();
}
privatevoidonRefresh(){
if(refreshListener!=null){
refreshListener.onRefresh();
}
}
//此方法直接照搬自网络上的一个下拉刷新的demo，此处是“估计”headView的width以及height
privatevoidmeasureView(Viewchild){
ViewGroup.LayoutParamsp=child.getLayoutParams();
if(p==null){
p=newViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
}
intchildWidthSpec=ViewGroup.getChildMeasureSpec(0,0+0,p.width);
intlpHeight=p.height;
intchildHeightSpec;
if(lpHeight>0){
childHeightSpec=MeasureSpec.makeMeasureSpec(lpHeight,
MeasureSpec.EXACTLY);
}else{
childHeightSpec=MeasureSpec.makeMeasureSpec(0,
MeasureSpec.UNSPECIFIED);
}
child.measure(childWidthSpec,childHeightSpec);
}
}

4.head.xml，拷进项目基本不需改：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/head_rootLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/head_contentLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30dp">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true">
<ImageView
android:id="@+id/head_arrowImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_pulltorefresh_arrow"
android:contentDescription="@string/app_name"/>
<ProgressBar
android:id="@+id/head_progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"/>
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/head_tipsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/pulltorefresh"
android:textColor="#ffffff"
android:textSize="20sp"/>
<TextView
android:id="@+id/head_lastUpdatedTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lastupdate"
android:textColor="#cc6600"
android:textSize="10sp"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

殊途同归，扩展借鉴其他下拉刷新方式：

http://blog.csdn.net/nono_love_lilith/article/details/7100845
http://blog.csdn.net/nono_love_lilith/article/details/7202651

Android中实现下拉刷新

Android中实现下拉刷新

更多相关文章

随机推荐