android简单流畅的下拉刷新pulltorefresh实现过程

前言

我很早之前就使用过pulltorefresh的开源项目, 唯一的感觉就是卡. 最近在做graph api的demo, 想顺便实现一个pulltorefresh, 所以从网上找了一些实现来看, 不满意的是他们都非常的卡, 即便是在小米4上面也有明显的掉帧, 但是我又发现另外一些应用的下拉刷新做的非常流畅, 没有丝毫卡顿, 研究了一下这些应用, 他们的pulltorefresh控件远没有网上的其他实现那么复杂, 有复用的空间, 是个比较适合学习的例子, 在这里给大家分享一下思路和具体的代码实现.

思路

ListView允许我们给它添加一个Header, 如果我们将这个Header的高度设为0, 那么平时用户是看不到这个Header的, 我们监听用户下拉的动作, 如果发现ListView现在处于最顶端, 用户继续下拉, 我们就将Header的高度增加, 这样就造成一种错觉, 用户以为是自己把ListView拉下来了, 但是实际上是我们主动把Header的高度增加了, 把ListView给顶下来了. 用户松手, 我们利用属性动画将Header的高度逐渐减小即可.

准备工作

我们先把需要使用的布局和动画准备好

Header的布局

Header的布局其实是这样

左边的箭头图片和一个环形进度条是重叠的, 在表示为加载的时候, 进度条显示, 箭头隐藏, 凡是用过下拉刷新的人都明白.
下面是布局的xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <FrameLayout android:gravity="bottom" android:id="@+id/pull_header"
        android:layout_width="match_parent"
        android:layout_gravity="bottom|center"
        android:layout_height="0dp">
        <FrameLayout android:layout_gravity="bottom|left"
            android:id="@+id/layout_indicator"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/pulldown_header_height"
            android:layout_marginLeft="50.0dip">
            <ProgressBar android:layout_gravity="center"
                android:id="@+id/pull_header_prog"
                android:visibility="gone"
                android:layout_width="22.0dip"
                android:layout_height="22.0dip" />
            <ImageView android:layout_gravity="center"
                android:id="@+id/pullheader_indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/pullheader_indicator"
                android:scaleType="center" />
        </FrameLayout>
        <LinearLayout android:gravity="center"
            android:layout_gravity="bottom|center"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="@dimen/pulldown_header_height">
            <TextView android:textSize="15.0sp"
                android:id="@+id/pull_header_major_text"
                android:layout_width="wrap_content"
                android:text="下拉刷新你怕不怕"
                android:layout_height="wrap_content" />
            <TextView android:textSize="14.0sp"
                android:id="@+id/pull_header_minor_text"
                android:visibility="gone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

注意布局文件将整个可视区域的高度设为0dp.

箭头动画

下拉到一定程度, 箭头会转动180度, 这个可以通过xml写好的动画来实现, 下面就是转动180度以及再转180度的动画
转动180度

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:duration="300"
        android:fromDegrees="0.0"
        android:toDegrees="180.0"
        android:pivotX="50.0%"
        android:pivotY="50.0%" />
</set>

再转180度恢复原状

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:duration="300"
        android:fromDegrees="180.0"
        android:toDegrees="360.0"
        android:pivotX="50.0%"
        android:pivotY="50.0%" />
</set>

继承ListView

public