码迷，mamicode.com
首页 > 移动开发 > 详细

android最基本的lsitvew实现下拉刷新，上拉加载更多的demo

时间：2015-05-14 14:24:16      阅读：259      评论：0      收藏：0      [点我收藏+]

标签：android   listview   刷新   数据   

       接着上次来讲，这次来动手写一下listview的下拉刷新功能和上拉加载更多功能。

       当然google在android4.0以上的API里面的提供了一个可以下拉加载更多的控件，这个小圆圈加载控件在豆瓣，知乎日报里面都有运用到，而我在下一篇博客也会提到。

       先来了解一下最基本的listview的的加载功能吧。

       首先是下拉刷新功能，我先说一下基本的思路。listveiw的面提供了一个addheader（）方法，我们可以重写listview，然后用addheader方法加载我们自定义的加载布局。然后就是隐藏这个header，然后复写监听方法OnScrollListener（）和OnTouch（）方法，最后再提供一个接口方法来让用户实现加载数据。具体的我在代码里面都注释好了。

      再来说一下上拉加载，这个相比于下拉加载就简单多了，我们可以addfooter（）方法添加布局，然后监听OnScrollListener就可以了，当最后一个可见的item等于总数量的item时，就可以加载数据了。具体在代码里面斗注释好了。


效果图：

技术分享

技术分享

先发布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.listview_pulltorefresh.MainActivity" >

    <com.example.listview_pulltorefresh.RefreshListview 
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </com.example.listview_pulltorefresh.RefreshListview>
    
</RelativeLayout>

header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" >

        <LinearLayout
            android:id="@+id/layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="下拉刷新" />

            <TextView
                android:id="@+id/lastrefresh_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <ImageView
            android:id="@+id/arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_toLeftOf="@id/layout"
            android:src="@drawable/pull_to_refresh_arrow" />
        <!-- android:indeterminateDrawable="@drawable/loading_anim" -->

        <ProgressBar
            android:id="@+id/progress"
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_toLeftOf="@id/layout"
            android:visibility="gone" />
    </RelativeLayout>

</LinearLayout>


footer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/load_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" >

        <ProgressBar
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="正在加载"/>
    </LinearLayout>

</LinearLayout>

listitem.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <ImageView 
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:src="@drawable/ic_launcher"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="91dp"
        android:layout_toRightOf="@+id/image"
        android:text="数据列" />

</RelativeLayout>

自定义的listview方法：

package com.example.listview_pulltorefresh;

import java.sql.Date;
import java.text.SimpleDateFormat;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;
import android.widget.AbsListView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;

public class RefreshListview extends ListView {
	private View header;// 顶部布局文件
	private View footer;// 底部布局
	private int headerHeight;// 顶部布局文件的高度
	private int firstVisibleItem;// 当前第一个可见item的位置
	private boolean isRemark;// 标记当前listviews是否最顶端摁下
	private int startY;// 开始的Y值

	private int mscrollState;// 当前listview的滚动状态
	private int state;// 当前状态
	private static final int NONE = 0;// 正常状态
	private static final int PULL = 1;// 下拉状态
	private static final int RELEASE = 2;// 松开状态
	private static final int REFRESHING = 3;// 刷新状态
	
	
	private int mtotalItemCount;//全部item的数量
	private int lastVisableItem;//最后一个可见的item
	private boolean isLoading=false;//是否正在加载

	public RefreshListview(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		initView(context);
	}

	public RefreshListview(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		initView(context);
	}

	public RefreshListview(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		initView(context);
	}

