android 自定义listview——实现上拉刷新下拉加载的功能

其他 2019-04-24 12:44:05 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33776306/article/details/52411737

           在开发中，listview是一个使用非常频繁的控件，原生的listview只是一个展示列表的容器，虽然在功能上很强大，但是用户的体验和动态效果上还是比较差劲的，于是出现了各式各样的自定义listview，其中比较常见的是下拉刷新上拉加载，由于项目需要，查找资料，自己尝试自定义listview，简单的实现了下拉刷新上拉加载的功能，在此简单的分享一下。

       首先要给listview做一个头布局和脚布局，简单的说就是显示刷新时和加载时的布局。布局比较简单直接看代码。

       头布局

<span style="font-size:18px;color:#009900;"><span style="font-size:18px;color:#009900;"><?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="wrap_content"
    android:orientation="horizontal" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip" >

        <ImageView
            android:id="@+id/iv_listview_header_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:minWidth="30dip"
            android:src="@drawable/common_listview_headview_red_arrow" />

        <ProgressBar
            android:id="@+id/pb_listview_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:indeterminateDrawable="@drawable/common_progressbar"
            android:visibility="gone" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_listview_header_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下拉刷新"
            android:textColor="#FF0000"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv_listview_header_last_update_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:text="最后刷新时间: 2016-09-01 00:00:00"
            android:textColor="@android:color/white"
            android:textSize="14sp" />
    </LinearLayout>

</LinearLayout></span></span>

   脚布局 

<span style="font-size:18px;color:#009900;"><span style="color:#009900;"><?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="wrap_content"
    android:orientation="horizontal" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip" >

        <ImageView
            android:id="@+id/iv_listview_header_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:minWidth="30dip"
            android:src="@drawable/common_listview_headview_red_arrow" />

        <ProgressBar
            android:id="@+id/pb_listview_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:indeterminateDrawable="@drawable/common_progressbar"
            android:visibility="gone" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_listview_header_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下拉刷新"
            android:textColor="#FF0000"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv_listview_header_last_update_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:text="最后刷新时间: 2016-09-01 00:00:00"
            android:textColor="@android:color/white"
            android:textSize="14sp" />
    </LinearLayout>

</LinearLayout></span></span>
在这两个布局中都用到一个动画效果common_progressbar.xml 

<span style="font-size:18px;color:#009900;"><span style="color:#009900;"><?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:centerColor="#FF6666"
            android:endColor="#FF0000"
            android:startColor="#FFFFFF"
            android:type="sweep" />
    </shape>
</span>
</rotate></span>

      写到此处，就可以开始自定义listview的下拉刷新和尚拉加载了，详细注释都写在代码中了，这里就不做过多解释，直接看代码。

<span style="font-size:18px;color:#009900;">package com.example.pulltorefreshlistview.view;

import java.text.SimpleDateFormat;

import com.example.pulltorefreshlistview.R;

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

public class RefreshListView extends ListView implements OnScrollListener {   
	
private static final String TAG = "RefreshListView";  
private int firstVisibleItemPosition; // 屏幕显示在第一个的item的索引  
private int downY; // 按下时y轴的偏移量  
private int headerViewHeight; // 头布局的高度  
private View headerView; // 头布局的对象  

private final int DOWN_PULL_REFRESH = 0; // 下拉刷新状态  
private final int RELEASE_REFRESH = 1; // 松开刷新  
private final int REFRESHING = 2; // 正在刷新中  
private int currentState = DOWN_PULL_REFRESH; // 头布局的状态: 默认为下拉刷新状态  

private Animation upAnimation; // 向上旋转的动画  
private Animation downAnimation; // 向下旋转的动画  

private ImageView ivArrow; // 头布局的剪头  
private ProgressBar mProgressBar; // 头布局的进度条  
private TextView tvState; // 头布局的状态  
private TextView tvLastUpdateTime; // 头布局的最后更新时间  

private OnRefreshListener mOnRefershListener;  
private boolean isScrollToBottom; // 是否滑动到底部  
private View footerView; // 脚布局的对象  
private int footerViewHeight; // 脚布局的高度  
private boolean isLoadingMore = false; // 是否正在加载更多中  

public RefreshListView(Context context, AttributeSet attrs) {  
    super(context, attrs);  
    initHeaderView();  
    initFooterView();  
    this.setOnScrollListener(this);  
}  

/** 
 * 初始化脚布局 
 */  
private void initFooterView() {  
    footerView = View.inflate(getContext(), R.layout.listview_footer, null);  
    footerView.measure(0, 0);  // 系统会帮我们测量出footerview的高度  
    footerViewHeight = footerView.getMeasuredHeight();  
    footerView.setPadding(0, -footerViewHeight, 0, 0);  
    this.addFooterView(footerView);  //向listview底部中添加脚布局
}  

/** 
 * 初始化头布局 
 */  
private void initHeaderView() {  
    headerView = View.inflate(getContext(), 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对象  
    initAnimation();  
}  

/** 
 * 获得系统的最新时间 
 *  
 * @return 
 */  
private String getLastUpdateTime() {  
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");  
    return sdf.format(System.currentTimeMillis());  
}  

/** 
 * 初始化动画 
 */  
private void initAnimation() {  
    upAnimation = new RotateAnimation(0f, -180f,  
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,  
            0.5f);  
    upAnimation.setDuration(500);  //设置动画显示的时间
    upAnimation.setFillAfter(true); // 动画结束后, 停留在结束的位置上  

    downAnimation = new RotateAnimation(-180f, -360f,  
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,  
            0.5f);  
    downAnimation.setDuration(500);  
    downAnimation.setFillAfter(true); // 动画结束后, 停留在结束的位置上  
}  

@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 = (moveY - downY) / 2;  
            // -头布局的高度 + 间距 = paddingTop  
            int paddingTop = -headerViewHeight + diff;  
            // 如果: -头布局的高度 > paddingTop的值 执行super.onTouchEvent(ev);  
            if (firstVisibleItemPosition == 0  
                    && -headerViewHeight < paddingTop) {  
                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) {  
                // 隐藏头布局 ,只需要将setPadding的top值设置为头布局的高度即可。
                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;  
    }  
}  

/** 
 * 当滚动状态改变时回调 
 */  
@Override  
public void onScrollStateChanged(AbsListView view, int scrollState) {  

    if (scrollState == SCROLL_STATE_IDLE  
            || scrollState == SCROLL_STATE_FLING) {  
        // 判断当前是否已经到了底部  
        if (isScrollToBottom && !isLoadingMore) {  
            isLoadingMore = true;  
            // 当前到底部  
            Log.i(TAG, "加载更多数据");  
            footerView.setPadding(0, 0, 0, 0);  
            this.setSelection(this.getCount());  

            if (mOnRefershListener != null) {  
                mOnRefershListener.onLoadingMore();  
            }  
        }  
    }  
}  

/** 
 * 当滚动时调用 
 *  
 * @param firstVisibleItem 
 *            当前屏幕显示在顶部的item的position 
 * @param visibleItemCount 
 *            当前屏幕显示了多少个条目的总数 
 * @param totalItemCount 
 *            ListView的总条目的总数 
 */  
@Override  
public void onScroll(AbsListView view, int firstVisibleItem,  
        int visibleItemCount, int totalItemCount) {  
    firstVisibleItemPosition = firstVisibleItem;  

    if (getLastVisiblePosition() == (totalItemCount - 1)) {  
        isScrollToBottom = true;  
    } else {  
        isScrollToBottom = false;  
    }  
}  

/** 
 * 设置刷新监听事件 
 *  
 * @param listener 
 */  
public void setOnRefreshListener(OnRefreshListener listener) {  
    mOnRefershListener = listener;  
}  

/** 
 * 隐藏头布局 
 */  
public void hideHeaderView() {  
    headerView.setPadding(0, -headerViewHeight, 0, 0);  
    ivArrow.setVisibility(View.VISIBLE);  
    mProgressBar.setVisibility(View.GONE);  
    tvState.setText("下拉刷新");  
    tvLastUpdateTime.setText("最后刷新时间: " + getLastUpdateTime());  
    currentState = DOWN_PULL_REFRESH;  
}  

/** 
 * 隐藏脚布局 
 */  
public void hideFooterView() {  
    footerView.setPadding(0, -footerViewHeight, 0, 0);  
    isLoadingMore = false;  
}  
}</span>

