Android 中 ListView 的 下拉刷新 和 上拉加载 的 重点及学习（一）

（转载注明： http://blog.csdn.net/itermeng/article/details/52289929 ：）

大多App中的一个必备功能：用listView实现下拉刷新和上拉加载，其实有很多大牛都写了类似的Blog，但我还想记录一下，梳理自己的思路，而且我会想之前写的轮播图博客一样，我的重点是在如何写的思路，不愿直接贴代码，想看代码的直接看文章最下面吧 ：）

---

如上gif动图所示，接下来我们要完成下拉刷新的实现。

---

---

一. 完成 xml 文件的编写 ：

1.完成listView的头布局

结合了帧布局和线性布局

<?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="match_parent"
    android:orientation="horizontal">

    <FrameLayout
        android:layout_margin="5dp"
        android:layout_width="50dp"
        android:layout_height="50dp" >

        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/common_listview_headview_red_arrow" />

        <ProgressBar
            android:id="@+id/pb"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminateDrawable="@drawable/shape_progress"
            android:visibility="invisible" />
    </FrameLayout>

    <LinearLayout
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="下拉刷新"
            android:textColor="#F00"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv_desc_last_refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:singleLine="true"
            android:text="最后刷新时间: 2015-10-11 09:20:35"
            android:textColor="#666"
            android:textSize="14sp" />
    </LinearLayout>

</LinearLayout>

---

2. 自定义ProgressBar

这里红色渐变的圆圈为自定义的xml

<?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
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="10"
        android:useLevel="false" >
        <gradient
            android:centerColor="#44FF0000"
            android:endColor="#00000000"
            android:startColor="#FF0000"
            android:type="sweep" />
    </shape>
</rotate>

---

---

二. 完成逻辑编写实现下拉刷新 ：

1. 自定义RefreshListView继承 Listview

继承3个构造方法，并在init()中写initHeaderView()方法，初始化头布局

    public PullToRefreshListView(Context context) {
        super(context);
        init()
    }

    public PullToRefreshListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init()
    }

    public PullToRefreshListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init()
    }

---

2. 初始化头布局并隐藏

默认让头布局隐藏，主要就是测得我们刚写的xml文件头布局的高度，用padding将它隐藏起来即可，再设置listView添加头布局

    /**
     * 初始化头布局
     */
    private void initHeaderView() {

        mHeaderView = View.inflate(getContext(), R.layout.layout_header_list, null);
        mArrowView = mHeaderView.findViewById(R.id.iv_arrow);
        pb = (ProgressBar) mHeaderView.findViewById(R.id.pb);
        mTitleText = (TextView) mHeaderView.findViewById(R.id.tv_title);
        mLastRefreshTime = (TextView) mHeaderView.findViewById(R.id.tv_desc_last_refresh);


        // 提前手动测量宽高
        mHeaderView.measure(0, 0);// 按照设置的规则测量

        mHeaderViewHeight = mHeaderView.getMeasuredHeight();
        System.out.println(" measuredHeight: " + mHeaderViewHeight);

        // 设置内边距, 可以隐藏当前控件 , -自身高度
        mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);

        // 在设置数据适配器之前执行添加 头布局/脚布局 的方法.
        addHeaderView(mHeaderView);
    }

---

3. 滑动事件处理（重点）

万事俱备，头布局也已经隐藏掉，接下来我们想通过手指的滑动，让头布局显示出来，这时就涉及到 onTouchEvent 事件。

    public static final int PULL_TO_REFRESH = 0;// 下拉刷新状态
    public static final int RELEASE_REFRESH = 1;// 释放刷新状态
    public static final int REFRESHING = 2; // 刷新中状态
