Android ListView 疯狂之旅之《自定义下拉刷新功能的ListView》

最新推荐文章于 2024-04-14 19:24:49 发布

早起的年轻人

最新推荐文章于 2024-04-14 19:24:49 发布

阅读量1.3k

点赞数

分类专栏： Android开发中的点点滴滴文章标签： android自定义控件 Android开发自定义下拉刷新ListView

本文链接：https://blog.csdn.net/zl18603543572/article/details/50864482

版权

Android开发中的点点滴滴专栏收录该内容

162 篇文章 12 订阅

订阅专栏

效果图：

一首先创建一个类，继承ListView，编写其构造方法

public class RefreshListView  extends ListView {
    public RefreshListView(Context context) {
        this(context, null);
    }
    public RefreshListView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public RefreshListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init() {
    }
}

二在activity中使用我们的RefreshListView控件

向ListView中设置数据的过程与我们android中提供的ListView设置数据的方式一至，这里就不贴出代码块了

此时运行的效果图

可以看到与我们正常的ListView是一样的

三向RefresListView中添加我们下拉刷新使用到的头布局

头布局中的显示，包括显示下拉状态的向下的指示箭头，包括指示正在加载中的圆形进度条，包括显示状态与时间的文本框

定义头布局文件

xlistview_footer.xml文件中

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom" >
    <RelativeLayout
        android:id="@+id/xlistview_header_content"
        android:layout_width="fill_parent"
        android:layout_height="60dp" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical"
            android:id="@+id/xlistview_header_text">
            <TextView
                android:id="@+id/xlistview_header_hint_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="下拉刷新" />
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp" >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="上次更新时间："
                    android:textSize="12sp" />
                <TextView
                    android:id="@+id/xlistview_header_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <ImageView
            android:id="@+id/xlistview_header_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/xlistview_header_text"
            android:layout_centerVertical="true"
            android:layout_marginLeft="-35dp"
            android:src="@drawable/xlistview_arrow" />

        <ProgressBar
            android:id="@+id/xlistview_header_progressbar"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignLeft="@id/xlistview_header_text"
            android:layout_centerVertical="true"
            android:layout_marginLeft="-40dp"
            android:visibility="visible" />
    </RelativeLayout>

</LinearLayout>

将头布局文件添加给ListView

在RefresListView中

private void init(Context context) {
        View view = View.inflate(context,R.layout.xlistview_header,null);
        this.addHeaderView(view);
    }

四隐藏我们添加的头布局

首先让系统去帮我们测量头布局的高度，测量好后，我们就可以设置头布局的显示位置

 private void init(Context context) {
        View view = View.inflate(context, R.layout.xlistview_header, null);
        view.measure(0, 0);
        final int measuredHeight = view.getMeasuredHeight();
        view.setPadding(0,-measuredHeight,0,0);
        this.addHeaderView(view);
    }

五设置头布局与LisView的联动

使用我们的控件实现OnTouchListener接口，并复写onTouch方法

import android.view.View.OnTouchListener;
public class RefreshListView  extends ListView implements OnTouchListener {....

@Override
    public boolean onTouch(View v, MotionEvent event) {
        return true;
    }

}

在onTouch方法中我们需要重新设置显示头布局，所以我们需要将部分变量修改为成员变量

private void init(Context context) {
        setOnTouchListener(this);
        //获取头布局
        mHeaderView = View.inflate(context, R.layout.xlistview_header, null);
        //进行测量
        mHeaderView.measure(0, 0);
        //获取头布局的高度
        mHeaderHeight = mHeaderView.getMeasuredHeight();
        //设置头布局显示
        mHeaderView.setPadding(0, -mHeaderHeight, 0, 0);
        //添加到ListView中
        this.addHeaderView(mHeaderView);
    }

在onTouch方法中进行设置显示随ListView的滑动而显示的头布局

@Override
    public boolean onTouchEvent( MotionEvent event) {
        int downY = 0;
         switch ( event.getAction()) {
             case MotionEvent.ACTION_DOWN:
                 //获取按下时的Y轴的位置
                downY = (int)event.getY();
             break;
             case MotionEvent.ACTION_MOVE:
                int moveY = (int)event.getY();
                 //计算在Y轴方向的滑动偏移量，
                 int diffY = moveY - downY;
                 //计算我们的头布局需要移动的距离
                 int paddingTop = -mHeaderHeight +diffY;
                 //设置显示头布局
                 mHeaderView.setPadding(0,paddingTop,0,0);
             break;
             default:
                 break;
         }
        return true;
    }

注：这里之所以使用使用的是-mHeaderHeight高度，是因为我们在上面设置的头布局的paddingTop的大小正好是头布局的高度，也就是说刚刚好将头布局显示在屏幕外侧

优化代码

 //设置显示头布局，当显示的条目为第一条的时候并且移动的距离大于0的时候再开时向下移动
                 if(getFirstVisiblePosition()==0&&diffY>0){
                     mHeaderView.setPadding(0,paddingTop,0,0);
                     return  true;
                 }

