Android仿美团订单悬浮view

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kuangxiaoguo0123/article/details/69063405

前言

又是清明雨上,折菊寄到你身旁,把你最爱的歌来轻轻唱。

简介

今天订餐无意中看到美团外卖有个显示订单进度的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下载。

源码下载

https://github.com/kuangxiaoguo0123/FloatingOrderView

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页