自定义下拉刷新控件 - RefreshableView(支持所有控件的下拉刷新)

这是在了解下拉刷新功能原理下的产物，下拉刷新可以说是国产APP里面必有的功能，连Google都为此出了SwipeRefreshLayout，一种MD风格的下拉刷新。
不过，MD风格在国内似乎很是艰难，不单单是国内系统主流仍是4.4的原因，也有用户习惯的问题，扯的有点多了，在看了许多博客之后，我突然想写一个能仿照 SwipeRefreshLayout 的兼容所有控件的下拉刷新，不单单只是 ListView，希望它也可以包容普通的View和ScrollView，经过两天的奋斗，终于搞定了，因为我的目的只是想要下拉刷新，所以功能很少，不过，如果能把下拉刷新搞定了，其它的功能，就可以慢慢堆砌起来了。

---

新系统的原因，无法给出合适的gif，只能截图了：

第一张图片展示的是TextView：

第二章图片展示的是ListView:

第三章图片展示的是ScrollView：

基本上这就是我测试的成功的控件，兼容普通的View是最简单的，复杂一点的就是ListView和ScrollView。

---

思路：我的思路和大部分博客都是一样的，自定义一个ViewGroup，然后将包含的要拖拽的控件的Touch事件交给 RefreshableView 处理，动态改变 headView 的 marginTop 的值，以上。当然，这其中会有一些细节要注意，比如 onTouch 方法的返回值的处理，还有子 View 的 MarginTop 值的处理。

---

源码

先是headView的布局文件：

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


    <ImageView
        android:id="@+id/imageView_down"
        android:layout_width="14dp"
        android:layout_height="24dp"
        android:padding="2dp"
        android:src="@drawable/svg_down" />

    <ProgressBar
        android:visibility="gone"
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:progressDrawable="@drawable/progressBar" />

    <TextView
        android:padding="15dp"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pull_to_refresh"
        android:textSize="16sp" />

</LinearLayout>

接下来就是至关重要的类 RefreshableView:

package com.pull2refresh;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;

import shike.xianrou.com.pull2refresh.R;

/**
 * Created by cjh on 16-9-6.
 */
public class RefreshableView extends LinearLayout implements View.OnTouchListener {

    private static final String TAG = "RefreshableView";

    private static final int REFRESHING = 0;//正在刷新
    private static final int ORIGINAL = REFRESHING + 1;//初始状态
    private static final int RELEASE_TO_REFRESHING = ORIGINAL + 1;//释放即将刷新的状态

    private int current_status = ORIGINAL;//当前最新状态

    private LinearLayout headView;//刷新layout
    private TextView textView;//刷新layout中的文字提示
    private ImageView imageView;//刷新layout中的箭头
    private ProgressBar progressBar;//刷新layout中的进度条

    private View view;//手指控制的下拉的View

    private int hideHeight;//刷新layout要隐藏的高度

    private boolean isablePull;//是否可以下拉，例如当 current_status = REFRESHIING 时是不可以下拉拖拽的

    private float yDown;//手指按下的坐标

    private int touchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();//界限值，防止手指误触，过于灵敏

    private boolean firstLayout = true;//第一次调用onLayout的时候置为false

    private int maxMarginTop;//刷新Layout能拉下的最大距离

    private MarginLayoutParams marginLayoutParams;//刷新layout的MarginLayoutParams

    private String pull_to_refresh = "下拉可以刷新";

    private String release_to_refresh = "释放立即刷新";

    private String refreshing = "正在刷新…";


    private int original_margin = 0;//针对下拉的View存在MarginTop这中特殊值的处理

    public interface PullToRefreshListener {

        void onRefresh();
    }

    private PullToRefreshListener pullToRefreshListener;

