自定义旋转加载动画窗口

ll木木彡木木彡ll

已于 2022-12-22 16:17:10 修改

阅读量987

点赞数

分类专栏：自定义控件文章标签：动画 java android

于 2021-12-23 14:16:45 首次发布

本文链接：https://blog.csdn.net/qq_15327175/article/details/122105859

版权

自定义控件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方法一：利用ProgressBar创建一个一直旋转的进度条实现
方法二：自定义View，以实现加载中的效果

方法一：
首先是黑底透明的背景：
shape_toast_br.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#99000000" />
    <corners android:radius="10dp" />
</shape>

旋转动画
dialog_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_loading_bg"
    android:pivotX="50%"
    android:pivotY="50%" />

旋转图片，可以换成换成png或者jpg的图片，（动画是从左到右的，选图时需要注意，另外最好是中心对称的图）
ic_loading_bg.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:fillColor="#ffffff"
        android:pathData="M512,1024C229.23,1024 0,794.77 0,512 0,229.23 229.23,0 512,0 794.77,0 1024,229.23 1024,512 1024,794.77 794.77,1024 512,1024ZM617.16,98.93C622.65,112.3 625.78,126.89 625.78,142.22 625.78,205.06 574.83,256 512,256 449.17,256 398.22,205.06 398.22,142.22 398.22,126.89 401.35,112.3 406.87,98.93 222.15,145.83 85.33,312.72 85.33,512 85.33,747.63 276.37,938.67 512,938.67 747.63,938.67 938.67,747.63 938.67,512 938.67,312.72 801.85,145.83 617.16,98.93Z" />
</vector>

窗口的视图文件
dialog_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialog_loading_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="120dp"
        android:layout_height="90dp"
        android:background="@drawable/shape_toast_br"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingLeft="21dp"
        android:paddingTop="10dp"
        android:paddingRight="21dp"
        android:paddingBottom="10dp">

        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center_horizontal"
            android:indeterminateBehavior="repeat"
            android:indeterminateDrawable="@drawable/dialog_loading"
            android:indeterminateOnly="true" />

        <TextView
            android:id="@+id/tipTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="加载中..."
            android:textColor="#FFFFFF"
            android:textSize="15sp" />
    </LinearLayout>

</LinearLayout>

实现继承DialogFragment的窗口
ProgressDialog.class

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;


import androidx.fragment.app.DialogFragment;
import kbdct.wbb.utillib.R;

public class ProgressDialog extends DialogFragment {

    private boolean showing;
    View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
        getDialog().getWindow().setBackgroundDrawable(new
                ColorDrawable(Color.TRANSPARENT));
        getDialog().setCanceledOnTouchOutside(false);
        view = inflater.inflate(R.layout.dialog_progress, container);
        showing = true;
        return view;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        showing = false;
    }


    public boolean isShowing() {
        return showing;
    }

}

使用方式

 ProgressDialog mProgressDialog;

    public void showLoading() {
        try {
            if (mProgressDialog == null) {
                mProgressDialog = new ProgressDialog();
                mProgressDialog.setCancelable(false);
            }
            if (!mProgressDialog.isShowing())
                mProgressDialog.show(getSupportFragmentManager(), "progressDialog");
        } catch (Exception e) {
            LogOut.i("progressDialog error");
        }
    }

    public void hideLoading() {
        try {
            if (mProgressDialog != null)
                mProgressDialog.dismissAllowingStateLoss();
        } catch (Exception e) {

        }
    }

方法二：
窗体布局文件 loading_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialog_loading_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="90dp"
        android:minWidth="120dp"
        android:background="@drawable/shape_toast_br"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingLeft="21dp"
        android:paddingTop="10dp"
        android:paddingRight="21dp"
        android:paddingBottom="10dp">

        <kbdct.wbb.utillib.widget.LoadingView
            android:layout_width="35dp"
            android:layout_height="35dp"/>

        <TextView
            android:id="@+id/tipTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="160dp"
            android:layout_marginTop="15dp"
            android:text="加载中"
            android:maxLines="1"
            android:textColor="#ffffff"
            android:textSize="14sp" />
    </LinearLayout>

</LinearLayout>

自定义旋转View。LoadingView.java


import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.NonNull;
import kbdct.wbb.utillib.DensityUtil;

