Android自定义ListView实现下拉刷新

江礼骞

2023-03-14

本文向大家介绍Android自定义ListView实现下拉刷新，包括了Android自定义ListView实现下拉刷新的使用技巧和注意事项，需要的朋友参考一下

首先呈上效果图

当今APP，哪个没有点滑动刷新功能，简直就太落伍了。正因为需求多，因此自然而然开源的也就多。但是若想引用开源库，则很麻烦，比如PullToRefreshView这个库，如果把开源代码都移植到项目中，这是件很繁琐的事，如果用依赖功能的话，对于强迫症的我，又很不爽。现在也有各种自定义ListView实现PullToRefreshListView的控件，无非就是在header加入一个控件，通过setPadding的方式来改变显示效果。效果已经太out了，如意中发现google自带的swiperefreshlayout实现的效果挺不错，但是我发现这个控件在部分手机上的效果不一样，估计和v7包相关。因此就有了这篇文章自定义这个喜欢的效果。
首先大概描述一下实现原理：
1、重写ListView的onTouchEvent，在方法中根据手指滑动的距离与临界值判断，决定当前的状态，分为四个状态：RELEASE_TO_REFRESH、PULL_TO_REFRESH、REFRESHING、DONE四个状态，分别代表释放刷新、拉动刷新、正在刷新、默认状态。
2、重写ListView的onDraw方法，根据不同的状态值，显示不同的图形表示。
3、根据滑动距离不同，显示不同的透明度、圆弧角度值、整体图形的坐标等等。
4、图形的变化分为两种：1、手动触发，滑动一点距离就更新一点坐标。比如PULL_TO_REFRESH状态，适合在onTouchEvent中的ACTION_MOVE中触发。2、动画自动触发，比如REFRESHING状态和DONE状态，适合在onTouchEvent中的ACTION_UP方法中触发，手指一松开就自动触发动画效果。
5、必须在设置了刷新监听器才可以滑动，否则就是一个普通的LIstView。

代码很简单，只有两个文件，并且有很详细的注释：
PullToRefreshListView类：

 package cc.wxf.view.pull;
 
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;
 
/**
 * Created by ccwxf on 2016/3/30.
 */
public class PullToRefreshListView extends ListView implements AbsListView.OnScrollListener {
 
  public final static int RELEASE_TO_REFRESH = 0;
  public final static int PULL_TO_REFRESH = 1;
  public final static int REFRESHING = 2;
  public final static int DONE = 3;
 
  // 达到刷新条件的滑动距离
  public final static int TOUCH_SLOP = 160;
  // 判断是否记录了最开始按下时的Y坐标
  private boolean isRecored;
  // 记录最开始按下时的Y坐标
  private int startY;
  // ListView第一个Item
  private int firstItemIndex;
  // 当前状态
  private int state;
  // 是否可刷新，只有设置了监听器才能刷新
  private boolean isRefreshable;
  // 刷新标记
  private PullMark mark;
 
  private OnRefreshListener refreshListener;
  private OnScrollButtomListener scrollButtomListener;
 
  public PullToRefreshListView(Context context) {
    super(context);
    init(context);
  }
 