	/**
	 * 添加顶部布局文件
	 * 
	 * @param context
	 */
	private void initView(Context context) {
		LayoutInflater inflater = LayoutInflater.from(context);
		footer = inflater.inflate(R.layout.footer_loading, null, false);
		header = inflater.inflate(R.layout.header_layout, null, false);
		measureView(header);
		headerHeight = header.getMeasuredHeight();
		Log.i("test", "headHeight:" + headerHeight);
		topPadding(-headerHeight);
		this.addHeaderView(header);
		//先设置底部隐藏
		footer.setVisibility(View.GONE);
		this.addFooterView(footer);
		this.setOnScrollListener(new OnScrollListener() {

			@Override
			public void onScrollStateChanged(AbsListView view, int scrollState) {
				// TODO Auto-generated method stub
				mscrollState = scrollState;
				
				//最后一个可见的item是总数量，并且当前滚动状态停止，就加载数据
				if (mtotalItemCount==lastVisableItem&&scrollState==OnScrollListener.SCROLL_STATE_IDLE) {
					if (!isLoading) {
						//加载数据
						isLoading=true;
						footer.setVisibility(VISIBLE);
						mListener2.onReflashMore();
						
					}
					
					
				}
			}

			/**
			 * firstvisebleitem第一个可见的位置
			 */
			@Override
			public void onScroll(AbsListView view, int firstVisibleItem,
					int visibleItemCount, int totalItemCount) {
				// TODO Auto-generated method stub
				lastVisableItem=firstVisibleItem+visibleItemCount;
				mtotalItemCount=totalItemCount;
			}

		});

		this.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
					if (firstVisibleItem == 0) {
						isRemark = true;
						startY = (int) event.getY();
					}
				case MotionEvent.ACTION_MOVE:
					onMove(event);

					break;
				case MotionEvent.ACTION_UP:
					if (state == RELEASE) {

						state = REFRESHING;
						reflashViewByState();
						mListener.onrReflash(); // 加载数据
						// 在外部调用reflashcomplete
					} else if (state == PULL) {
						state = NONE;
						isRemark = false;
						reflashViewByState();
					}
					break;

				default:
					break;
				}
				return false;
			}
		});
	}

	/**
	 * 通过view获取layoutparams，然后初始化lp， 要调用measure（）方法来设置子view的宽高
	 * measure的方法参数有变化的是用MeasureSpec.makeMeasureSpec设置
	 * 没有变化的用getChildMeasureSpec（）方法设置
	 * 
	 * @param view
	 */

	public void measureView(View view) {
		ViewGroup.LayoutParams lParams = view.getLayoutParams();
		if (lParams == null) {
			lParams = new ViewGroup.LayoutParams(
					ViewGroup.LayoutParams.MATCH_PARENT,
					ViewGroup.LayoutParams.WRAP_CONTENT);
			// spec左右边距，padding内边距
			int width = ViewGroup.getChildMeasureSpec(0, 0, lParams.width);
			int height;
			int tempHeight = lParams.height;
			if (tempHeight > 0) {
				// 填充用exactly
				height = MeasureSpec.makeMeasureSpec(tempHeight,
						MeasureSpec.EXACTLY);

			} else {
				// 意思就是<=0时，则告诉父布局子view高度填充0
				height = MeasureSpec
						.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
			}
			view.measure(width, height);
		}

	}

	/**
	 * 设置header布局的上边距
	 * 
	 * @param topPadding
	 */
	public void topPadding(int topPadding) {
		header.setPadding(header.getPaddingLeft(), topPadding,
				header.getPaddingRight(), header.getPaddingBottom());
		header.invalidate();
	}

	/**
	 * 判断移动过程中的操作
	 * 
	 * @param event
	 */
	private void onMove(MotionEvent event) {
		// TODO Auto-generated method stub
		if (!isRemark) {
			return;
		}
		int tempY = (int) event.getY();// 获取当前y
		int space = tempY - startY;// 显示的高度
		int topPadding = space - headerHeight;// 因为是要用负值，所以减去高度
		switch (state) {
		case NONE:
			if (space > 0) {
				state = PULL;
				reflashViewByState();
			}

			break;
		case PULL:
			topPadding(topPadding);
			// 大于heigh+30且在滑动时，则是可以刷新
			if (space > headerHeight + 30
					&& mscrollState == OnScrollListener.SCROLL_STATE_TOUCH_SCROLL) {
				state = RELEASE;
				reflashViewByState();
			}

			break;

		case RELEASE:
			topPadding(topPadding);
			// 为释放状态时，则可以回到下拉状态
			if (space < headerHeight + 30) {
				state = PULL;
				reflashViewByState();
			} else if (space <= 0) {
				state = NONE;
				isRemark = false;
				reflashViewByState();
			}

			break;

		case REFRESHING:

			break;

		default:
			break;
		}
	}

	/**
	 * 改变下拉过程中的header布局中的控件的内容
	 */
	public void reflashViewByState() {
		TextView tip = (TextView) header.findViewById(R.id.tip);
		ImageView arrow = (ImageView) header.findViewById(R.id.arrow);
		ProgressBar progressBar = (ProgressBar) header
				.findViewById(R.id.progress);
		// RotateAnimation旋转动画，旋转的角度，相对与自己，中心位置
		RotateAnimation animation = new RotateAnimation(0, 180,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		animation.setDuration(500);// 时间间隔
		animation.setFillAfter(true);// 保存状态
		RotateAnimation animation2 = new RotateAnimation(180, 0,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		animation2.setDuration(500);// 时间间隔
		animation2.setFillAfter(true);// 保存状态
		switch (state) {
		case NONE:
			arrow.clearAnimation();
			topPadding(-headerHeight);
			break;
		case PULL:
			arrow.setVisibility(View.VISIBLE);
			progressBar.setVisibility(GONE);
			arrow.clearAnimation();
			arrow.setAnimation(animation2);
			tip.setText("下拉可以刷新");
			break;
		case RELEASE:
			arrow.setVisibility(View.VISIBLE);
			progressBar.setVisibility(GONE);
			arrow.clearAnimation();
			arrow.setAnimation(animation);
			tip.setText("松开可以刷新");
			break;
		case REFRESHING:
			topPadding(50);
			arrow.clearAnimation();
			arrow.setVisibility(View.GONE);
			progressBar.setVisibility(VISIBLE);
			tip.setText("正在刷新");
			break;

		default:
			break;
		}
	}

	/**
	 * 获取完数据
	 */
	public void reflashComplete() {
		state = NONE;
		isRemark = false;
		reflashViewByState();
		TextView lastTimeReflash = (TextView) header
				.findViewById(R.id.lastrefresh_time);
		SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日 hh:mm:ss");
		Date date = new Date(System.currentTimeMillis());
		String timeString = format.format(date);
		lastTimeReflash.setText(timeString);
	}
	
	/**
	 * 底部加载完毕
	 */
	public void reflashFooterComplete() {
		isLoading=false;
		footer.setVisibility(GONE);
	}

	/**
	 * 刷新数据接口
	 * 
	 * @author nickming
	 *
	 */
	public interface OnReflashListener {
		public void onrReflash();
	}

	public OnReflashListener mListener;// 刷新数据的接口

	public void setOnReflashListener(OnReflashListener listener) {
		mListener = listener;
	}
	
	
	/**
	 * 加载更多接口
	 * @author nickming
	 *
	 */
	public interface OnReflashMoreListener{
		public void onReflashMore();
	}
	
	public OnReflashMoreListener mListener2;
	
	public void  setOnReflashMoreListener(OnReflashMoreListener listener) {
		mListener2=listener;
	}

}


MainActivity.class

package com.example.listview_pulltorefresh;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;

import com.example.listview_pulltorefresh.RefreshListview.OnReflashListener;
import com.example.listview_pulltorefresh.RefreshListview.OnReflashMoreListener;

public class MainActivity extends Activity {
	private RefreshListview mlistview;
	MyAdapter adapter;
	List<DataBean> mdata;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mlistview = (RefreshListview) findViewById(R.id.listview);
		mdata = new ArrayList<DataBean>();
		for (int i = 0; i < 20; i++) {
			DataBean dataBean = new DataBean();
			dataBean.setTextString("数据列:" + i);
			mdata.add(dataBean);
		}
		adapter = new MyAdapter(this, mdata);
		mlistview.setAdapter(adapter);
		mlistview.setOnReflashListener(new OnReflashListener() {

			@Override
			public void onrReflash() {
				// TODO Auto-generated method stub
				// 模拟网络延时
				Handler mHandler = new Handler();
				mHandler.postDelayed(new Runnable() {

					@Override
					public void run() {
						// TODO Auto-generated method stub
						// 获取最新数据
						addHeaderData();
						// 通知布局显示
						adapter.notifyDataSetChanged();
						// listview刷新
						mlistview.reflashComplete();
					}
				}, 3000);

			}
		});
		
		mlistview.setOnReflashMoreListener(new OnReflashMoreListener() {
			
			@Override
			public void onReflashMore() {
				// TODO Auto-generated method stub
				Handler mHandler=new Handler();
				mHandler.postDelayed(new Runnable() {
					
					@Override
					public void run() {
						// TODO Auto-generated method stub
						addFooterData();
						adapter.notifyDataSetChanged();
						mlistview.reflashFooterComplete();
						
					}
				}, 2000);
			}
		});
	}

	public void addHeaderData() {
		for (int i = 0; i < 10; i++) {
			DataBean dataBean = new DataBean();
			String nameString = UUID.randomUUID().toString();
			dataBean.setTextString("最新数据:" + nameString);
			mdata.add(0, dataBean);// 放在最前面
		}
	}
	
	public void addFooterData() {
		for (int i = 0; i < 10; i++) {
			DataBean dataBean = new DataBean();
			String nameString = UUID.randomUUID().toString();
			dataBean.setTextString("最新数据:" + nameString);
			mdata.add( dataBean);// 放在最后面
		}
	}
}

