Android开发中利用ListView实现一个渐变式的下拉刷新动画

本篇文章给大家分享的是有关Android开发中利用ListView实现一个渐变式的下拉刷新动画，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于网站设计制作、做网站、奉贤网络推广、微信小程序定制开发、奉贤网络营销、奉贤企业策划、奉贤品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供奉贤建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

主要要点

listview刷新过程中主要有三个步骤当前：状态为下拉刷新，当前状态为下拉刷新，当前状态为放开刷新，当前状态为正在刷新；主要思路为三个步骤分别对应三个自定义的view；即ibuRefreshFirstStepView，ibuRefreshSecondStepView，ibuRefreshThirdStepView。

效果图

Android开发中利用ListView实现一个渐变式的下拉刷新动画

ibuRefreshFirstStepView代码，例如：

 private Bitmap initialBitmap;
 private float mCurrentProgress;
 private Bitmap scaledBitmap;

 public ibuRefreshFirstStepView(Context context, AttributeSet attrs,
         int defStyle) {
  super(context, attrs, defStyle);
  init(context);
 }

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

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

 private void init(Context context) {
  //这个就是那个火箭图片
  initialBitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.img_huojian1));

 }

 /**
  * 重写onMeasure方法主要是设置wrap_content时 View的大小
  * @param widthMeasureSpec
  * @param heightMeasureSpec
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  //根据设置的宽度来计算高度 设置为符合第二阶段娃娃图片的宽高比例
  setMeasuredDimension(measureWidth(widthMeasureSpec),measureWidth(widthMeasureSpec)*initialBitmap.getHeight()/initialBitmap.getWidth());
 }

 /**
  * 当wrap_content的时候，宽度即为第二阶段娃娃图片的宽度
  * @param widMeasureSpec
  * @return
  */
 private int measureWidth(int widMeasureSpec){
  int result = 0;
  int size = MeasureSpec.getSize(widMeasureSpec);
  int mode = MeasureSpec.getMode(widMeasureSpec);
  if (mode == MeasureSpec.EXACTLY){
   result = size;
  }else{
   result = initialBitmap.getWidth();
   if (mode == MeasureSpec.AT_MOST){
    result = Math.min(result,size);
   }
  }
  return result;
  }

 /**
  * 在onLayout里面获得测量后View的宽高
  * @param changed
  * @param left
  * @param top
  * @param right
  * @param bottom
  */
 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
   int bottom) {
  super.onLayout(changed, left, top, right, bottom);

  // 给火箭图片进行等比例的缩放
  scaledBitmap = Bitmap.createScaledBitmap(initialBitmap,89,110, false);
 }


 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //这个方法是对画布进行缩放，从而达到椭圆形图片的缩放，第一个参数为宽度缩放比例，第二个参数为高度缩放比例，
//  canvas.scale(mCurrentProgress, mCurrentProgress, measuredWidth/2, measuredHeight/2);
  //将等比例缩放后的椭圆形画在画布上面
  canvas.drawBitmap(scaledBitmap,90,dip2px(getContext(),80*mCurrentProgress),null);

 }
 /**
  * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
  */
 public static int dip2px(Context context, float dpValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }
 /**
  * 设置缩放比例，从0到1 0为最小 1为最大
  * @param currentProgress
  */
 public void setCurrentProgress(float currentProgress){
  mCurrentProgress = currentProgress;
 }


}

ibuRefreshSecondStepView代码，例如：

 private Bitmap endBitmap,scaledBitmap;

 public ibuRefreshSecondStepView(Context context, AttributeSet attrs,
         int defStyle) {
  super(context, attrs, defStyle);
  init();
 }

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

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

 private void init() {
  endBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.img_huojian2), 89, 110, false);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(measureWidth(widthMeasureSpec), measureWidth(widthMeasureSpec) * endBitmap.getHeight() / endBitmap.getWidth());
 }
 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
       int bottom) {
  super.onLayout(changed, left, top, right, bottom);
  scaledBitmap = Bitmap.createScaledBitmap(endBitmap, 89, 110, false);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.drawBitmap(endBitmap, 90, dip2px(getContext(), 80 * 1), null);

 }
 /**
  * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
  */
 public static int dip2px(Context context, float dpValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }
 private int measureWidth(int widthMeasureSpec){
  int result = 0;
  int size = MeasureSpec.getSize(widthMeasureSpec);
  int mode = MeasureSpec.getMode(widthMeasureSpec);
  if (mode == MeasureSpec.EXACTLY) {
   result = size;
  }else {
   result = endBitmap.getWidth();
   if (mode == MeasureSpec.AT_MOST) {
    result = Math.min(result, size);
   }
  }
  return result;
 }
}

