Android自定义控件之仿京东商城下拉刷新

jopen 8年前


前面写了4篇自定义控件的博客，并且开通了一个专栏，把4篇文章添加到专栏中了，耐心等待博客专栏的徽章出现，奈何等了几周后还是没有出现，后来发现至少需要5篇文章才能出现专栏徽章，于是有了这篇仿我大京东快递小哥的下拉刷新。

直接上图先！

Android自定义控件之仿京东商城下拉刷新

分析

这个下拉刷新效果分为两个部分：

step1：快递小哥和快递包裹的缩放效果，看上去就像是快递小哥跑过来一手拿过快递的样子

step2：快递小哥拿到包裹后，开启暴走模式！玩命送快递

PS：不得不赞一下京东的快递，真的很快！

step1

好了马屁拍完了，我们先来看一看第一部分的效果是怎么实现的。首先快递小哥和包裹是两张图片

Android自定义控件之仿京东商城下拉刷新 Android自定义控件之仿京东商城下拉刷新

我们看到快递小哥是从小变大的，快递包裹也是从小变大的，所以我们要自定义一个控件，就起名为FirstStepView.java吧 

public class FirstSetpView extends View{    private Bitmap goods;    private Bitmap people;    private Bitmap peopleWithGoods;    private int measuredWidth;    private int measuredHeight;    private float mCurrentProgress;    private int mCurrentAlpha;    private Paint mPaint;    private Bitmap scaledPeople;    private Bitmap scaledGoods;    public FirstSetpView(Context context, AttributeSet attrs, int defStyle) {      super(context, attrs, defStyle);      init();    }    public FirstSetpView(Context context, AttributeSet attrs) {      super(context, attrs);      init();    }    public FirstSetpView(Context context) {      super(context);      init();    }    private void init(){      //包裹bitmap      goods = BitmapFactory.decodeResource(getResources(), R.mipmap.app_refresh_goods_0);      //快递小哥bitmap      people = BitmapFactory.decodeResource(getResources(), R.mipmap.app_refresh_people_0);      //这是后面动画中的最后一张图片，拿这张图片的作用是用它的宽高来测量      //我们这个自定义View的宽高      peopleWithGoods = BitmapFactory.decodeResource(getResources(), R.mipmap.app_refresh_people_3);      //来个画笔，我们注意到快递小哥和包裹都有一个渐变效果的，我们用      //mPaint.setAlpha来实现这个渐变的效果      mPaint = new Paint();      //首先设置为完全透明      mPaint.setAlpha(0);    }    /**     * 测量方法     * @param widthMeasureSpec     * @param heightMeasureSpec     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {      setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));    }    //测量宽度    private int measureWidth(int widthMeasureSpec){      int result = 0;      int size = MeasureSpec.getSize(widthMeasureSpec);      int mode = MeasureSpec.getMode(widthMeasureSpec);      if (MeasureSpec.EXACTLY == mode) {        result = size;      }else {        result = peopleWithGoods.getWidth();        if (MeasureSpec.AT_MOST == mode) {          result = Math.min(result, size);        }      }      return result;    }    //测量高度    private int measureHeight(int heightMeasureSpec){      int result = 0;      int size = MeasureSpec.getSize(heightMeasureSpec);      int mode = MeasureSpec.getMode(heightMeasureSpec);      if (MeasureSpec.EXACTLY == mode) {        result = size;      }else {        result = peopleWithGoods.getHeight();        if (MeasureSpec.AT_MOST == mode) {          result = Math.min(result, size);        }      }      return result;    }    //在这里面拿到测量后的宽和高，w就是测量后的宽，h是测量后的高    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {      super.onSizeChanged(w, h, oldw, oldh);      measuredWidth = w;      measuredHeight = h;      //根据测量后的宽高来对快递小哥做一个缩放      scaledPeople = Bitmap.createScaledBitmap(people,measuredWidth,measuredHeight,true);      //根据测量后的宽高来对快递包裹做一个缩放      scaledGoods = Bitmap.createScaledBitmap(goods, scaledPeople.getWidth()*10/27, scaledPeople.getHeight()/5, true);    }    /**     * 绘制方法     * @param canvas     */    @Override    protected void onDraw(Canvas canvas) {      super.onDraw(canvas);      //由于包裹和快递小哥要分别来画，所以使用save和restore方法      //save      //画包裹      //restore      //save      //画小哥      //restore      canvas.save();      canvas.scale(mCurrentProgress, mCurrentProgress ,  measuredWidth-scaledGoods.getWidth()/2 , measuredHeight/2);      mPaint.setAlpha(mCurrentAlpha);      canvas.drawBitmap(scaledGoods, measuredWidth-scaledGoods.getWidth(), measuredHeight/2-scaledGoods.getHeight()/2, mPaint);      canvas.restore();      canvas.save();      canvas.scale(mCurrentProgress, mCurrentProgress , 0 , measuredHeight/2);      mPaint.setAlpha(mCurrentAlpha);      canvas.drawBitmap(scaledPeople, 0,0,mPaint);      canvas.restore();    }    /**     * 根据进度来对小哥和包裹进行缩放     * @param currentProgress     */    public void setCurrentProgress(float currentProgress){      this.mCurrentProgress = currentProgress;      this.mCurrentAlpha = (int) (currentProgress*255);    }  }

还是老方法，我们写完这个效果，就先来测试一下吧，还是用一个SeekBar来模拟一个进度值 
public class MainActivity extends Activity {    private SeekBar sb;    private FirstSetpView mFirstStepView;    @Override    protected void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.activity_main);      sb = (SeekBar) findViewById(R.id.seekbar);      mFirstStepView = (FirstSetpView) findViewById(R.id.firstview);      sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {        @Override        public void onStopTrackingTouch(SeekBar seekBar) {        }        @Override        public void onStartTrackingTouch(SeekBar seekBar) {        }        @Override        public void onProgressChanged(SeekBar seekBar, int progress,            boolean fromUser) {          float currentProgress = (float)seekBar.getProgress()/(float)seekBar.getMax();          mFirstStepView.setCurrentProgress(currentProgress);          mFirstStepView.invalidate();        }      });    }  }

Android自定义控件之仿京东商城下拉刷新 

secondStepView = (SecondStepView) headerView.findViewById(R.id.second_step_view);          secondStepView.setBackgroundResource(R.drawable.second_step_animation);          secondAnimation = (AnimationDrawable) secondStepView.getBackground();

secondAnimation是一个AnimationDrawable对象，我们可以调用他的start方法开始帧动画，调用stop结束帧动画 

secondAnimation.start(); secondAnimation.stop();

下拉刷新的实现

这一部分我在 Android自定义控件之仿美团下拉刷新 中已经详细分析过了，所以这里就不再赘述了。

完整代码

欢迎大家上我的 GitHub 上下载源码