@Override
    public boolean onTouchEvent(MotionEvent ev) {

        // 判断滑动距离, 给Header设置paddingTop
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downY = ev.getY();
            System.out.println("downY: " + downY);

            break;
        case MotionEvent.ACTION_MOVE:
            moveY = ev.getY();
            System.out.println("moveY: " + moveY);
            // 如果是正在刷新中, 就执行父类的处理
            if(currentState == REFRESHING){
                return super.onTouchEvent(ev);
            }


            float offset = moveY - downY; // 移动的偏移量
            // 只有 偏移量>0, 并且当前第一个可见条目索引是0, 才放大头部
            if(offset > 0 && getFirstVisiblePosition() == 0){

         //int paddingTop = -自身高度 + 偏移量

                int paddingTop = (int) (- mHeaderViewHeight + offset);
                mHeaderView.setPadding(0, paddingTop, 0, 0);

                if(paddingTop >= 0 && currentState != RELEASE_REFRESH){// 头布局完全显示
                    System.out.println("切换成释放刷新模式: " + paddingTop);
                    // 切换成释放刷新模式
                    currentState = RELEASE_REFRESH;
                    updateHeader(); // 根据最新的状态值更新头布局内容
                }else if(paddingTop < 0 && currentState != PULL_TO_REFRESH){ // 头布局不完全显示
                    System.out.println("切换成下拉刷新模式: " + paddingTop);
                    // 切换成下拉刷新模式
                    currentState = PULL_TO_REFRESH;
                    updateHeader(); // 根据最新的状态值更新头布局内容
                }

                return true; // 当前事件被我们处理并消费
            }
            break;

        case MotionEvent.ACTION_UP:

            // 根据刚刚设置状态
            if(currentState == PULL_TO_REFRESH){
//          - paddingTop < 0 不完全显示, 恢复
                mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);
            }else if(currentState == RELEASE_REFRESH){
//          - paddingTop >= 0 完全显示, 执行正在刷新...
                mHeaderView.setPadding(0, 0, 0, 0);
                currentState = REFRESHING; 
                updateHeader();
            }
            break;

        default:
            break;
        }

        return super.onTouchEvent(ev);
    }

首先要了解三个状态：

（1）PULL_TO_REFRESH下拉刷新：拉的过程中会进入到“释放刷新”，要是拉到一半就放手即未进入“释放刷新”，就不会去刷新数据。
（2）RELEASE_REFRESH释放刷新：拉到了一定距离，只要放手就会进入”刷新中”状态。
（3）REFRESHING刷新中：状态为正在刷新，此时就可以去请求数据了。

---

其次从 Down 、Move、Up这三个动作来分析逻辑：
（1） Down： 即手指刚刚点下去，在这里只需要获取当前的 y坐标值（上下滑动，只在意Y值）

（2） Move： 即手指滑动的过程，在这里需要根据移动的距离 offset 和 当前的状态 来 显示出头布局 并 改变状态。

1. 当前状态为“正在刷新”，即不处理（也不看第二点了，return出去）。

    2.  只有 偏移量 offset>0, 并且当前第一个可见条目索引是0, 才显示头布局。
        paddingTop :  需要隐藏的距离= - 自身高度 + 偏移量。

        2.1 （paddingTop >= 0 且 状态不等于“释放刷新”）：头布局完全显示，此时状态改为“释放刷新”
        2.2 （paddingTop < 0 且 状态不等于“释放刷新”）: 头布局不完全显示，此时状态改为“下拉刷新”
        2.3 其余情况不管：

情况2.1：

情况2.2：

（3） Up： 即手指抬起，根据Move过程后改变的状态来判断是否进行刷新的逻辑 和 状态修改。

1.状态为”下拉刷新“ ：即收起头布局，不需要进行刷新的逻辑。
2.状态为”释放刷新“ ：显示完全头布局，修改状态为”正在刷新“，进行刷新的逻辑。

（以上代码中的refreshState方法留到下下一点讲，其实就是一个UI的变化）
（监听对象mListener 采取回调，第六点讲解）

---

---

4.下拉刷新箭头旋转动画

