前言

又是清明雨上，折菊寄到你身旁，把你最愛的歌來輕輕唱。

簡介

今天訂餐無意中看到美團外賣有個顯示訂單進度的view，效果還不錯，便隨手寫了下。

效果圖

實現

這裡我們是繼承LinearLayout來實現的。

一 重寫onMeasure()

定義父view的寬高與子view的寬高相同。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int
 
 viewWidth = mView.getMeasuredWidth();
        int viewHeight = mView.getMeasuredHeight();
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if
 
 (widthMode == MeasureSpec.AT_MOST) {
            widthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, viewWidth,
                    getResources().getDisplayMetrics());
        }
        if (heightMode == MeasureSpec.AT_MOST) {
            heightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, viewHeight,
                    getResources().getDisplayMetrics());
        }
        setMeasuredDimension(widthSize, heightSize);
    }
 

二 獲取父view的寬高

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        mWidth = getWidth();
        mHeight = getHeight();
    }

三 位移動畫

    /**
     * view位移動畫
     */
    private void initTranslateAnimation() {
        int closeDistance = mWidth - mIconImageView.getWidth() - mView.getPaddingLeft() * 2;
        mTranslateAnimator = ValueAnimator.ofInt(0, closeDistance);
        /*
        當一開始為關閉狀態時，給動畫設定evaluator，使得動畫開始位置為closeDistance
         */
        if (mViewState == ViewStateEnum.CLOSE) {
            mTranslateAnimator.setEvaluator(new TypeEvaluator<Integer>() {
                @Override
                public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
                    return (int) (endValue - fraction * (endValue - startValue));
                }
            });
        }
        mTranslateAnimator.setDuration(ANIMATION_TIME);
        mTranslateAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        mTranslateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                /*
                相對於父view的位置座標
                 */
                mView.layout(value, 0, mWidth, mHeight);
            }
        });
    }

四 縮放動畫

這裡點選時x號是有個縮放動畫的，可能gif圖不是太明顯。

    /**
     * 點選x號縮放動畫
     */
    private void initScaleAnimation() {
        mScaleAnimator = ValueAnimator.ofFloat(1.0f, 0.0f);
        mScaleAnimator.setDuration(SCALE_ANIMATION_TIME);
        if (mViewState == ViewStateEnum.CLOSE) {
            mScaleAnimator.setEvaluator(new TypeEvaluator<Float>() {
                @Override
                public Float evaluate(float fraction, Float startValue, Float endValue) {
                    return endValue - fraction * (endValue - startValue);
                }
            });
        }
        mScaleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mCloseImageView.setScaleX(value);
                mCloseImageView.setScaleY(value);
            }
        });
    }

五 開始動畫

    /**
     * 使用AnimatorSet讓兩個動畫同時播放
     */
    private void doAnimation() {
        initTranslateAnimation();
        initScaleAnimation();
        AnimatorSet set = new AnimatorSet();
        set.play(mTranslateAnimator).with(mScaleAnimator);
        set.start();
    }

總結

本篇博文主要知識點還是動畫，包括對ValueAnimator的基本使用，還有自定義Evaluator，希望大家通過本篇博文能夠有所收穫。另外我們也只是大概寫了下實現的一些主要程式碼，所以有需要原始碼的童鞋可以去github下載。

原始碼下載