自定义控件之58同城加载

最新推荐文章于 2021-06-07 22:39:54 发布

置顶陈梦佳@1990

最新推荐文章于 2021-06-07 22:39:54 发布

阅读量292

点赞数 1

文章标签：自定义控件 58加载

本文链接：https://blog.csdn.net/qq_34015596/article/details/85049765

版权

分析：这是一个组合控件加上属性动画来实现，布局是一个线性布局，一个变化的控件ShapeView，圆形，正方形，三角形不断变换，底部还有一个阴影，先下落动画和缩放，接着上抛和缩放动画并旋转，通过动画监听来控制旋转动画。效果如下图所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:gravity="center"
    android:layout_height="match_parent">

    <com.cmj.myview.view.ShapeView
        android:id="@+id/shape_view"
        android:layout_width="25dp"
        android:layout_marginBottom="82dp"
        android:layout_height="25dp" />

    <View
        android:id="@+id/shadow_view"
        android:background="@drawable/loading_shadow_bg"
        android:layout_width="25dp"
        android:layout_height="3dp"/>

    <TextView
        android:layout_marginTop="5dp"
        android:layout_width="wrap_content"
        android:text="玩命记载中..."
        android:layout_height="wrap_content" />

</LinearLayout>

阴影布局

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#000000"/>
</shape>

/**
 * @author cmjsp1990@163.com
 * @date 2018/12/17
 * 先下落动画，同时缩放，接着上抛动画，同时旋转
 */

public class ShapeView extends View {
    private Shape mCurrentShape = Shape.Circle;
    private Paint mPaint;
    private Path mPath;

    public ShapeView(Context context) {
        this(context, null);
    }

    public ShapeView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ShapeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //只保证正方形
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(Math.min(width, height), Math.min(width, height));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (mCurrentShape) {
            case Circle:
                //画圆形
                int center = getWidth() / 2;
                mPaint.setColor(ContextCompat.getColor(getContext(), R.color.circle));
                canvas.drawCircle(center,center,center,mPaint);
                break;
            case Square:
                //画正方形
                mPaint.setColor(ContextCompat.getColor(getContext(),R.color.rect));
                canvas.drawRect(0,0,getWidth(),getHeight(),mPaint);
                break;
            case Triangle:
                //三角
                mPaint.setColor(ContextCompat.getColor(getContext(),R.color.triangle));
                if (mPath==null){
                    mPath = new Path();
                    mPath.moveTo(getWidth() / 2, 0);
                    mPath.lineTo(0, (float) ((getWidth()/2)*Math.sqrt(3)));
                    mPath.lineTo(getWidth(), (float) ((getWidth()/2)*Math.sqrt(3)));
                    // path.lineTo(getWidth()/2,0);
                    mPath.close();// 把路径闭合
                }
                canvas.drawPath(mPath,mPaint);
                break;
        }
    }

    public Shape getCurrentShape() {
        return mCurrentShape;
    }

    /**
     * 改变形状
     */
    public void exchange() {
        switch (mCurrentShape) {
            case Circle:
                //画圆形
                mCurrentShape=Shape.Square;

                break;
            case Square:
                mCurrentShape=Shape.Triangle;
                break;
            case Triangle:
                mCurrentShape=Shape.Circle;
                break;

        }
        invalidate();

    }

    public enum Shape {
        Circle, Square, Triangle
    }
}

public class LoadingView extends LinearLayout {
    private final ShapeView mShapeView;
    private final View mShadowView;
    private int mTranslationDistance = 0;
    // 动画执行的时间
    private final long ANIMATOR_DURATION = 300;
    // 是否停止动画
    private boolean mIsStopAnimator = false;

    public LoadingView(Context context) {
        this(context, null);
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.ui_loading_view, this);
        mShapeView = (ShapeView) findViewById(R.id.shape_view);
        mShadowView = findViewById(R.id.shadow_view);
        mTranslationDistance = dip2px(80);
        post(new Runnable() {
            @Override
            public void run() {
                startFallAnimator();

            }
        });

    }

    /**
     * 开始下落动画
     */

    private void startFallAnimator() {
        if (mIsStopAnimator){
            return;
        }
        //下落位移动画
        ObjectAnimator translationY = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationDistance);
        //配合中间阴影缩小
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(mShapeView, "scaleX", 1f, 0.3f);
        //组合动画
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATOR_DURATION);
        //加速差值器
        animatorSet.setInterpolator(new AccelerateInterpolator());
        animatorSet.playTogether(translationY, scaleX);
        animatorSet.start();
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //改变形状
                mShapeView.exchange();
                //下落结束后就进行上抛动画
                startUpAnimator();

            }
        });


    }

    /**
     * 开始上抛动画
     */
    private void startUpAnimator() {
        if (mIsStopAnimator){
            return;
        }
        ObjectAnimator translationY = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationDistance, 0);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(mShapeView, "scaleX", 0.3f, 1f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATOR_DURATION);
        //减速差值器
        animatorSet.setInterpolator(new DecelerateInterpolator());
        animatorSet.playTogether(translationY, scaleX);
        animatorSet.start();
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                //上抛结束就下落
                startFallAnimator();

            }

            @Override
            public void onAnimationStart(Animator animation) {
                //开始旋转
                startRotateAnimator();
            }
        });

    }

    /**
     * 开始旋转动画
     */
    private void startRotateAnimator() {
        ObjectAnimator rotationAnimator = null;
        switch (mShapeView.getCurrentShape()) {
            case Circle:
            case Square:
                rotationAnimator.ofFloat(mShapeView,"rotation",0,180);
                break;
            case Triangle:
                rotationAnimator.ofFloat(mShapeView,"rotation",0,-120);
                break;
        }
        rotationAnimator.setDuration(ANIMATOR_DURATION);
        rotationAnimator.setInterpolator(new DecelerateInterpolator());
        rotationAnimator.start();

    }

    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(View.INVISIBLE);
        //清理动画
        mShapeView.clearAnimation();
        mShadowView.clearAnimation();
        ViewGroup parent = (ViewGroup) getParent();
        if (parent!=null){
            parent.removeView(this);
            removeAllViews();
        }
        mIsStopAnimator=true;

    }

    private int dip2px(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());
    }
}