给自定义的listview添加回掉函数。 

<span style="font-size:18px;color:#009900;">package com.example.pulltorefreshlistview.view;

public interface OnRefreshListener {  
	  
    /** 
     * 下拉刷新 
     */  
    void onDownPullRefresh();  
  
    /** 
     * 上拉加载更多 
     */  
    void onLoadingMore();  
}  </span>
接下来就是在MainActivity中调用了

布局中引用

<span style="font-size:18px;color:#009900;"><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"
 >

    <com.example.pulltorefreshlistview.view.RefreshListView
        android:id="@+id/refreshlistview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.example.pulltorefreshlistview.view.RefreshListView>

</RelativeLayout></span>
java代码中引用 

<span style="font-size:18px;color:#009900;">package com.example.pulltorefreshlistview;

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

import com.example.pulltorefreshlistview.view.OnRefreshListener;
import com.example.pulltorefreshlistview.view.RefreshListView;

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import android.app.Activity;
import android.graphics.Color;

public class MainActivity extends Activity implements OnRefreshListener {

	private List<String> textList;
	private MyAdapter adapter;
	private RefreshListView rListView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		rListView = (RefreshListView) findViewById(R.id.refreshlistview);
		textList = new ArrayList<String>();
		for (int i = 0; i < 30; i++) {
			textList.add("出来吧第"+i+"个小怪兽");
		}
		adapter = new MyAdapter();
		rListView.setAdapter(adapter);
		rListView.setOnRefreshListener(this);
	}

	//listview适配器
	private class MyAdapter extends BaseAdapter {

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

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return textList.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
			TextView textView = new TextView(MainActivity.this);
			textView.setText(textList.get(position));
			textView.setTextSize(18.0f);
			return textView;
		}

	}
//上拉刷新调用此方法
	@Override
	public void onDownPullRefresh() {
		new AsyncTask<Void, Void, Void>() {

			@Override
			protected Void doInBackground(Void... params) {
				SystemClock.sleep(2000);
				for (int i = 0; i < 2; i++) {
					textList.add(0, "我是刷新出来的小怪兽" + i);
				}
				return null;
			}

			@Override
			protected void onPostExecute(Void result) {
				adapter.notifyDataSetChanged();
				rListView.hideHeaderView();
			}
		}.execute(new Void[] {});
	}
//下拉加载调用此方法
	@Override
	public void onLoadingMore() {
		new AsyncTask<Void, Void, Void>() {

			@Override
			protected Void doInBackground(Void... params) {
				SystemClock.sleep(2000);

				textList.add("我是加载出来的小怪兽");
				
				return null;
			}

			@Override
			protected void onPostExecute(Void result) {
				adapter.notifyDataSetChanged();

				// 加载完后将脚布局隐藏
				rListView.hideFooterView();
			}
		}.execute(new Void[] {});
	}

}</span>
效果图如下：


猜你喜欢

转载自blog.csdn.net/qq_33776306/article/details/52411737
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022