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;
    }
   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 中,如果不设置下拉的监听,就没有下拉的效果,也就是不支持下拉

源码下载:Android下拉刷新控件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能

    如何为不同的list item呈现不同的菜单,本文实例就为大家介绍了Android仿微信或QQ滑动弹出编辑.删除菜单效果.增加下拉刷新等功能的实现,分享给大家供大家参考,具体内容如下 效果图: 1. 下载开源项目,并将其中的liberary导入到自己的项目中: 2. 使用SwipeMenuListView代替ListView,在页面中布局: <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipeRefresh

  • Android PullToRefreshLayout下拉刷新控件的终结者

    说到下拉刷新控件,网上版本有很多,很多软件也都有下拉刷新功能.有一个叫XListView的,我看别人用过,没看过是咋实现的,看这名字估计是继承自ListView修改的,不过效果看起来挺丑的,也没什么扩展性,太单调了.看了QQ2014的列表下拉刷新,发现挺好看的,我喜欢,贴一下图看一下qq的下拉刷新效果: 不错吧?嗯,是的.一看就知道实现方式不一样.咱们今天就来实现一个下拉刷新控件.由于有时候不仅仅是ListView需要下拉刷新,ExpandableListView和GridView也有这个需求,

  • Android自定义下拉刷新上拉加载

    本文实例为大家分享了Android自定义下拉刷新上拉加载的具体实现步骤,供大家参考,具体内容如下 实现的方式是SwipeRefreshLayout + RecyclerView 的VIewType 首先看效果: 总的思路: 布局文件 <android.support.v4.widget.SwipeRefreshLayout android:layout_marginTop="?attr/actionBarSize" android:id="@+id/one_refres

  • Android控件RefreshableView实现下拉刷新

    需求:自定义一个ViewGroup,实现可以下拉刷新的功能.下拉一定距离后(下拉时显示的界面可以自定义任何复杂的界面)释放手指可以回调刷新的功能,用户处理完刷新的内容后,可以调用方法onCompleteRefresh()通知刷新完毕,然后回归正常状态.效果如下: 源代码:RefreshableView(https://github.com/wangjiegulu/RefreshableView) 分析: 我们的目的是不管什么控件,只要在xml中外面包一层标签,那这个标签下面的所有子标签所在的控件

  • Android官方下拉刷新控件SwipeRefreshLayout使用详解

    可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介: SwipeRefreshLayout组件只接受一个子组件:即需要刷新的那个组件.它使用一个侦听机制来通知拥有该组件的监听器有刷新事件发生,换句话说我们的Activity必须实现通知的接口.该Activity负责处理事件刷新和刷新相应的视图.一旦监听者接收到该事件,就决定了刷新过程中应处理的地方.如果要展示一个"刷新动画",它必须

  • Android下拉刷新上拉加载控件(适用于所有View)

    前面写过一篇关于下拉刷新控件的文章下拉刷新控件终结者:PullToRefreshLayout,后来看到好多人还有上拉加载更多的需求,于是就在前面下拉刷新控件的基础上进行了改进,加了上拉加载的功能.不仅如此,我已经把它改成了对所有View都通用!可以随心所欲使用这两个功能~~ 我做了一个大集合的demo,实现了ListView.GridView.ExpandableListView.ScrollView.WebView.ImageView.TextView的下拉刷新和上拉加载.后面会提供demo的

  • Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)

    好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下: 通过观察QQ空间的运行效果,发现当往上滚动时菜单

  • android开发教程之实现listview下拉刷新和上拉刷新效果

    复制代码 代码如下: public class PullToLoadListView extends ListView implements OnScrollListener { private static final String TAG = PullToLoadListView.class.getSimpleName(); private static final int STATE_NON = 0; private static final int STATE_PULL_TO_REFRE

  • Android RecyclerView实现下拉刷新和上拉加载

    RecyclerView已经出来很久了,许许多多的项目都开始从ListView转战RecyclerView,那么,上拉加载和下拉刷新是一件很有必要的事情. 在ListView上,我们可以通过自己添加addHeadView和addFootView去添加头布局和底部局实现自定义的上拉和下拉,或者使用一些第三方库来简单的集成,例如Android-pulltorefresh或者android-Ultra-Pull-to-Refresh,后者的自定义更强,但需要自己实现上拉加载. 而在下面我们将用两种方式

  • Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能(附源码)

    最近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在网上直接找一个现成的,可是尝试了网上多个版本的下拉刷新之后发现效果都不怎么理想.有些是因为功能不完整或有Bug,有些是因为使用起来太复杂,十全十美的还真没找到.因此我也是放弃了在网上找现成代码的想法,自己花功夫编写了一种非常简单的下拉刷新实现方案,现在拿出来和大家分享一下.相信在阅读完本篇文章之后,大家都可以在自己的项目中一分钟引入下拉刷新功能. 首先讲一下实现原理.这里我们将采取的方案是使用组合View的方式,先自定义一个布局

随机推荐