六定义更新下拉刷新过程中的头布局显示变化

定义下拉至释放刷新的中的变量

  // 代表下拉刷新状态 
    private final int PULL_REFRESH_STATE = 0;
    // 释放刷新状态
    private final int RELEASE_STATE = 1; 
    // 正在刷新状态
    private final int RELEASEING = 2; 
    // 默认当前是下拉刷新状态
    private int header_current_state = PULL_REFRESH_STATE;

创建更新头布局的方法

//更新头布局的方法
    private void updateHeaderView() {
        switch (header_current_state) {
            case PULL_REFRESH_STATE:   //下拉刷新状态
                break;
            case RELEASE_STATE:        //释放刷新状态
                break;
            case RELEASEING:           //正在刷新的状态
                break;
        }
    }

在onTouchEvent方法中ACTION_MOVE事件处理中调用使用我们的更新头布局的方法

case MotionEvent.ACTION_MOVE:
                int moveY = (int)event.getY();
                 //计算在Y轴方向的滑动偏移量，
                 int diffY = moveY - downY;
                 //计算我们的头布局需要移动的距离
                 int paddingTop = -mHeaderHeight +diffY;
                 //设置显示头布局，当显示的条目为第一条的时候并且移动的距离大于0的时候再开时向下移动
                 if(getFirstVisiblePosition()==0&&diffY>0){
                     //判断paddingTop 来更新头布局
                     if (paddingTop > 0 && header_current_state != RELEASE_STATE) {
                         // System.out.println("进入释放刷新状态");
                         header_current_state = RELEASE_STATE;
                         // 更新头布局状态
                         updateHeaderView();
                     } else if (paddingTop < 0
                             && header_current_state != PULL_REFRESH_STATE) {
                         // System.out.println("~~~~下拉刷新状态~~~~");
                         header_current_state = PULL_REFRESH_STATE;
                         updateHeaderView();
                     }
                     mHeaderView.setPadding(0,paddingTop,0,0);
                     return  true;
                 }

然后我们在方法updateHeaderView这个方法中对应的状态下更新设置显示我们头布局中的信息

 //显示下拉上拉正在刷新状态的textview
        mXlistviewHeaderHintTextview = (TextView) mHeaderView.findViewById(R.id.xlistview_header_hint_textview);
       //头布局中显示时间的控件
        mXlistviewHeaderTime = (TextView) mHeaderView.findViewById(R.id.xlistview_header_time);
        //头布局中显示的指示箭头
        mXlistviewHeaderArrow = (ImageView) mHeaderView.findViewById(R.id.xlistview_header_arrow);
        //头布局中显示的加载圆形进度条
        mXlistviewHeaderProgressbar = (ProgressBar) mHeaderView.findViewById(R.id.xlistview_header_progressbar);

当头布局出现在屏幕上，但是还没有完全显示在屏幕上的时候，指示箭头应当向下，状太信息应当为下拉刷新

当头布局完全显示在屏幕上的时候，指示箭头指示方向向上，状态为释放刷新

