[关闭]
@Tyhj 2017-06-29T06:08:14.000000Z 字数 12321 阅读 1924

Android自定义控件（一）——自定义下拉刷新控件

Android

原文：https://www.zybuluo.com/Tyhj/note/800026

自定义控件大家都会用，网上也一大堆，有些的确很炫酷，但是很难遇到在自己的项目中想要的效果。所以会一些基本的自定义控件还是必要的。我也是刚开始学习自定义控件，有兴趣的可以看看，交流，指出我的不足之处

下拉刷新控件是一个经常被自定义的控件，可以实现很炫的效果，一般情况，Google官方的SwipeRefreshLayout就很好用了，现在我要实现的效果如下：

gif可能有点慢，在实际效果很流畅的，显示效果也可能更好。
刚开始做自定义控件一开始就想自己从零实现真的难，所以先看看别人是怎么做的，然后自己照着模仿，改动，然后自己实现。我先看了郭霖的自定义ListView下拉刷新控件自己改的，然后了解了其中过程，基本上这类的下拉刷新效果自己去实现就没什么问题了。

实现思路：

这里我们将采取的方案是使用组合View的方式，先自定义一个布局继承自LinearLayout，然后在这个布局中加入下拉头和ListView这两个子元素，并让这两个子元素纵向排列。初始化的时候，让下拉头向上偏移出屏幕，这样我们看到的就只有ListView了。然后对ListView的touch事件进行监听，如果当前ListView已经滚动到顶部并且手指还在向下拉的话，那就将下拉头显示出来，松手后进行刷新操作，并将下拉头隐藏。原理示意图如下：

先新建一个布局作为下拉的头部：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/pull_to_refresh_head"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="360dp">
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="360dp"
  10.         android:elevation="2dp"
  11.         android:gravity="center">
  13.         <ImageView
  14.             android:id="@+id/iv_triangle"
  15.             android:layout_width="40dp"
  16.             android:layout_height="40dp"
  17.             android:layout_marginTop="130dp"
  18.             android:src="@mipmap/ic_triangle" />
  20.     </LinearLayout>
  23.     <ImageView
  24.         android:layout_width="match_parent"
  25.         android:layout_height="360dp"
  26.         android:scaleType="centerCrop"
  27.         android:src="@mipmap/bg_refresh" />
  30. </RelativeLayout>

里面很简单就是一个ImageView显示刷新的那个旋转的三角形，另一个就是下拉头的背景。