  public PullToRefreshListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
  }
 
  private void init(Context context) {
    //关闭硬件加速，否则PullMark的阴影不会出现
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    setOnScrollListener(this);
    mark = new PullMark(this);
    state = DONE;
    isRefreshable = false;
  }
 
  @Override
  public void onScrollStateChanged(AbsListView view, int scrollState) {
    if (scrollButtomListener != null) {
      if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) {
        if (view.getLastVisiblePosition() == view.getAdapter().getCount() - 1) {
          scrollButtomListener.onScrollToButtom();
        }
      }
    }
  }
 
  @Override
  public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    firstItemIndex = firstVisibleItem;
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mark.onDraw(canvas);
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    mark.setCenterX(width / 2);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
 
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    if (!isRefreshable) {
      return super.onTouchEvent(event);
    }
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        handleActionDown(event);
        break;
 
      case MotionEvent.ACTION_UP:
        handleActionUp();
        break;
 
      case MotionEvent.ACTION_MOVE:
        handleActionMove(event);
        break;
      default:
        break;
    }
    return super.onTouchEvent(event);
  }
 
  private void handleActionMove(MotionEvent event) {
    int tempY = (int) event.getY();
 
    if (!isRecored && firstItemIndex == 0) {
      isRecored = true;
      startY = tempY;
    }
 
    if (state != REFRESHING && isRecored) {
      if (state == RELEASE_TO_REFRESH) {
        setSelection(0);
        if ((tempY - startY < TOUCH_SLOP) && (tempY - startY) > 0) {
          state = PULL_TO_REFRESH;
        }
      }
      if (state == PULL_TO_REFRESH) {
        setSelection(0);
        if (tempY - startY >= TOUCH_SLOP) {
          state = RELEASE_TO_REFRESH;
        } else if (tempY - startY <= 0) {
          state = DONE;
        }
      }
 
      if (state == DONE) {
        if (tempY - startY > 0) {
          state = PULL_TO_REFRESH;
        }
      }
      mark.change(state, tempY - startY);
    }
  }
 
  private void handleActionUp() {
    if (state == PULL_TO_REFRESH) {
      state = DONE;
      mark.changeByAnimation(state);
    } else if (state == RELEASE_TO_REFRESH) {
      state = REFRESHING;
      mark.changeByAnimation(state);
      onRefresh();
    }
    isRecored = false;
  }
 
  private void handleActionDown(MotionEvent event) {
    if (firstItemIndex == 0 && !isRecored) {
      isRecored = true;
      startY = (int) event.getY();
    }
  }
 
  private void onRefresh() {
    if (refreshListener != null) {
      refreshListener.onRefresh();
    }
  }
 
  public void startRefresh() {
    state = REFRESHING;
    mark.changeByAnimation(state);
    onRefresh();
  }
 
  public void stopRefresh() {
    state = DONE;
    mark.changeByAnimation(state);
  }
 
  public void setOnRefreshListener(OnRefreshListener refreshListener) {
    this.refreshListener = refreshListener;
    isRefreshable = true;
  }
 
  /**
   * 刷新监听器
   */
  public interface OnRefreshListener {
    public void onRefresh();
  }
 
  public void setOnScrollButtomListener(OnScrollButtomListener scrollButtomListener) {
    this.scrollButtomListener = scrollButtomListener;
  }
 
  /**
   * 滑动到最低端触发监听器
   */
  public interface OnScrollButtomListener {
    public void onScrollToButtom();
  }
 
}

刷新标志类：

 package cc.wxf.view.pull;
 
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
 
/**
 * Created by ccwxf on 2016/3/30.
 */
public class PullMark {
  //背景面板的半径、颜色
  private static final int RADIUS_PAN = 40;
  private static final int COLOR_PAN = Color.parseColor("#fafafa");
  //面板阴影的半径、颜色
  private static final int RADIUS_SHADOW = 5;
  private static final int COLOR_SHADOW = Color.parseColor("#d9d9d9");
  //面板中间的圆弧的半径、颜色、粗度、开始绘制角度
  private static final int RADIUS_ARROWS = 20;
  private static final int COLOR_ARROWS = Color.GREEN;
  private static final int BOUND_ARROWS = 6;
  private static final int START_ANGLE = 0;
  // 开始绘制角度的变化率、总体绘制角度、总体绘制透明度
  private static final int RATIO_SATRT_ANGLE = 3;
  private static final int ALL_ANGLE = 270;
  private static final int ALL_ALPHA = 255;
  // 动画的高度渐变比率、时间刷新间隔
  private static final float RATIO_TOUCH_SLOP = 7f;
  private static final long RATIO_ANIMATION_DURATION = 10;
 
  private PullToRefreshListView listView;
  // 中点的X、Y坐标、初始隐藏时的Y坐标
  private float doneCenterY = -(RADIUS_PAN + RADIUS_SHADOW) / 2;
  private float centerX;
  private float centerY = doneCenterY;
  // 开始绘制的角度、需要绘制的角度、透明度
  private int startAngle = START_ANGLE;
  private int sweepAngle = startAngle;
  private int alpha;
  // 弧度变化比率，根据总体高度与总体弧度角度的比例决定
  private float radioAngle = ALL_ANGLE * 1.0f / PullToRefreshListView.TOUCH_SLOP;
  // 透明度变化比率，根据总体高度与总体透明度的比例决定
  private float radioAlpha = ALL_ALPHA * 1.0f / PullToRefreshListView.TOUCH_SLOP;
  // PullToRefreshListView的状态
  private int state;
  // 当前手指滑动的距离
  private float mTouchLength;
  // 是否启动旋转动画
  private boolean isRotateAnimation = false;
  // 画笔
  private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  private Handler handler = new Handler();
 
  public PullMark(PullToRefreshListView listView) {
    this.listView = listView;
  }
 
  /**
   * 设置绘制的中点X坐标，在PullToRefreshListView的onMeasure中实现
   * @param centerX
   */
  public void setCenterX(int centerX){
    this.centerX = centerX;
  }
 
