listview下拉刷新上拉加载扩展(一)

时间:2021-05-09 03:31:50

前两篇实现了listview简单的下拉刷新和上拉加载,功能已经达到,单体验效果稍简陋,那么在这篇文章里我们来加一点效果,已达到我们常见的listview下拉刷新时的效果:

listview下拉刷新上拉加载扩展(一)

listview下拉刷新上拉加载扩展(一)

listview下拉刷新上拉加载扩展(一)

首先,在headview的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:gravity="center"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:src="@mipmap/ic_arrow" />

        <ProgressBar
            android:id="@+id/pb"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_marginRight="10dp"
            android:visibility="gone"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下拉刷新"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2015-12-10 12:00"
            android:textSize="16sp" />

    </LinearLayout>

</LinearLayout>

Listview里初始化新增加的几个控件:

 tv_time = (TextView) headerView.findViewById(R.id.tv_time);
        iv_arrow= (ImageView) headerView.findViewById(R.id.iv_arrow);
        tv_time.setText("上次更新:" + sdf.format(new Date()));
        pb= (ProgressBar) headerView.findViewById(R.id.pb);

其次我们要考虑到,箭头是有一个动画的,正常情况下箭头朝下,达到可刷新状态时,箭头朝上,如果用户又向上滑了回去,箭头变为朝下,两个动画(一个向上转动的动画,一个向下转动的动画):

   mRotateUpAnim = new RotateAnimation(0.0f, -180.0f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
        mRotateUpAnim.setDuration(150);
        mRotateUpAnim.setFillAfter(true);
        mRotateDownAnim = new RotateAnimation(-180.0f, 0.0f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
        mRotateDownAnim.setDuration(150);
        mRotateDownAnim.setFillAfter(true);

根据刷新状态变化改变headview内部控件状态:

private void changeHeaderByState(int state) {
        switch (state) {
            case REFRESH_DONE:
                headerView.setPadding(0, -headerViewHeight, 0, 0);
                tv_refresh.setText("下拉刷新");
                tv_time.setText("上次更新:"+sdf.format(new Date()));
                iv_arrow.setVisibility(View.VISIBLE);
                pb.setVisibility(View.GONE);
                break;
            case RELEASE_TO_REFRESH:
                tv_refresh.setText("松开刷新");
                iv_arrow.clearAnimation();
                iv_arrow.startAnimation(mRotateUpAnim);
                isArrowUp=true;
                break;
            case PULL_TO_REFRESH:
                tv_refresh.setText("下拉刷新");
                iv_arrow.clearAnimation();
                iv_arrow.startAnimation(mRotateDownAnim);
                break;
            case REFRESHING:
                headerView.setPadding(0, 0, 0, 0);
                tv_refresh.setText("正在刷新");
                iv_arrow.clearAnimation();
                iv_arrow.setVisibility(View.GONE);
                pb.setVisibility(View.VISIBLE);
                break;
            default:
                break;
        }
    }

结束!是不是很简单,很随意!

listview下拉刷新上拉加载扩展(一)