然后新建一个RefreshableView继承自LinearLayout，代码如下所示：

  1. package myview;
  3. import android.content.Context;
  4. import android.content.SharedPreferences;
  5. import android.os.AsyncTask;
  6. import android.preference.PreferenceManager;
  7. import android.util.AttributeSet;
  8. import android.view.LayoutInflater;
  9. import android.view.MotionEvent;
  10. import android.view.View;
  11. import android.view.ViewConfiguration;
  12. import android.view.animation.Animation;
  13. import android.view.animation.LinearInterpolator;
  14. import android.view.animation.RotateAnimation;
  15. import android.widget.ImageView;
  16. import android.widget.LinearLayout;
  17. import android.widget.ListView;
  18. import android.widget.ProgressBar;
  19. import android.widget.TextView;
  21. import com.yorhp.refreshview.R;
  23. import static android.R.attr.fromDegrees;
  24. import static android.R.attr.pivotX;
  25. import static android.R.attr.pivotY;
  26. import static android.R.attr.toDegrees;
  27. import static android.icu.lang.UCharacter.GraphemeClusterBreak.L;
  29. public class RefreshableViewList extends LinearLayout implements View.OnTouchListener {
  31.     /**
  32.      * 下拉状态
  33.      */
  34.     public static final int STATUS_PULL_TO_REFRESH = 0;
  36.     /**
  37.      * 释放立即刷新状态
  38.      */
  39.     public static final int STATUS_RELEASE_TO_REFRESH = 1;
  41.     /**
  42.      * 正在刷新状态
  43.      */
  44.     public static final int STATUS_REFRESHING = 2;
  46.     /**
  47.      * 刷新完成或未刷新状态
  48.      */
  49.     public static final int STATUS_REFRESH_FINISHED = 3;
  51.     /**
  52.      * 下拉头部回滚的速度
  53.      */
  54.     public static final int SCROLL_SPEED = -30;
  57.     /**
  58.      * 下拉的长度
  59.      */
  61.     private int pullLength;
  64.     /**
  65.      * 下拉刷新的回调接口
  66.      */
  67.     private PullToRefreshListener mListener;
  70.     /**
  71.      * 下拉头的View
  72.      */
  73.     private View header;
  75.     /**
  76.      * 需要去下拉刷新的ListView
  77.      */
  78.     private ListView listView;
  80.     /**
  81.      * 刷新时显示的进度条
  82.      */
  83.    // private ProgressBar progressBar;
  86.     //三角形
  87.     private ImageView iv_triangle;
  89.     /**
  90.      * 指示下拉和释放的箭头
  91.      */
  92.    // private ImageView arrow;
  94.     /**
  95.      * 指示下拉和释放的文字描述
  96.      */
  97.     //private TextView description;
  100.     /**
  101.      * 下拉头的布局参数
  102.      */
  103.     private MarginLayoutParams headerLayoutParams;
  106.     /**
  107.      * 为了防止不同界面的下拉刷新在上次更新时间上互相有冲突，使用id来做区分
  108.      */
  109.     private int mId = -1;
  111.     /**
  112.      * 下拉头的高度
  113.      */
  114.     private int hideHeaderHeight;
  116.     /**
  117.      * 当前处理什么状态，可选值有STATUS_PULL_TO_REFRESH, STATUS_RELEASE_TO_REFRESH,
  118.      * STATUS_REFRESHING 和 STATUS_REFRESH_FINISHED
  119.      */
  120.     private int currentStatus = STATUS_REFRESH_FINISHED;
  121.     ;
  123.     /**
  124.      * 记录上一次的状态是什么，避免进行重复操作
  125.      */
  126.     private int lastStatus = currentStatus;
  128.     /**
  129.      * 手指按下时的屏幕纵坐标
  130.      */
  131.     private float yDown;
  133.     /**
  134.      * 在被判定为滚动之前用户手指可以移动的最大值。
  135.      */
  136.     private int touchSlop;
  138.     /**
  139.      * 是否已加载过一次layout，这里onLayout中的初始化只需加载一次
  140.      */
  141.     private boolean loadOnce;
  143.     /**
  144.      * 当前是否可以下拉，只有ListView滚动到头的时候才允许下拉
  145.      */
  146.     private boolean ableToPull;
  148.     /**
  149.      * 下拉刷新控件的构造函数，会在运行时动态添加一个下拉头的布局。
  150.      *
  151.      * @param context
  152.      * @param attrs
  153.      */
  154.     public RefreshableViewList(Context context, AttributeSet attrs) {
  155.         super(context, attrs);
  156.         header = LayoutInflater.from(context).inflate(R.layout.pull_to_refresh, null, true);
  157.         iv_triangle = (ImageView) header.findViewById(R.id.iv_triangle);
  158.         touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
  159.         setOrientation(VERTICAL);
  160.         addView(header, 0);
  161.     }
  163.     /**
  164.      * 进行一些关键性的初始化操作，比如：将下拉头向上偏移进行隐藏，给ListView注册touch事件。
  165.      */
  166.     @Override
  167.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
  168.         super.onLayout(changed, l, t, r, b);
  169.         if (changed && !loadOnce) {
  170.             hideHeaderHeight = -header.getHeight();
  171.             pullLength = hideHeaderHeight / 4 * 3;
  172.             headerLayoutParams = (MarginLayoutParams) header.getLayoutParams();
  173.             headerLayoutParams.topMargin = hideHeaderHeight;
  174.             listView = (ListView) getChildAt(1);
  175.             listView.setOnTouchListener(this);
  176.             loadOnce = true;
  177.         }
  178.     }
  181.     int preDistance = 0;
  183.     /**
  184.      * 当ListView被触摸时调用，其中处理了各种下拉刷新的具体逻辑。
  185.      */
  186.     @Override
  187.     public boolean onTouch(View v, MotionEvent event) {
  188.         setIsAbleToPull(event);
  189.         if (ableToPull) {
  190.             switch (event.getAction()) {
  191.                 case MotionEvent.ACTION_DOWN:
  192.                     yDown = event.getRawY();
  193.                     break;
  194.                 case MotionEvent.ACTION_MOVE:
  195.                     float yMove = event.getRawY();
  196.                     int distance = (int) (yMove - yDown);
  197.                     // 如果手指是下滑状态，并且下拉头是完全隐藏的，就屏蔽下拉事件
  198.                     if (distance <= pullLength && headerLayoutParams.topMargin <= hideHeaderHeight) {
  199.                         return false;
  200.                     }
  201.                     if (distance < touchSlop) {
  202.                         return false;
  203.                     }
  204.                     if (currentStatus != STATUS_REFRESHING) {
  205.                         if (headerLayoutParams.topMargin > pullLength) {
  206.                             currentStatus = STATUS_RELEASE_TO_REFRESH;
  207.                         } else {
  208.                             currentStatus = STATUS_PULL_TO_REFRESH;
  209.                         }
  210.                         // 通过偏移下拉头的topMargin值，来实现下拉效果，修改分母可以有不同的拉力效果
  211.                         headerLayoutParams.topMargin = (int) ((distance / 2.8) + hideHeaderHeight);
  212.                         header.setLayoutParams(headerLayoutParams);
  213.                         //添加动画（这里是手指控制滑动的动画）、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
  214.                         rotateTriangle((distance - preDistance)/2);
  215.                         preDistance=distance;
  216.                     }
  217.                     break;
  218.                 case MotionEvent.ACTION_UP:
  219.                 default:
  220.                     if (currentStatus == STATUS_RELEASE_TO_REFRESH) {
  221.                         // 松手时如果是释放立即刷新状态，就去调用正在刷新的任务
  222.                         new RefreshingTask().execute();
  223.                     } else if (currentStatus == STATUS_PULL_TO_REFRESH) {
  224.                         // 松手时如果是下拉状态，就去调用隐藏下拉头的任务
  225.                         new HideHeaderTask().execute();
  226.                     }
  227.                     break;
  228.             }
  229.             // 时刻记得更新下拉头中的信息  
  230.             if (currentStatus == STATUS_PULL_TO_REFRESH
  231.                     || currentStatus == STATUS_RELEASE_TO_REFRESH) {
  232.                 updateHeaderView();
  233.                 // 当前正处于下拉或释放状态，要让ListView失去焦点，否则被点击的那一项会一直处于选中状态  
  234.                 listView.setPressed(false);
  235.                 listView.setFocusable(false);
  236.                 listView.setFocusableInTouchMode(false);
  237.                 lastStatus = currentStatus;
  238.                 // 当前正处于下拉或释放状态，通过返回true屏蔽掉ListView的滚动事件  
  239.                 return true;
  240.             }
  241.         }
  242.         return false;
  243.     }
  245.     /**
  246.      * 给下拉刷新控件注册一个监听器。
  247.      *
  248.      * @param listener 监听器的实现。
  249.      * @param id       为了防止不同界面的下拉刷新在上次更新时间上互相有冲突， 请不同界面在注册下拉刷新监听器时一定要传入不同的id。
  250.      */
  251.     public void setOnRefreshListener(PullToRefreshListener listener, int id) {
  252.         mListener = listener;
  253.         mId = id;
  254.     }
  256.     /**
  257.      * 当所有的刷新逻辑完成后，记录调用一下，否则你的ListView将一直处于正在刷新状态。
  258.      */
  259.     public void finishRefreshing() {
  260.         currentStatus = STATUS_REFRESH_FINISHED;
  261.         new HideHeaderTask().execute();
  262.     }
  264.     /**
  265.      * 根据当前ListView的滚动状态来设定 {@link #ableToPull}
  266.      * 的值，每次都需要在onTouch中第一个执行，这样可以判断出当前应该是滚动ListView，还是应该进行下拉。
  267.      *
  268.      * @param event
  269.      */
  270.     private void setIsAbleToPull(MotionEvent event) {
  271.         View firstChild = listView.getChildAt(0);
  272.         if (firstChild != null) {
  273.             int firstVisiblePos = listView.getFirstVisiblePosition();
  274.             if (firstVisiblePos == 0 && firstChild.getTop() == 0) {
  275.                 if (!ableToPull) {
  276.                     yDown = event.getRawY();
  277.                 }
  278.                 // 如果首个元素的上边缘，距离父布局值为0，就说明ListView滚动到了最顶部，此时应该允许下拉刷新  
  279.                 ableToPull = true;
  280.             } else {
  281.                 if (headerLayoutParams.topMargin != hideHeaderHeight) {
  282.                     headerLayoutParams.topMargin = hideHeaderHeight;
  283.                     header.setLayoutParams(headerLayoutParams);
  284.                 }
  285.                 ableToPull = false;
  286.             }
  287.         } else {
  288.             // 如果ListView中没有元素，也应该允许下拉刷新  
  289.             ableToPull = true;
  290.         }
  291.     }
  293.     /**
  294.      * 更新下拉头中的信息。
  295.      */
  296.     private void updateHeaderView() {
  297.         if (lastStatus != currentStatus) {
  298.             if (currentStatus == STATUS_PULL_TO_REFRESH) {  //下拉状态
  300.             } else if (currentStatus == STATUS_RELEASE_TO_REFRESH) {  //释放状态
  302.             } else if (currentStatus == STATUS_REFRESHING) {  //刷新中
  304.                 iv_triangle.clearAnimation();
  305.                 TriangelRotate();
  306.             }
  307.         }
  308.     }
  310.     float preDegres = 0;
  312.     //手指下拉的时候的动画
  313.     private void rotateTriangle(float angle) {
  314.         float pivotX = iv_triangle.getWidth() /2;
  315.         float pivotY = (float) (iv_triangle.getHeight() /1.6);
  316.         float fromDegrees = preDegres;
  317.         float toDegrees = angle;
  319.         RotateAnimation animation = new RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY);
  320.         animation.setDuration(10);
  321.         animation.setFillAfter(true);
  322.         iv_triangle.startAnimation(animation);
  323.         preDegres = preDegres + angle;
  324.     }
  326.     //刷新的时候一直转的动画
  327.     private void TriangelRotate(){
  328.         float pivotX = iv_triangle.getWidth() /2;
  329.         float pivotY = (float) (iv_triangle.getHeight() /1.6);
  330.         RotateAnimation animation = new RotateAnimation(0f, 120f, pivotX, pivotY);
  331.         animation.setDuration(50);
  332.         animation.setRepeatMode(Animation.RESTART);
  333.         animation.setRepeatCount(Animation.INFINITE);
  334.         preDegres = 0;
  335.         LinearInterpolator linearInterpolator=new LinearInterpolator();
  336.         animation.setInterpolator(linearInterpolator);
  337.         iv_triangle.startAnimation(animation);
  338.     }
  343.     /**
  344.      * 正在刷新的任务，在此任务中会去回调注册进来的下拉刷新监听器。
  345.      * 下拉超过了，要返回到刷新的位置
  346.      *
  347.      * @author guolin
  348.      */
  349.     class RefreshingTask extends AsyncTask<Void, Integer, Void> {
  351.         @Override
  352.         protected Void doInBackground(Void... params) {
  353.             int topMargin = headerLayoutParams.topMargin;
  354.             while (true) {
  355.                 topMargin = topMargin + SCROLL_SPEED;
  356.                 if (topMargin <= pullLength) {
  357.                     topMargin = pullLength;
  358.                     break;
  359.                 }
  360.                 publishProgress(topMargin);
  361.                 sleep(10);
  362.             }
  363.             currentStatus = STATUS_REFRESHING;
  364.             publishProgress(pullLength);
  365.             if (mListener != null) {
  366.                 mListener.onRefresh();
  367.             }
  368.             return null;
  369.         }
  371.         @Override
  372.         protected void onProgressUpdate(Integer... topMargin) {
  373.             updateHeaderView();
  374.             headerLayoutParams.topMargin = topMargin[0];
  375.             header.setLayoutParams(headerLayoutParams);
  376.             //添加动画（这里是手指松开后返回到刷新位置的动画）、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
  377.         }
  379.     }
  381.     /**
  382.      * 隐藏下拉头的任务，当未进行下拉刷新或下拉刷新完成后，此任务将会使下拉头重新隐藏。
  383.      *
  384.      * @author guolin
  385.      */
  386.     class HideHeaderTask extends AsyncTask<Void, Integer, Integer> {
  388.         @Override
  389.         protected Integer doInBackground(Void... params) {
  390.             int topMargin = headerLayoutParams.topMargin;
  391.             while (true) {
  392.                 topMargin = topMargin + SCROLL_SPEED;
  393.                 if (topMargin <= hideHeaderHeight) {
  394.                     topMargin = hideHeaderHeight;
  395.                     break;
  396.                 }
  397.                 publishProgress(topMargin);
  398.                 sleep(10);
  399.             }
  400.             return topMargin;
  401.         }
  403.         @Override
  404.         protected void onProgressUpdate(Integer... topMargin) {
  405.             headerLayoutParams.topMargin = topMargin[0];
  406.             header.setLayoutParams(headerLayoutParams);
  407.             //添加动画（这里是手指松开后返回到初始位置的动画）、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
  409.         }
  411.         @Override
  412.         protected void onPostExecute(Integer topMargin) {
  413.             headerLayoutParams.topMargin = topMargin;
  414.             header.setLayoutParams(headerLayoutParams);
  415.             currentStatus = STATUS_REFRESH_FINISHED;
  416.             //完成刷新、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
  417.             iv_triangle.clearAnimation();
  418.         }
  419.     }
  421.     /**
  422.      * 使当前线程睡眠指定的毫秒数。
  423.      *
  424.      * @param time 指定当前线程睡眠多久，以毫秒为单位
  425.      */
  426.     private void sleep(int time) {
  427.         try {
  428.             Thread.sleep(time);
  429.         } catch (InterruptedException e) {
  430.             e.printStackTrace();
  431.         }
  432.     }
  434.     /**
  435.      * 下拉刷新的监听器，使用下拉刷新的地方应该注册此监听器来获取刷新回调。
  436.      *
  437.      * @author guolin
  438.      */
  439.     public interface PullToRefreshListener {
  441.         /**
  442.          * 刷新时会去回调此方法，在方法内编写具体的刷新逻辑。注意此方法是在子线程中调用的， 你可以不必另开线程来进行耗时操作。
  443.          */
  444.         void onRefresh();
  446.     }
  448. }