adapter

package com.example.listview_pulltorefresh;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class MyAdapter extends BaseAdapter {

	private Context mcontext;
	private List<DataBean> mData;
	LayoutInflater inflater;

	public MyAdapter(Context context, List<DataBean> mData) {
		super();
		this.mcontext = context;
		this.mData = mData;
		inflater=LayoutInflater.from(context);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mData.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return mData.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		viewHolder holder=null;
		if (convertView == null) {
			convertView = inflater.inflate(R.layout.listitem, parent,false);
			holder = new viewHolder();
			holder.textView = (TextView) convertView
					.findViewById(R.id.textView1);
			convertView.setTag(holder);

		}else {
			holder=(viewHolder) convertView.getTag();
		}
		holder.textView.setText(mData.get(position).getTextString());

		return convertView;
	}

	class viewHolder {
		TextView textView;
	}

}

DataBean.class

package com.example.listview_pulltorefresh;

import android.widget.TextView;

public class DataBean {
	
	String textString;
	
	public DataBean() {
		// TODO Auto-generated constructor stub
	}

	public DataBean(String textString) {
		super();
		this.textString = textString;
	}

	public String getTextString() {
		return textString;
	}

	public void setTextString(String textString) {
		this.textString = textString;
	}
	
	 
	
	

}

基本上没什么问题了，其实实现还是很简单的，不过就是要多多练习。


android最基本的lsitvew实现下拉刷新，上拉加载更多的demo

标签：android   listview   刷新   数据   

原文地址：http://blog.csdn.net/u013982769/article/details/45718857
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！