    public void addPullToRefreshListener(PullToRefreshListener pullToRefreshListener) {
        this.pullToRefreshListener = pullToRefreshListener;
    }

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

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public RefreshableView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        headView = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.refresh_layout, null, true);
        imageView = (ImageView) headView.findViewById(R.id.imageView_down);
        progressBar = (ProgressBar) headView.findViewById(R.id.progressBar);
        textView = (TextView) headView.findViewById(R.id.textView);
        progressBar.setVisibility(View.GONE);
        setOrientation(VERTICAL);
        addView(headView, 0);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        Log.d(TAG, "onlayout");
        if (changed && firstLayout) {
            //将View的Touch时间的处理交给RefreshableView去处理
            view = getChildAt(1);
            view.setOnTouchListener(this);

            //刷新layout的 marginTop 的最大值设为刷新头的高度
            maxMarginTop = headView.getHeight();

            //要将控件完全隐藏起来，那么隐藏的高度就设置为控件的高度
            hideHeight = -headView.getHeight();
            marginLayoutParams = (MarginLayoutParams) headView.getLayoutParams();
            marginLayoutParams.topMargin = hideHeight;
            headView.setLayoutParams(marginLayoutParams);

            //这里必须将firstLayout设置为false,否则在处理Touch是件的过程中，headView在怎么调用setLayoutParams都会被置为初始的隐藏状态
            firstLayout = false;

            //如果子View是一个ViewGroup 那么就需要计算出子View的MarginTop的值，因为如果MarginTop不为0，那么子View的Y轴坐标和父View的坐标是不一样的
            if (view instanceof ViewGroup) {
                int[] childLocations = new int[2];
                int[] viewLocations = new int[2];
                view.getLocationOnScreen(viewLocations);
                ((ViewGroup) view).getChildAt(0).getLocationOnScreen(childLocations);
                original_margin = childLocations[1] - viewLocations[1];
                Log.d(TAG, "onLayout viewLocations[1] " + viewLocations[1]);
                Log.d(TAG, "onLayout locations[1] " + childLocations[1]);
                Log.d(TAG, "onLayout original_margin " + original_margin);
            }
        }
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if (pullToRefreshListener != null) {
            isAblePull();
            if (isablePull) {
                switch (motionEvent.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        yDown = motionEvent.getRawY();
                        break;

                    case MotionEvent.ACTION_MOVE:
                        float yMove = motionEvent.getRawY();
                        float distance = yMove - yDown;

                        //如果手势是向上的，并且手势在Y轴的移动距离小于界限值，那么就不处理
                        if (distance < 0 || Math.abs(distance) < touchSlop)
                            return false;

                        //MarginTop的距离是手势距离的1/2,形成费力延迟的效果
                        marginLayoutParams.topMargin = (int) (distance / 2 + hideHeight);
                        Log.d(TAG, "topMargin " + marginLayoutParams.topMargin);

                        //如果大于最大的MarginTop的值的时候，就将值置为 maxMarginTop
                        if (marginLayoutParams.topMargin >= maxMarginTop)
                            marginLayoutParams.topMargin = maxMarginTop;


                        if (marginLayoutParams.topMargin >= 0) {
                            //当刷新头完全显示的时候，改变状态，置为 释放刷新的状态
                            if (current_status != RELEASE_TO_REFRESHING) {
                                rotate(0, 180);
                                textView.setText(release_to_refresh);
                            }
                            current_status = RELEASE_TO_REFRESHING;
                        } else {
                            //否则就置为初始状态
                            if (current_status != ORIGINAL) {
                                rotate(180, 360);
                                textView.setText(pull_to_refresh);
                            }
                            current_status = ORIGINAL;

                        }
                        headView.setLayoutParams(marginLayoutParams);
                        break;

                    case MotionEvent.ACTION_CANCEL:
                    case MotionEvent.ACTION_UP:
                        float yUp = motionEvent.getRawY();
                        float dis = yUp - yDown;
                        if (dis > 0 && Math.abs(dis) > touchSlop)
                            switch (current_status) {
                                //释放刷新
                                case RELEASE_TO_REFRESHING:
                                    animateMarginTop(marginLayoutParams.topMargin, 0);
                                    imageView.clearAnimation();
                                    imageView.setVisibility(View.GONE);
                                    progressBar.setVisibility(View.VISIBLE);
                                    textView.setText(refreshing);
                                    pullToRefreshListener.onRefresh();
                                    break;

                                //初始化
                                case ORIGINAL:
                                    reset();
                                    //从当前的MarginTop的值，转变到隐藏所需的 MarginTop
                                    animateMarginTop(marginLayoutParams.topMargin, hideHeight);
                                    break;
                            }
                        else
                            return false;

                        break;
                }
                return true;
            }
        }
        return false;
    }

    /**
     * 判断是否可以下拉
     *
     * @return
     */
    public boolean isAblePull() {
        //统一判断，其实主要是对于view是普通View的判断
        if (current_status != REFRESHING)
            isablePull = true;
        else
            isablePull = false;

        if (view instanceof ViewGroup) {
            isablePull = false;
            View childView = ((ViewGroup) view).getChildAt(0);
            int[] viewLocations = new int[2];
            int[] childViewLocations = new int[2];
            view.getLocationOnScreen(viewLocations);
            childView.getLocationOnScreen(childViewLocations);

            //这一步中的 original_margin 至关重要，就是用来兼容 子View 有MarginTop属性的值，当childView 的Y轴坐标 和 计算出了 Margin 值后的父View坐标相等时，说明此时处于可下拉的状态
            if (viewLocations[1] + original_margin == childViewLocations[1])
                isablePull = true;
            else
                isablePull = false;
        }

        return isablePull;
    }

    private void rotate(int from, int to) {
        RotateAnimation rotateAnimation = new RotateAnimation(from, to, imageView.getWidth() / 2, imageView.getHeight() / 2);
        rotateAnimation.setDuration(100);
        rotateAnimation.setFillAfter(true);
        imageView.startAnimation(rotateAnimation);
    }

    private void animateMarginTop(int from, int to) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofInt(headView, "cjh", from, to);
        objectAnimator.setDuration(300);
        objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int margin = (int) valueAnimator.getAnimatedValue();
                marginLayoutParams.topMargin = margin;
                headView.setLayoutParams(marginLayoutParams);
            }
        });
        objectAnimator.start();
    }

    public void complete() {
        animateMarginTop(0, hideHeight);
        reset();
    }

    private void reset() {
        rotate(180, 360);
        textView.setText(pull_to_refresh);
        imageView.setVisibility(View.VISIBLE);
        progressBar.setVisibility(View.GONE);
    }

}

---

使用：

    <com.pull2refresh.RefreshableView
        android:id="@+id/refreshableView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <com.pull2refresh.MTextView
            android:id="@+id/mTextView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="Hello World!"
            android:textSize="22sp" />

    </com.pull2refresh.RefreshableView>

...
 refreshableView.addPullToRefreshListener(new RefreshableView.PullToRefreshListener() {
            @Override
            public void onRefresh() {
                setData();
            }
        });
...
 private void setData() {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "text", 1f, 100f);
        objectAnimator.setDuration(3000);
        objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                textView.setText((Float) valueAnimator.getAnimatedValue());
            }
        });
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                refreshableView.complete();
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        objectAnimator.start();
    }

在我自定义的 RefreshableView 中，如果不设置下拉的监听，就没有下拉的效果，也就是不支持下拉。

源码下载