代码说明

这个类是整个下拉刷新功能中最重要的一个类，注释已经写得比较详细了，我再简单解释一下。首先在RefreshableView的构造函数中动态添加了刚刚定义的pull_to_refresh这个布局作为下拉头，然后在onLayout方法中将下拉头向上偏移出了屏幕，再给ListView注册了touch事件。之后每当手指在ListView上滑动时，onTouch方法就会执行。在onTouch方法中的第一行就调用了setIsAbleToPull方法来判断ListView是否滚动到了最顶部，只有滚动到了最顶部才会执行后面的代码，否则就视为正常的ListView滚动，不做任何处理。当ListView滚动到了最顶部时，如果手指还在向下拖动，就会改变下拉头的偏移值，让下拉头显示出来，下拉的距离设定为手指移动距离的1/2.8，这样才会有拉力的感觉。如果下拉的距离足够大，在松手的时候就会执行刷新操作，如果距离不够大，就仅仅重新隐藏下拉头。

具体的刷新操作会在RefreshingTask中进行，其中在doInBackground方法中回调了PullToRefreshListener接口的onRefresh方法，这也是大家在使用RefreshableView时必须要去实现的一个接口，因为具体刷新的逻辑就应该写在onRefresh方法中，后面会演示使用的方法。

你可能一下子看起来觉得很多代码，但是如果你把自己实现的那些可以修改的代码删除后看起来就简单很多了。然后你再把自己的逻辑添加进去，你的代码可能别人看起来也很难的。最重要的是自己要亲手做，简单地看可能怎么也看不会。

