Android自定义渐变式炫酷ListView下拉刷新动画

首页 > 软件编程 > Android 更新日期: 2017-09-08
这篇文章主要为大家详细介绍了Android自定义渐变式炫酷ListView下拉刷新动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了自定义渐变式炫酷动画的ListView下拉刷新,供大家参考,具体内容如下

主要要点

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);
 }


}

github代码:

项目代码下载(https://github.com/molu0007/IBU_ListView)

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • Android中ListView下拉刷新的实现方法实例分析
    Android中ListView下拉刷新的实现方法实例分析
    这篇文章主要介绍了Android中ListView下拉刷新的实现方法,涉及Android操作ListView的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了Android中ListView下拉刷新的实现方法.分享给大家供大家参考,具体如下: ListView中的下拉刷新是非常常见的,也是经常使用的,看到有很多同学想要,那我就整理一下,供大 ...
  • Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新
    Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新
    这篇文章主要介绍了Android使用RecyclerView实现自定义列表.点击事件以及下拉刷新的相关资料,需要的朋友可以参考下Android使用RecyclerView 1. 什么是RecyclerView RecyclerView 是 Android-support-v7-21 版本中新增的一个 Widgets,官方对于它的介绍则是:RecyclerVi ...
  • 安卓(android)怎么实现下拉刷新
    安卓(android)怎么实现下拉刷新
    这里我们将采取的方案是使用组合View的方式,先自定义一个布局继承自LinearLayout,然后在这个布局中加入下拉头和ListView这两个子元素,并让这两个子元素纵向排列.对安卓android怎么实现下拉刷新的相关知识感兴趣的朋友一起学习吧这里我们将采取的方案是使用组合View的方式,先自定义一个布局继承自LinearLayout,然后在这个布局中加入 ...
  • Android下拉刷新ListView——RTPullListView(demo)
    Android下拉刷新ListView——RTPullListView(demo)
    下拉刷新已经形成一种默认的用户习惯,今天主要介绍下在Android上实现下拉刷新的Demo,感兴趣的朋友可以参考下哈,希望可以帮助到你下拉刷新在越来越多的App中使用,已经形成一种默认的用户习惯,遇到列表显示的内容时,用户已经开始习惯性的拉拉.在交互习惯上已经形成定性.之前在我的文章<IOS学习笔记34-EGOTableViewPullRefresh实 ...
  • Android中使用RecyclerView实现下拉刷新和上拉加载
    Android中使用RecyclerView实现下拉刷新和上拉加载
    RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好.这篇文章主要介绍了Android中使用RecyclerView实现下拉刷新和上拉加载的相关资料,需要的朋友可以参考下推荐阅读:使用RecyclerView添加Header和Footer的方法               ...
  • iOS实现顶部标签式导航栏及下拉分类菜单
    iOS实现顶部标签式导航栏及下拉分类菜单
    这篇文章主要为大家详细介绍了iOS实现顶部标签式导航栏及下拉分类菜单的相关资料,感兴趣的小伙伴们可以参考一下本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下 当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录 ...
猜你喜欢