//更新头布局的方法
    private void updateHeaderView() {
        switch (header_current_state) {
            case PULL_REFRESH_STATE:   //下拉刷新状态
                //[1]更改iv状态
                mXlistviewHeaderArrow.startAnimation(downAnimation);
                //[2]设置 tv_update 状态
                mXlistviewHeaderHintTextview.setText("下拉刷新");
                //[3]隐藏头布局
                mHeaderView.setPadding(0, -mHeaderHeight, 0, 0);
                break;
            case RELEASE_STATE:        //释放刷新状态
                mXlistviewHeaderArrow.startAnimation(upAnimation);
                mXlistviewHeaderHintTextview.setText("释放刷新");
                break;
            case RELEASEING:           //正在刷新的状态
                //[1]把动画图片隐藏
                mXlistviewHeaderArrow.setVisibility(View.INVISIBLE);
                mXlistviewHeaderArrow.clearAnimation();
                //[2]显示进度条
                mXlistviewHeaderProgressbar.setVisibility(View.VISIBLE);
                //[3]刷新状态的文字改为 正在刷新
                mXlistviewHeaderHintTextview.setText("正在刷新ing");
                //[4]设置头布局回到屏幕顶部
                mHeaderView.setPadding(0, 0, 0, 0);
                break;
        }

在onTouchEvent中处理ACTION_UP事件

如果当前的状态是释放刷新，那当手指抬起的时候，我们将要进行正在刷新状态，并进行相关UI显示更新操作

case MotionEvent.ACTION_UP:
                     if (header_current_state == PULL_REFRESH_STATE) {
                         updateHeaderView();
                     }else if (header_current_state == RELEASE_STATE) {
                         //[1]把正在刷新状态 赋值给 当前状态
                         header_current_state = RELEASEING;
                         //[2]调用更新头布局的方法
                         updateHeaderView();
                         //[3]更新为下拉状态
//				header_current_state =PULL_REFRESH_STATE;
                     }
             break;

可以看到上面使用到了将指示箭头进行旋转操作的动画，可以在构造中进行初始化操作

 private RotateAnimation upAnimation;
 private RotateAnimation downAnimation;



//初始化头布局 图片旋转的动画
    private void initAnim() {
        //向上旋转的动画
        upAnimation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        upAnimation.setDuration(500);//设置动画执行的时长
        upAnimation.setFillAfter(true);

        //向下旋转的动画
        downAnimation = new RotateAnimation(-180, -360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        downAnimation.setDuration(500);//设置动画执行的时长
        downAnimation.setFillAfter(true);

    }

七设置下拉刷新的监听回调接口

 //设置下拉刷新数据的接口
    public interface OnPullDownRefreshListener{
        public void onPullDownRefresh();
    }
    private  OnPullDownRefreshListener mOnPullDownRefreshListener;
    //设置刷新的监听
    public void setOnPullDownRefreshListener(OnPullDownRefreshListener listener){
        mOnPullDownRefreshListener = listener;
    }

然后在onTouchEvent方法中的ACTION_UP事件中片回调

   if (mOnPullDownRefreshListener!=null) {
                             mOnPullDownRefreshListener.onRefresh();
                         }

八设置加载数据完成后，隐藏头布局并更新显示时间

ublic void setOnLoadFinish() {
        //[0]进度条隐藏 
        mXlistviewHeaderProgressbar.setVisibility(View.INVISIBLE);
        //[2]在这里更新时间 
        mXlistviewHeaderTime.setText(getCurrentTimerr());
        //[3]隐藏头布局
        mHeaderView.setPadding(0, -mHeaderHeight, 0, 0);
        //[4]把状态置为下拉状态 
        header_current_state = PULL_REFRESH_STATE;
    }

也就是说当我们的数据更新完毕后，需要调用我们设置的方法将显示刷新头布局隐藏，并更新相应的状态与显示信息

更新刷新显示的时间：

public String getCurrentTimerr(){
     SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
     return sdf.format(new Date());
	}

到这里，我们的这个完整的具有下拉刷新功能的ListView就可以进行使用了

九添加上拉加载更多数据功能

private void initFootView() {
        //[1]通过打气筒把一个布局转换成一个view对象
        mfootView = View.inflate(getContext(), R.layout.xlistview_footer, null);
        mfootView.measure(0, 0);
        footHeight = mfootView.getMeasuredHeight();
        //[1]默认情况隐藏脚布局
         mfootView.setPadding(0, -footHeight, 0, 0);
        //[2]添加脚布局
        this.addFooterView(mfootView);
        //[3]给listview设置滑动监听
        this.setOnScrollListener(this);
    }

脚布局文件中：

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dp" >

        <TextView
            android:id="@+id/xlistview_footer_hint_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/xlistview_footer_hint_normal" />
    <ProgressBar
        android:layout_toLeftOf="@id/xlistview_footer_hint_textview"
        android:id="@+id/xlistview_footer_progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible" />
    </RelativeLayout>

可以看到这里设置了一个滑动监听，在这里我们需要将我们的控件实现滑动监听事件

public class RefreshListView  extends ListView implements AbsListView.OnScrollListener {

...



    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

    }
｝

设置上拉加载更多的回调监听

 private OnUpLoadingMoreListener mOnUpLoadingMoreListener;
    public void setOnLoadingMoreListener(OnUpLoadingMoreListener l){
        mOnUpLoadingMoreListener = l;
    }
    public interface OnUpLoadingMoreListener{
        public void onLoadingMore();
    }

在listView的滑动监听事件中回调监听方法

@Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (scrollState== SCROLL_STATE_IDLE ||scrollState == SCROLL_STATE_FLING) {
            //判断lisview 是否滑动到了底部
            if (getLastVisiblePosition()==getCount()-1 ) {
                //[1]把脚布局显示出来
                mfootView.setPadding(0, 0, 0, 0);
                if (mOnUpLoadingMoreListener!=null) {
                    mOnUpLoadingMoreListener.onLoadingMore();
                }
            }
        }
    }

设置加载完成后调用方法来隐藏加载更多的显示布局

 //加载更多完成 需要处理的逻辑
    public void setOnLoadIngMoreFinish() {
        //[1]把加载更多脚布局隐藏
        mfootView.setPadding(0, -footHeight, 0, 0);
    }

点击下载源码

下载密码：uvfr

Android ListView 疯狂之旅第一季《自定义侧拉删除》	点击打开链接查看
Android ListView 疯狂之旅第二季《分组排序显示数据》	点击打开链接查看

最新脑筋急转：男人与女人一起比赛猜智力题，一般女人会赢，因为”难得糊涂“，男的糊涂