Android自定义ListView，轻松实现上下拉刷新，一看就懂，一学就会，超简单。

最新推荐文章于 2024-05-11 22:17:38 发布

心上有草

最新推荐文章于 2024-05-11 22:17:38 发布

阅读量4.8k

点赞数

分类专栏： listview Android Java 文章标签： listview android 自定义view

本文链接：https://blog.csdn.net/u013790519/article/details/48713863

版权

Android 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Java

2 篇文章 0 订阅

订阅专栏

listview

1 篇文章 0 订阅

订阅专栏

之前用别人的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

<?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="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" >

    <!-- android:indeterminateDrawable="@drawable/common_progressbar",利用rotate旋转动画 + shape的颜色变化 构造ProgressBar的旋转颜色 ，个人觉得还是使用下面的style控制ProgressBar的样式较合适。-->
    <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

<?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="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<String> list = new ArrayList<>();
    private PullToRefreshListView listView;
    private ArrayAdapter<List<String>> 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<String> getDate() {
        List<String> 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);

    }

}