public class LoadingView extends View {
    private int mSize;
    private int mPaintColor;
    private int mAnimateValue = 0;
    private ValueAnimator mAnimator;
    private Paint mPaint;
    private static final int LINE_COUNT = 12;
    private static final int DEGREE_PER_LINE = 360 / LINE_COUNT;
    public LoadingView(Context context) {
        this(context, null);
    }

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

    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mSize = DensityUtil.dip2px(context, 32);
        mPaintColor = Color.WHITE;
        initPaint();

    }
    public LoadingView(Context context, int size, int color) {
        super(context);
        mSize = size;
        mPaintColor = color;
        initPaint();
    }

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(mPaintColor);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
    }

    public void setColor(int color) {
        mPaintColor = color;
        mPaint.setColor(color);
        invalidate();
    }

    public void setSize(int size) {
        mSize = size;
        requestLayout();
    }

    private ValueAnimator.AnimatorUpdateListener mUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mAnimateValue = (int) animation.getAnimatedValue();
            invalidate();
        }
    };

    public void start() {
        if (mAnimator == null) {
            mAnimator = ValueAnimator.ofInt(0, LINE_COUNT - 1);
            mAnimator.addUpdateListener(mUpdateListener);
            mAnimator.setDuration(600);
            mAnimator.setRepeatMode(ValueAnimator.RESTART);
            mAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mAnimator.setInterpolator(new LinearInterpolator());
            mAnimator.start();
        } else if (!mAnimator.isStarted()) {
            mAnimator.start();
        }
    }

    public void stop() {
        if (mAnimator != null) {
            mAnimator.removeUpdateListener(mUpdateListener);
            mAnimator.removeAllUpdateListeners();
            mAnimator.cancel();
            mAnimator = null;
        }
    }

    private void drawLoading(Canvas canvas, int rotateDegrees) {
        int width = mSize / 12, height = mSize / 6;
        mPaint.setStrokeWidth(width);

        canvas.rotate(rotateDegrees, mSize / 2, mSize / 2);
        canvas.translate(mSize / 2, mSize / 2);

        for (int i = 0; i < LINE_COUNT; i++) {
            canvas.rotate(DEGREE_PER_LINE);
            mPaint.setAlpha((int) (255f * (i + 1) / LINE_COUNT));
            canvas.translate(0, -mSize / 2 + width / 2);
            canvas.drawLine(0, 0, 0, height, mPaint);
            canvas.translate(0, mSize / 2 - width / 2);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(mSize, mSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        drawLoading(canvas, mAnimateValue * DEGREE_PER_LINE);
        canvas.restoreToCount(saveCount);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        start();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stop();
    }

    @Override
    protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
        super.onVisibilityChanged(changedView, visibility);
        if (visibility == VISIBLE) {
            start();
        } else {
            stop();
        }
    }

}

窗体 LoadingDialog.java


import android.app.Activity;
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.StyleRes;
import kbdct.wbb.utillib.R;

/**
 * Created by Administrator on 2017/11/24 0024.
 */

public class LoadingDialog extends Dialog {

    private Activity activity;

    TextView tipTextView;

    public Object tag;

    public LoadingDialog(@NonNull Activity activity) {
        super(activity);
        this.activity = activity;
    }

    public LoadingDialog(@NonNull Activity activity, @StyleRes int themeResId) {
        super(activity, themeResId);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //绘制dialog背景透明
        this.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
//        this.getWindow().setWindowAnimations(R.style.AnimationLoadingZoom);
        setCanceledOnTouchOutside(false);  //取消outsideTouch
        setContentView(R.layout.loading_view);
        tipTextView = findViewById(R.id.tipTextView);
        tipTextView.setText(title);
    }

    @Override
    public void show() {
        super.show();
        WindowManager.LayoutParams lp = activity.getWindow().getAttributes();
        lp.alpha = 0.6f;
    }

    @Override
    public void dismiss() {
        WindowManager.LayoutParams lp = activity.getWindow().getAttributes();
        lp.alpha = 1f;
        activity.getWindow().setAttributes(lp);
        super.dismiss();
    }

    String title = "加载中";

    public void show(String title) {
        this.title = title;
        if (tipTextView != null)
            tipTextView.setText(title);
        show();
    }


    public Object getTag() {
        return tag;
    }

    public void setTag(Object tag) {
        this.tag = tag;
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {

        super.onWindowFocusChanged(hasFocus);

        Window window = getWindow();

        if (hasFocus && window != null) {

            View decorView = window.getDecorView();

            if (decorView.getHeight() == 0 || decorView.getWidth() == 0) {

                decorView.requestLayout();

//Log.d(TAG, "布局异常，重新布局");

            }

        }

    }

    @Override
    public void onBackPressed() {
//        super.onBackPressed();

    }
}

使用方法

    LoadingDialog mLoadingDialog;
    public void showLoading() {
        if (mLoadingDialog == null)
            mLoadingDialog = new LoadingDialog(this);
        if (!mLoadingDialog.isShowing())
            mLoadingDialog.show();
    }
    public void hideLoading() {
        if (mLoadingDialog != null && mLoadingDialog.isShowing())
            mLoadingDialog.dismiss();
    }