以上完成后，接下来完善一下头布局的动画，需要在init()中初始化initAnimation（）

    /**
     * 初始化头布局的动画
     */
    private void initAnimation() {
        // 向上转, 围绕着自己的中心, 逆时针旋转0 -> -180.
        rotateUpAnim = new RotateAnimation(0f, -180f, 
                Animation.RELATIVE_TO_SELF, 0.5f, 
                Animation.RELATIVE_TO_SELF, 0.5f);
        rotateUpAnim.setDuration(300);
        rotateUpAnim.setFillAfter(true); // 动画停留在结束位置

        // 向下转, 围绕着自己的中心, 逆时针旋转 -180 -> -360
        rotateDownAnim = new RotateAnimation(-180f, -360,
                Animation.RELATIVE_TO_SELF, 0.5f, 
                Animation.RELATIVE_TO_SELF, 0.5f);
        rotateDownAnim.setDuration(300);
        rotateDownAnim.setFillAfter(true); // 动画停留在结束位置 
    }

---

5. refreshState()修改头布局中UI的变化

第五点同第四点都是有关于UI的变化，比较简单，虽然在onTouchevent中根据不同情况修改了 头布局的显示多少 ，但是头布局中的小控件都有相应的动画或改变，需要抽取一个方法更细致的展示。

    /**
     * 根据当前状态刷新界面
     */
    private void refreshState() {
        switch (mCurrentState) {
        case STATE_PULL_TO_REFRESH:
            tvTitle.setText("下拉刷新");
            pbProgress.setVisibility(View.INVISIBLE);
            ivArrow.setVisibility(View.VISIBLE);
            ivArrow.startAnimation(animDown);
            break;
        case STATE_RELEASE_TO_REFRESH:
            tvTitle.setText("松开刷新");
            pbProgress.setVisibility(View.INVISIBLE);
            ivArrow.setVisibility(View.VISIBLE);
            ivArrow.startAnimation(animUp);
            break;
        case STATE_REFRESHING:
            tvTitle.setText("正在刷新...");

            ivArrow.clearAnimation();// 清除箭头动画,否则无法隐藏

            pbProgress.setVisibility(View.VISIBLE);
            ivArrow.setVisibility(View.INVISIBLE);
            break;

        default:
            break;
        }
    }

---

6.下拉刷新监听（重点！！！！！！回调！！！！）

运用回调，使在手指抬起Up后，能够调用方法，进行刷新的逻辑。
（1）下拉刷新的回调接口

public interface OnRefreshListener {
        void onRefresh();
    }

（2）暴露接口,设置监听

    public void setOnRefreshListener(OnRefreshListener listener) {
        mListener = listener;
    }

（3）定义成员变量,接收监听对象

private OnRefreshListener mListener;

（4） 在合适的地方进行回调
（之前第三点中onTouchevent事件中进行回调）

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

（5）. 前端界面设置回调（并非RefreshListView类，是使用了该listView类中写！！！）

    lvList.setOnRefreshListener(new OnRefreshListener() {

            @Override
            public void onRefresh() {
                // 刷新数据

            }
        });

---

---

7. 刷新结束,收起控件

最后一步，刷新完成，恢复控件原始位置，状态恢复，标题恢复，刷新完成的条件下更新时间。

public void onRefreshComplete(boolean success) {

        mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);

        mCurrentState = STATE_PULL_TO_REFRESH;
        tvTitle.setText("下拉刷新");
        pbProgress.setVisibility(View.INVISIBLE);
        ivArrow.setVisibility(View.VISIBLE);

        if (success) {// 只有刷新成功之后才更新时间
            setCurrentTime();
        }
    }

---

---

---

以上就是所有的逻辑，有关于”下拉刷新“的重点，其实各个细节都会有耦合的部分，尽量抽取出一个个小模块进行讲解，其中最重要的就是 第三点.滑动事件处理 和 第六点.下拉刷新监听回调。大致这几个步骤，讲的还是蛮细的，适合入门吧，也不知道这样分开讲好不好，总之，希望对你们有帮助 ：）

---

---

后续在这里 ：http://blog.csdn.net/itermeng/article/details/52297286 ：）