  /**
   * 表示一次普通的数据变化，在onTouchEvent中的ACTION_MOVE中触发
   * @param state
   * @param mTouchLength
   */
  public void change(int state, float mTouchLength){
    this.state = state;
    this.mTouchLength = mTouchLength;
    // 改变绘制的Y坐标
    centerY = doneCenterY + mTouchLength;
    // 改变绘制的透明度
    alpha = (int) (mTouchLength * radioAlpha);
    if(alpha > ALL_ALPHA){
      alpha = ALL_ALPHA;
    }else if(alpha < 0){
      alpha = 0;
    }
    //改变绘制的起始角度
    startAngle = startAngle + RATIO_SATRT_ANGLE;
    if(startAngle >= 360){
      startAngle = 0;
    }
    //改变绘制的弧度角度
    sweepAngle = (int) (mTouchLength * radioAngle);
    if(sweepAngle > ALL_ANGLE){
      sweepAngle = ALL_ANGLE;
    }else if(sweepAngle < 0){
      sweepAngle = 0;
    }
    listView.invalidate();
  }
 
  /**
   * 表示一次动画的变化，在onTouchEvent的ACTION_UP中或者手动startRefresh以及手动stopRefresh中触发
   * @param state
   */
  public void changeByAnimation(final int state){
    this.state = state;
    if(state == PullToRefreshListView.DONE){
      //结束旋转动画（关闭正在刷新的效果）
      isRotateAnimation = false;
    }
    //慢慢变化到起始位置
    handler.postDelayed(new RunnableMove(state), RATIO_ANIMATION_DURATION);
  }
 
  /**
   * 启动移动的处理
   */
  public class RunnableMove implements Runnable{
 
    private int state;
    private int destination;
    private float slop;
 
    public RunnableMove(int state) {
      this.state = state;
      if(state == PullToRefreshListView.DONE){
        destination = 0;
        slop = RATIO_TOUCH_SLOP;
      }else if(state == PullToRefreshListView.REFRESHING){
        destination = PullToRefreshListView.TOUCH_SLOP;
        slop = RATIO_TOUCH_SLOP * 5;
      }
    }
 
    @Override
    public void run() {
      if(mTouchLength > destination){
        mTouchLength -= slop;
        change(state, mTouchLength);
        handler.postDelayed(this, RATIO_ANIMATION_DURATION);
      }else{
        if(state == PullToRefreshListView.DONE){
          // 直接将坐标初始化，否则会有一点点误差
          centerY = doneCenterY;
          listView.invalidate();
        }else if(state == PullToRefreshListView.REFRESHING){
          //启动旋转的动画效果
          isRotateAnimation = true;
          handler.postDelayed(new RunnableRotate(), RATIO_ANIMATION_DURATION);
        }
      }
    }
  }
 
  /**
   * 旋转动画的处理
   */
  public class RunnableRotate implements Runnable{
 
    @Override
    public void run() {
      if(isRotateAnimation){
        //启动动画旋转效果
        startAngle = startAngle + RATIO_SATRT_ANGLE;
        if(startAngle >= 360){
          startAngle = 0;
        }
        listView.invalidate();
        handler.postDelayed(this, RATIO_ANIMATION_DURATION);
      }else{
        //回到初始位置
        handler.postDelayed(new RunnableMove(state), RATIO_ANIMATION_DURATION);
      }
    }
  }
 
  /**
   * 绘制刷新图标的标志
   * @param mCanvas
   */
  public void onDraw(Canvas mCanvas){
    //绘制背景圆盘和阴影
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(COLOR_PAN);
    mPaint.setShadowLayer(RADIUS_SHADOW, 0, 0, COLOR_SHADOW);
    mCanvas.drawCircle(centerX, centerY, RADIUS_PAN, mPaint);
    //绘制圆弧
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(COLOR_ARROWS);
    mPaint.setStrokeWidth(BOUND_ARROWS);
    mPaint.setAlpha(alpha);
    mCanvas.drawArc(new RectF(centerX - RADIUS_ARROWS, centerY - RADIUS_ARROWS, centerX + RADIUS_ARROWS, centerY + RADIUS_ARROWS),
        startAngle, sweepAngle, false, mPaint);
  }
}

使用的时候，必须要设置了监听器才能有效的滑动：

final PullToRefreshListView listView = (PullToRefreshListView) findViewById(R.id.listView);
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new String[]{
      "测试1","测试2","测试3","测试4","测试5","测试6",
    });
    listView.setAdapter(adapter);
    listView.setOnRefreshListener(new PullToRefreshListView.OnRefreshListener() {
      @Override
      public void onRefresh() {
        new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {
            listView.stopRefresh();
          }
        }, 2000);
      }
    });

两个源代码文件就搞定了，demo工程就不提供了，很简单的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

Android自定义ListView实现下拉刷新

相关阅读

相关文章

相关问答

相关工具

相关文档