ibuRefreshThirdStepView代码，例如：

 private Bitmap endBitmap,scaledBitmap;

 public ibuRefreshThirdStepView(Context context, AttributeSet attrs,
         int defStyle) {
  super(context, attrs, defStyle);
  init();
 }

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

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

 private void init() {
  endBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.img_huojian3), 89, 170, false);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.drawBitmap(endBitmap, 90, dip2px(getContext(), 40 * 1), null);
 }
 /**
  * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
  */
 public static int dip2px(Context context, float dpValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(measureWidth(widthMeasureSpec), measureWidth(widthMeasureSpec)*endBitmap.getHeight()/endBitmap.getWidth());
 }

 private int measureWidth(int widthMeasureSpec){
  int result = 0;
  int size = MeasureSpec.getSize(widthMeasureSpec);
  int mode = MeasureSpec.getMode(widthMeasureSpec);
  if (mode == MeasureSpec.EXACTLY) {
   result = size;
  }else {
   result = endBitmap.getWidth();
   if (mode == MeasureSpec.AT_MOST) {
    result = Math.min(result, size);
   }
  }
  return result;
 }

代码块

IbuListView 代码，例如：

 private static final int DONE = 0;
 private static final int PULL_TO_REFRESH = 1;
 private static final int RELEASE_TO_REFRESH = 2;
 private static final int REFRESHING = 3;
 private static final int RATIO = 3;
 private RelativeLayout headerView;
 private int headerViewHeight;
 private float startY;
 private float offsetY;
 private TextView tv_pull_to_refresh;
 private OnMeiTuanRefreshListener mOnRefreshListener;
 private int state;
 private int mFirstVisibleItem;
 private boolean isRecord;
 private boolean isEnd;
 private boolean isRefreable;
 private FrameLayout mAnimContainer;
