之前用别人的ListView,总是不能满足项目需求,故此特意研究一下自定义listview,和大家分享一下,话不多说,直接上效果图。
好了,那我们下面就开始代码部分。
首先,自定义一个listview,PullToRefreshListView继承自Listview,重写构造方法。
public PullToRefreshListView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public PullToRefreshListView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public PullToRefreshListView(Context context) {
super(context);
init(context);
}
private void init(Context context){
//这里做初始化操作
}
好的,那么,我们来看,一下上面的效果图,首先下拉时需要一个头布局(HeaderView),上拉需要一个 脚布局(FooterView),那我们就先新建两个布局:
头布局:listview_foot.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dip"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" style="android:attr/progressBarStyleSmallInverse"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:text="加载更多..."
android:textColor="@android:color/darker_gray"
android:textSize="18sp" />
LinearLayout>
LinearLayout>
脚布局,listview_header.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dip"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="?android:attr/progressBarStyleSmallInverse"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:text="加载更多..."
android:textColor="@android:color/darker_gray"
android:textSize="18sp" />
LinearLayout>
LinearLayout>
此时在init()方法中调用
this.addHeaderView(headerView); // 向ListView的顶部添加一个view对象
this.addFooterView(footerView);//底部加脚布局
此时已经有一个头一个脚布局出现了,只是,每次都显示出来。那么我们如何一开始隐藏这两个布局呢,很简单,对其布局设置padding(0,-该布局的高度,0,0);这样就可以把头/脚布局隐藏起来。那么我们就来初始化两个布局。
private static final String TAG = "PullToRefreshListView";
private int headerViewHeight; // 头布局的高度
private View headerView; // 头布局的对象
private ImageView ivArrow; // 头布局的剪头
private ProgressBar mProgressBar; // 头布局的进度条
private TextView tvState; // 头布局的状态
private TextView tvLastUpdateTime; // 头最后更新时间
private View footerView; // 脚布局的对象
private int footerViewHeight; // 脚布局的高度
private void init(Context context){
initHeaderView(context);
initFooterView(context);
}
/**
* 初始化脚布局
*/
private void initFooterView(Context context) {
footerView = LinearLayout.inflate(context, R.layout.listview_foot,null);
footerView.measure(0, 0);
footerViewHeight = footerView.getMeasuredHeight();
footerView.setPadding(0, -footerViewHeight, 0, 0);
this.addFooterView(footerView);
}
/**
* 初始化头布局
*/
private void initHeaderView(Context context) {
headerView = LinearLayout.inflate(context, R.layout.listview_header,null);
ivArrow = (ImageView) headerView
.findViewById(R.id.iv_listview_header_arrow);
mProgressBar = (ProgressBar) headerView
.findViewById(R.id.pb_listview_header);
tvState = (TextView) headerView
.findViewById(R.id.tv_listview_header_state);
tvLastUpdateTime = (TextView) headerView
.findViewById(R.id.tv_listview_header_last_update_time);
// 设置最后刷新时间
tvLastUpdateTime.setText("最后刷新时间: " + getLastUpdateTime());
headerView.measure(0, 0); // 系统会帮我们测量出headerView的高度
headerViewHeight = headerView.getMeasuredHeight();
headerView.setPadding(0, -headerViewHeight, 0, 0);
this.addHeaderView(headerView); // 向ListView的顶部添加一个view对象
}
/**
* 获得系统的最新时间
*
* @return
*/
private String getLastUpdateTime() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
return sdf.format(System.currentTimeMillis());
}
在头布局上拉时,箭头有一个动画,那么,我们需要先写个动画,其实是两个,一个是旋转箭头朝上,还有一个是旋转朝下,代码几乎一样。在initHeaderView()方法最后,初始化动画代码:initAnimation();
private Animation upAnimation; // 向上旋转的动画
private Animation downAnimation; // 向下旋转的动画
/**
* 初始化动画
*/
private void initAnimation() {
/*
* Animation.RELATIVE_TO_SELF 相对于自身的动画
* Animation.RELATIVE_TO_PARENT 相对于父控件的动画
* 0.5f,表示在控件自身的 x,y的中点坐标处,为动画的中心。
*
* 设置动画的变化速率
* setInterpolator(newAccelerateDecelerateInterpolator()):先加速,后减速
* setInterpolator(newAccelerateInterpolator()):加速
* setInterpolator(newDecelerateInterpolator()):减速
* setInterpolator(new CycleInterpolator()):动画循环播放特定次数,速率改变沿着正弦曲线
* setInterpolator(new LinearInterpolator()):匀速
*/
upAnimation = new RotateAnimation(0f, -180f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
upAnimation.setInterpolator(new LinearInterpolator());//这句话可以不写,默认匀速
upAnimation.setDuration(500);
upAnimation.setFillAfter(true); // 动画结束后, 停留在结束的位置上
downAnimation = new RotateAnimation(-180f, -360f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
downAnimation.setInterpolator(new LinearInterpolator());
downAnimation.setDuration(500);
downAnimation.setFillAfter(true); // 动画结束后, 停留在结束的位置上
}
好的,到此我们已经准备了一些,很容易想到的布局和代码块,那么,最主要的问题是如何实现上拉和下拉,首先实现上拉刷新,那么我们就要知道列表什么时候到底最底部,而且是手指向上滑松开后,listview自己滑到底部才显示底部的布局(自己滑到底部手指未离开,此时并不执行加载更多),首先让系统的一个方法帮助我们,实现此接口即可:implements OnScrollListener,重写一下两个方法。并在init(),初始化时,设置此监听:
this.setOnScrollListener(this);
private int firstVisibleItemPosition; // 屏幕显示在第一个的item的索引
private boolean isScrollToBottom; // 是否滑动到底部
private boolean isLoadingMore = false; // 是否正在加载更多中
private final int DOWN_PULL_REFRESH = 0; // 下拉刷新状态
private final int RELEASE_REFRESH = 1; // 松开刷新
private final int REFRESHING = 2; // 正在刷新中
private int currentState = DOWN_PULL_REFRESH; // 头布局的状态: 默认为下拉刷新状态
/**
* 当滚动状态改变时回调
*/
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
//正在滚动时回调,回调2-3次,手指没抛则回调2次。scrollState = 2的这次不回调
//回调顺序如下
//第1次:scrollState = SCROLL_STATE_TOUCH_SCROLL(1) 正在滚动
//第2次:scrollState = SCROLL_STATE_FLING(2) 手指做了抛的动作(手指离开屏幕前,用力滑了一下)
//第3次:scrollState = SCROLL_STATE_IDLE(0) 停止滚动
//当屏幕停止滚动时为0;当屏幕滚动且用户使用的触碰或手指还在屏幕上时为1;
//由于用户的操作,屏幕产生惯性滑动时为2
if (scrollState == SCROLL_STATE_IDLE || scrollState == SCROLL_STATE_FLING) {
// 判断当前是否已经到了底部
// isLoadMore() 获取加载更多状态
// currentState != REFRESHING,当正在下拉刷新时,不允许加载更多
if (isScrollToBottom && !isLoadingMore && isLoadMore() && currentState != REFRESHING) {
isLoadingMore = true;
// 当前到底部
footerView.setPadding(0, 0, 0, 0);
if (mOnRefershListener != null) {
mOnRefershListener.onLoadingMore();
}
}
}
}
/**
* 当滚动时调用
*
* @param firstVisibleItem
* 当前屏幕显示在顶部的item的position,firstVisibleItem==0 //滑到顶部
* @param visibleItemCount
* 当前屏幕显示了多少个条目的总数
* @param totalItemCount
* ListView的总条目的总数
*
* if(visibleItemCount+firstVisibleItem==totalItemCount){//此方法也可判断是否滑到底部
* Log.e("log", "滑到底部");
* }
*/
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
firstVisibleItemPosition = firstVisibleItem;
if (getLastVisiblePosition() == (totalItemCount - 1)) { //滑到底部
isScrollToBottom = true;
} else {
isScrollToBottom = false;
}
}
/***
* 获取是否可以加载更多
* @return
*/
public boolean isLoadMore() {
return isLoadMore;
}
/***
* 设置是否可以加载更多
* @param isLoadMore
*/
public void setLoadMore(boolean isLoadMore) {
this.isLoadMore = isLoadMore;
}
在加载更多时,我们自己写了一个 监听上下拉的接口,用于activity调用,执行相关的网络请求。
private OnRefreshListener mOnRefershListener;
public interface OnRefreshListener {
/**
* 下拉刷新
*/
void onDownPullRefresh();
/**
* 上拉加载更多
*/
void onLoadingMore();
}
/***
* 设置 监听
* @param listener
*/
public void setOnRefreshListener(OnRefreshListener listener) {
mOnRefershListener = listener;
}
是不是觉得很方便,系统的方法就可以帮助我们实现加载更多,那么上拉刷新是不是也是这样方便呢,事实却不是,需要我们通过 onTouchEvent 事件判断手指下拉的距离,动态设置头布局的padding,还记得吗:
padding(0,-该布局的高度,0,0),当手指下拉距离和布局高度相同,此头布局就全部显示出来了,即:padding(0,0,0,0),如果超过,则头布局会被下拉,达到我们要的效果,好的,思路已经理清,现在我们来看看代码如何实现的吧:
private int downY; // 按下时y轴的偏移量
// 实际的padding的距离与界面上偏移距离的比例,越大,拉的越费劲(阻尼系数,damping ratio)
private final static float RATIO = 3.5f;
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN :
downY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE :
int moveY = (int) ev.getY();
// 移动中的y - 按下的y = 间距.
int diff = (int) (((float)moveY - (float)downY) / RATIO);
// -头布局的高度 + 间距 = paddingTop
int paddingTop = -headerViewHeight + diff;
// 如果: -头布局的高度 > paddingTop的值 执行super.onTouchEvent(ev);
// if (firstVisibleItemPosition == 0 && -headerViewHeight < paddingTop) {
// diff>0,表示在顶部,正在下拉,头部的view渐渐显示出来
// currentState != REFRESHING,不同时执行两次下拉刷新,只是界面会下拉,不会调用两次刷新方法。加不加都行
// !isLoadingMore,当正在加载更多时,不允许下拉刷新
if (firstVisibleItemPosition == 0 && diff>0 && currentState != REFRESHING && !isLoadingMore) {
if (paddingTop > 0 && currentState == DOWN_PULL_REFRESH) { // 完全显示了.
Log.i(TAG, "松开刷新");
currentState = RELEASE_REFRESH;
refreshHeaderView();
} else if (paddingTop < 0 && currentState == RELEASE_REFRESH) { // 没有显示完全
Log.i(TAG, "下拉刷新");
currentState = DOWN_PULL_REFRESH;
refreshHeaderView();
}
// 下拉头布局
headerView.setPadding(0, paddingTop, 0, 0);
return true;
}
break;
case MotionEvent.ACTION_UP :
// 判断当前的状态是松开刷新还是下拉刷新
if (currentState == RELEASE_REFRESH) {
Log.i(TAG, "刷新数据.");
// 把头布局设置为完全显示状态
headerView.setPadding(0, 0, 0, 0);
// 进入到正在刷新中状态
currentState = REFRESHING;
refreshHeaderView();
if (mOnRefershListener != null) {
mOnRefershListener.onDownPullRefresh(); // 调用使用者的监听方法
}
} else if (currentState == DOWN_PULL_REFRESH) {
// 隐藏头布局
headerView.setPadding(0, -headerViewHeight, 0, 0);
}
break;
default :
break;
}
return super.onTouchEvent(ev);
}
/**
* 根据currentState刷新头布局的状态
*/
private void refreshHeaderView() {
switch (currentState) {
case DOWN_PULL_REFRESH : // 下拉刷新状态
tvState.setText("下拉刷新");
ivArrow.startAnimation(downAnimation); // 执行向下旋转
break;
case RELEASE_REFRESH : // 松开刷新状态
tvState.setText("松开刷新");
ivArrow.startAnimation(upAnimation); // 执行向上旋转
break;
case REFRESHING : // 正在刷新中状态
ivArrow.clearAnimation();
ivArrow.setVisibility(View.GONE);
mProgressBar.setVisibility(View.VISIBLE);
tvState.setText("正在刷新中...");
break;
default :
break;
}
}
注释在代码里都很详细了,相信聪明的你,一看就懂,不懂耶没关系,多看几遍,或者,@我。
好的,现在还有最后一个小功能,就是,上拉下拉时的回弹效果,其实也十分简单,我们只只要重写listview的一个方法就行了overScrollBy
//回弹效果
private static final int MAX_Y_OVERSCROLL_DISTANCE = 100;
private int mMaxYOverscrollDistance;
private void initBounceListView(Context context){
//get the density of the screen and do some maths with it on the max overscroll distance
//variable so that you get similar behaviors no matter what the screen size
final DisplayMetrics metrics = context.getResources().getDisplayMetrics();
final float density = metrics.density;
mMaxYOverscrollDistance = (int) (density * MAX_Y_OVERSCROLL_DISTANCE);
}
//设置回弹效果
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY,
int scrollRangeX, int scrollRangeY, int maxOverScrollX,
int maxOverScrollY, boolean isTouchEvent){
//This is where the magic happens, we have replaced the incoming maxOverScrollY
//with our own custom variable mMaxYOverscrollDistance;
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
scrollRangeX, scrollRangeY, maxOverScrollX,
mMaxYOverscrollDistance, isTouchEvent);//mMaxYOverscrollDistance
}
在init()方法中,调用上面的 initBounceListView();方法。
在overScrollBy的源码中,maxOverScrollY 的解释如下:
maxOverScrollY Number of pixels to overscroll by in either direction along the Y axis. 大致意思是允许Y轴方向的多出屏幕的距离是多少,单位像素。就是我们说的上下回弹的距离。
想了解此方法的,请出门百度即可。不做重点介绍。
,好了,最后贴一个Activity的代码。看看如何调用的。
package com.meile.mylistviewpulltorefresh;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import com.meile.mylistviewpulltorefresh.R;
import com.meile.mylistviewpulltorefresh.PullToRefreshListView.OnRefreshListener;
public class Lv1Activity extends Activity implements OnClickListener,OnRefreshListener{
private List list = new ArrayList<>();
private PullToRefreshListView listView;
private ArrayAdapter> adapter;
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case 0://下拉刷新
list = new ArrayList<>();
list = getDate();
adapter = new ArrayAdapter(Lv1Activity.this,android.R.layout.simple_list_item_1,list);
listView.setAdapter(adapter);
listView.onRefreshComplete();
if (list.size()<30) {
listView.setLoadMore(true);
}
break;
case 1://加载更多
list.addAll(getDate());
adapter.notifyDataSetChanged();
listView.onRefreshComplete();
if (list.size()>=30) {
listView.setLoadMore(false);
}
break;
default:
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lv1);
findview();
init();
}
private void findview() {
listView = (PullToRefreshListView) findViewById(R.id.listview);
}
private List getDate() {
List listT = new ArrayList<>();
for (int i = 0; i < 10; i++) {
listT.add("我是测试数据->"+i);
}
return listT;
}
private void init() {
list = getDate();
adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1,list);
listView.setAdapter(adapter);
listView.setOnRefreshListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.one:
break;
default:
break;
}
}
@Override
public void onDownPullRefresh() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
handler.sendEmptyMessage(0);
}
}, 3000);
}
@Override
public void onLoadingMore() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
handler.sendEmptyMessage(1);
}
}, 3000);
}
}
本文借鉴此文,十分感谢。http://www.tuicool.com/articles/3uAVRva
如有疑问可以回复我,或加qq2748212368。
此文demo下载链接:http://download.csdn.net/detail/u013790519/9135655