Android自定义下拉刷新控件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;} elsereturn false; break;}return true;} } return false; } /** * 判断是否可以下拉 * * @return */ public boolean isAblePull（） { //统一判断，其实主要是对于view是普通View的判断 if （current_status ！= REFRESHING）isablePull = true; elseisablePull = 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;elseisablePull = 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（） {@Overridepublic 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.MTextViewandroid: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（） {@Overridepublic void onRefresh（） {setData（）;} }）;... private void setData（） { ObjectAnimator objectAnimator = ObjectAnimator.ofFloat（textView, "text", 1f, 100f）; objectAnimator.setDuration（3000）; objectAnimator.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Overridepublic void onAnimationUpdate（ValueAnimator valueAnimator） {textView.setText（（Float） valueAnimator.getAnimatedValue（））;} }）; objectAnimator.addListener（new Animator.AnimatorListener（） {@Overridepublic void onAnimationStart（Animator animator） {}@Overridepublic void onAnimationEnd（Animator animator） {refreshableView.complete（）;}@Overridepublic void onAnimationCancel（Animator animator） {}@Overridepublic void onAnimationRepeat（Animator animator） {} }）; objectAnimator.start（）; }

在我自定义的 RefreshableView 中，如果不设置下拉的监听，就没有下拉的效果，也就是不支持下拉
源码下载：Android下拉刷新控件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。