// private Animation animation;
 private SimpleDateFormat format;
 private ibuRefreshFirstStepView mFirstView;
 private ibuRefreshSecondStepView mSecondView;
 private AnimationDrawable secondAnim;
 private ibuRefreshThirdStepView mThirdView;
 private AnimationDrawable thirdAnim;

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

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

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

 public interface OnMeiTuanRefreshListener{
  void onRefresh();
 }

 /**
  * 回调接口，想实现下拉刷新的listview实现此接口
  * @param onRefreshListener
  */
 public void setOnMeiTuanRefreshListener(OnMeiTuanRefreshListener onRefreshListener){
  mOnRefreshListener = onRefreshListener;
  isRefreable = true;
 }

 /**
  * 刷新完毕，从主线程发送过来，并且改变headerView的状态和文字动画信息
  */
 public void setOnRefreshComplete(){
  //一定要将isEnd设置为true，以便于下次的下拉刷新
  isEnd = true;
  state = DONE;

  changeHeaderByState(state);
 }

 private ImageView imageViewBack,imageView_B;
 private void init(Context context) {
  setOverScrollMode(View.OVER_SCROLL_NEVER);
  setOnScrollListener(this);

  headerView = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.ibu_item, null, false);
  imageViewBack= (ImageView) headerView.findViewById(R.id.icon_back);
  imageView_B= (ImageView) headerView.findViewById(R.id.image_b);
  mFirstView = (ibuRefreshFirstStepView) headerView.findViewById(R.id.first_view);
  tv_pull_to_refresh = (TextView) headerView.findViewById(R.id.tv_pull_to_refresh);
  mSecondView = (ibuRefreshSecondStepView) headerView.findViewById(R.id.second_view);

  mThirdView = (ibuRefreshThirdStepView) headerView.findViewById(R.id.third_view);


  measureView(headerView);
  addHeaderView(headerView);
  headerViewHeight = headerView.getMeasuredHeight();
  headerView.setPadding(0, -headerViewHeight, 0, 0);
  Log.i("zhangqi","headerViewHeight="+headerViewHeight);

  state = DONE;
  isEnd = true;
  isRefreable = false;
 }




 @Override
 public void onScrollStateChanged(AbsListView absListView, int i) {
 }
 @Override
 public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
  mFirstVisibleItem = firstVisibleItem;
 }

 @Override
 public boolean onTouchEvent(MotionEvent ev) {
  if (isEnd) {//如果现在时结束的状态，即刷新完毕了，可以再次刷新了，在onRefreshComplete中设置
   if (isRefreable) {//如果现在是可刷新状态 在setOnMeiTuanListener中设置为true
    switch (ev.getAction()){
     //用户按下
    case MotionEvent.ACTION_DOWN:
     //如果当前是在listview顶部并且没有记录y坐标
     if (mFirstVisibleItem == 0 && !isRecord) {
      //将isRecord置为true，说明现在已记录y坐标
      isRecord = true;
      //将当前y坐标赋值给startY起始y坐标
      startY = ev.getY();
     }
     imageView_B.setVisibility(VISIBLE);
     break;
    //用户滑动
    case MotionEvent.ACTION_MOVE:
     //再次得到y坐标，用来和startY相减来计算offsetY位移值
     float tempY = ev.getY();
     //再起判断一下是否为listview顶部并且没有记录y坐标
     if (mFirstVisibleItem == 0 && !isRecord) {
      isRecord = true;
      startY = tempY;
     }
     //如果当前状态不是正在刷新的状态，并且已经记录了y坐标
     if (state!=REFRESHING && isRecord ) {
      //计算y的偏移量
      offsetY = tempY - startY;
      //计算当前滑动的高度
      float currentHeight = (-headerViewHeight+offsetY/3);
      //用当前滑动的高度和头部headerView的总高度进行比 计算出当前滑动的百分比 0到1
      float currentProgress = 1+currentHeight/headerViewHeight;
      //如果当前百分比大于1了，将其设置为1，目的是让第一个状态的椭圆不再继续变大
      if (currentProgress>=1) {
       currentProgress = 1;
      }
      //如果当前的状态是放开刷新，并且已经记录y坐标
      if (state == RELEASE_TO_REFRESH && isRecord) {
       setSelection(0);
       //如果当前滑动的距离小于headerView的总高度
       if (-headerViewHeight+offsetY/RATIO<0) {
        //将状态置为下拉刷新状态
        state = PULL_TO_REFRESH;
        //根据状态改变headerView，主要是更新动画和文字等信息
        changeHeaderByState(state);
        //如果当前y的位移值小于0，即为headerView隐藏了
       }else if (offsetY<=0) {
        //将状态变为done
        state = DONE;
        //根据状态改变headerView，主要是更新动画和文字等信息
        changeHeaderByState(state);
       }
      }
      //如果当前状态为下拉刷新并且已经记录y坐标
      if (state == PULL_TO_REFRESH && isRecord) {
       setSelection(0);
       //如果下拉距离大于等于headerView的总高度
       if (-headerViewHeight+offsetY/RATIO>=0) {
        //将状态变为放开刷新
        state = RELEASE_TO_REFRESH;
        //根据状态改变headerView，主要是更新动画和文字等信息
        changeHeaderByState(state);
        //如果当前y的位移值小于0，即为headerView隐藏了
       }else if (offsetY<=0) {
        //将状态变为done
        state = DONE;
        //根据状态改变headerView，主要是更新动画和文字等信息
        changeHeaderByState(state);
       }
      }
      //如果当前状态为done并且已经记录y坐标
      if (state == DONE && isRecord) {
       //如果位移值大于0
       if (offsetY>=0) {
        //将状态改为下拉刷新状态
        state = PULL_TO_REFRESH;
       }
      }
      //如果为下拉刷新状态
      if (state == PULL_TO_REFRESH) {
       //则改变headerView的padding来实现下拉的效果
       headerView.setPadding(0,(int)(-headerViewHeight+offsetY/RATIO) ,0,0);
       //给第一个状态的View设置当前进度值
       mFirstView.setCurrentProgress(currentProgress);
       //重画
       mFirstView.postInvalidate();
      }
      //如果为放开刷新状态
      if (state == RELEASE_TO_REFRESH) {
       //改变headerView的padding值
       headerView.setPadding(0,(int)(-headerViewHeight+offsetY/RATIO) ,0, 0);
       //给第一个状态的View设置当前进度值
       mFirstView.setCurrentProgress(currentProgress);
       //重画
       mFirstView.postInvalidate();
      }
     }
     break;
    //当用户手指抬起时
    case MotionEvent.ACTION_UP:
     //如果当前状态为下拉刷新状态
     if (state == PULL_TO_REFRESH) {
      //平滑的隐藏headerView
      this.smoothScrollBy((int)(-headerViewHeight+offsetY/RATIO)+headerViewHeight, 500);
      //根据状态改变headerView
      changeHeaderByState(state);
     }
     //如果当前状态为放开刷新
     if (state == RELEASE_TO_REFRESH) {
      //平滑的滑到正好显示headerView
      this.smoothScrollBy((int)(-headerViewHeight+offsetY/RATIO), 500);
      //将当前状态设置为正在刷新
      state = REFRESHING;
      //回调接口的onRefresh方法
      mOnRefreshListener.onRefresh();
      //根据状态改变headerView
      changeHeaderByState(state);
     }
     //这一套手势执行完，一定别忘了将记录y坐标的isRecord改为false，以便于下一次手势的执行
     isRecord = false;
     break;
    }

   }
  }
  return super.onTouchEvent(ev);
 }

 private Animation animation;
 /**
  * 根据状态改变headerView的动画和文字显示
  * @param state
  */
 private void changeHeaderByState(int state){
  switch (state) {
  case DONE://如果的隐藏的状态
   //设置headerView的padding为隐藏
   headerView.setPadding(0, -headerViewHeight, 0, 0);
   //第一状态的view显示出来
   mFirstView.setVisibility(View.VISIBLE);


   imageView_B.setVisibility(VISIBLE);
   tv_pull_to_refresh.setText("下拉刷新");
   //第二状态的view隐藏起来
   mSecondView.setVisibility(View.GONE);
   //停止第二状态的动画
   secondAnim.stop();
   //第三状态的view隐藏起来
   mThirdView.setVisibility(View.GONE);
   //停止第三状态的动画
   thirdAnim.stop();
   break;
  case RELEASE_TO_REFRESH://当前状态为放开刷新
   //文字显示为放开刷新
   tv_pull_to_refresh.setText("放开刷新");
   //第一状态view隐藏起来
   mFirstView.setVisibility(View.GONE);
   //第二状态view显示出来
   mSecondView.setVisibility(View.VISIBLE);
   //播放第二状态的动画
  secondAnim.start();
   //第三状态view隐藏起来
   mThirdView.setVisibility(View.GONE);
   //停止第三状态的动画
  thirdAnim.stop();
   break;
  case PULL_TO_REFRESH://当前状态为下拉刷新
   imageView_B.setVisibility(VISIBLE);
   //设置文字为下拉刷新
   tv_pull_to_refresh.setText("下拉刷新");
   //第一状态view显示出来
   mFirstView.setVisibility(View.VISIBLE);
   //第二状态view隐藏起来
   mSecondView.setVisibility(View.GONE);
   //第二状态动画停止
   secondAnim.stop();
   //第三状态view隐藏起来
   mThirdView.setVisibility(View.GONE);
   //第三状态动画停止
   thirdAnim.stop();
   break;
  case REFRESHING://当前状态为正在刷新
   //文字设置为正在刷新
   tv_pull_to_refresh.setText("正在刷新");
   //第一状态view隐藏起来
   mFirstView.setVisibility(View.GONE);
   //第三状态view显示出来
   mThirdView.setVisibility(View.VISIBLE);
   //第二状态view隐藏起来
   mSecondView.setVisibility(View.GONE);
   //停止第二状态动画
   secondAnim.stop();
   //启动第三状态view
   thirdAnim.start();
   imageView_B.setVisibility(GONE);
    animation = new TranslateAnimation(0, 0, 0, 600);
   animation.setDuration(3000);
   imageViewBack.setAnimation(animation);
   break;
  default:
   break;
  }
 }


 private void measureView(View child) {
  ViewGroup.LayoutParams p = child.getLayoutParams();
  if (p == null) {
   p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
     ViewGroup.LayoutParams.WRAP_CONTENT);
  }
  int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);
  int lpHeight = p.height;
  int childHeightSpec;
  if (lpHeight > 0) {
   childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
     MeasureSpec.EXACTLY);
  } else {
   childHeightSpec = MeasureSpec.makeMeasureSpec(0,
     MeasureSpec.UNSPECIFIED);
  }
  child.measure(childWidthSpec, childHeightSpec);
 }


}

以上就是Android开发中利用ListView实现一个渐变式的下拉刷新动画，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

本文标题：Android开发中利用ListView实现一个渐变式的下拉刷新动画
文章出自：http://cqcxhl.com/article/ppppdi.html

重庆分公司，新征程启航

Android开发中利用ListView实现一个渐变式的下拉刷新动画

其他资讯