下拉刷新那自然要适配RecyclerView和NestedScrollView，实现起来也很简单，就是在判定列表是否滑动到顶部的时候代码改动一下。

  1. //ListView判定方法
  2.   private void setIsAbleToPull(MotionEvent event) {
  3.         View firstChild = listView.getChildAt(0);
  4.         if (firstChild != null) {
  5.             int firstVisiblePos = listView.getFirstVisiblePosition();
  6.             if (firstVisiblePos == 0 && firstChild.getTop() == 0) {
  7.                 if (!ableToPull) {
  8.                     yDown = event.getRawY();
  9.                 }
  10.                 // 如果首个元素的上边缘，距离父布局值为0，就说明ListView滚动到了最顶部，此时应该允许下拉刷新  
  11.                 ableToPull = true;
  12.             } else {
  13.                 if (headerLayoutParams.topMargin != hideHeaderHeight) {
  14.                     headerLayoutParams.topMargin = hideHeaderHeight;
  15.                     header.setLayoutParams(headerLayoutParams);
  16.                 }
  17.                 ableToPull = false;
  18.             }
  19.         } else {
  20.             // 如果ListView中没有元素，也应该允许下拉刷新  
  21.             ableToPull = true;
  22.         }
  23.     }
  25. //RecyclerView判定方法
  26.  private void setIsAbleToPull(MotionEvent event) {
  27.         View firstChild = listView.getChildAt(0);
  28.         if (firstChild != null) {
  29.             LinearLayoutManager lm = (LinearLayoutManager) listView.getLayoutManager();
  30.             int firstVisiblePos = lm.findFirstVisibleItemPosition();
  31.             if (firstVisiblePos == 0 && firstChild.getTop() == 0) {
  32.                 if (!ableToPull) {
  33.                     yDown = event.getRawY();
  34.                 }
  35.                 // 如果首个元素的上边缘，距离父布局值为0，就说明ListView滚动到了最顶部，此时应该允许下拉刷新  
  36.                 ableToPull = true;
  37.             } else {
  38.                 if (headerLayoutParams.topMargin != hideHeaderHeight) {
  39.                     headerLayoutParams.topMargin = hideHeaderHeight;
  40.                     header.setLayoutParams(headerLayoutParams);
  41.                 }
  42.                 ableToPull = false;
  43.             }
  44.         } else {
  45.             // 如果ListView中没有元素，也应该允许下拉刷新  
  46.             ableToPull = true;
  47.         }
  48.     }
  51. //NestedScrollView
  53. private void setIsAbleToPull(MotionEvent event) {
  54.         View firstChild = listView.getChildAt(0);
  55.         if (firstChild != null) {
  56.             int scrollY = listView.getScrollY();
  57.             if (scrollY == 0 && firstChild.getTop() == 0) {
  58.                 if (!ableToPull) {
  59.                     yDown = event.getRawY();
  60.                 }
  61.                 // 如果首个元素的上边缘，距离父布局值为0，就说明ListView滚动到了最顶部，此时应该允许下拉刷新  
  62.                 ableToPull = true;
  63.             } else {
  64.                 if (headerLayoutParams.topMargin != hideHeaderHeight) {
  65.                     headerLayoutParams.topMargin = hideHeaderHeight;
  66.                     header.setLayoutParams(headerLayoutParams);
  67.                 }
  68.                 ableToPull = false;
  69.             }
  70.         } else {
  71.             // 如果ListView中没有元素，也应该允许下拉刷新  
  72.             ableToPull = true;
  73.         }
  74.     }

添加动画和改变状态什么的重要的地方我注释出来了，自己去搞搞还是很有意思的。

参考文章：Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能

项目地址：Tyhj的可自定义下拉刷新控件

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注