Android自定义加载进度条+自定义Dialog简洁弹窗

3,038 阅读3分钟

「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

首先自定义一个漂亮的进度条

public class GradualChangeProgressBar extends View {

    /**
     * 渐变颜色组
     */
    private int[] GRADIENT_COLORS = {Color.parseColor("#f3f3f3"), Color.parseColor("#06c661")};
    /**
     * 最大进度
     */
    private float max = 100;
    /**
     * 当前进度
     */
    private float progress;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 外描边的宽度
     */
    private float BORDER_STROCK;
    /**
     * 进度条进度矩形与控件边界的距离,≥BORDER_STROCK
     */
    private float PROGRESS_STROCK;
    //进度条的宽高
    private int mWidth, mHeight;
    /**
     * 画进度条的矩形
     */
    private RectF mRectF;

    /**
     * 第一层矩形颜色(进度条描边的颜色)
     */
    private String FirstLayerColor ="#98d98e";
    public GradualChangeProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

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

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

    private void initView() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mRectF = new RectF();
        BORDER_STROCK = getResources().getDimension(R.dimen.x2);
        BORDER_STROCK = getResources().getDimension(R.dimen.x2);
        PROGRESS_STROCK = getResources().getDimension(R.dimen.x3);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int round = mHeight / 2;//弧度为高度的一半
        mRectF.set(0, 0, mWidth, mHeight);//第一层矩形(描边层)
        mPaint.setColor(Color.parseColor(FirstLayerColor));//第一层矩形颜色(进度条描边的颜色)
        canvas.drawRoundRect(mRectF, round, round, mPaint);//画第一层圆角矩形
        mPaint.setColor(Color.WHITE);//第二层矩形颜色(背景层颜色)
        mRectF.set(BORDER_STROCK, BORDER_STROCK, mWidth - BORDER_STROCK, mHeight - BORDER_STROCK);//第二层矩形(背景层)
        canvas.drawRoundRect(mRectF, round, round, mPaint);//画背景层圆角矩形(盖在描边层之上)
        if (progress == 0)//进度为 0不画进度
            return;
        float section = progress / max;
        //第三层矩形(进度层)
        mRectF.set(PROGRESS_STROCK, PROGRESS_STROCK, (mWidth - PROGRESS_STROCK) * section, mHeight - PROGRESS_STROCK);
        //创建线性颜色渐变器
        LinearGradient shader = new LinearGradient(PROGRESS_STROCK, PROGRESS_STROCK,
                (mWidth - PROGRESS_STROCK) * section, mHeight - PROGRESS_STROCK, GRADIENT_COLORS, null, Shader.TileMode.MIRROR);
        mPaint.setShader(shader);//第三层矩形颜色(进度渐变色)
        canvas.drawRoundRect(mRectF, round, round, mPaint);//画第三层(进度层)圆角矩形(盖在背景层之上)
        mPaint.setShader(null);//清除之前传递的shader
    }

    /***
     * 设置最大进度
     *
     * @param maxCount
     */
    public void setMax(float maxCount) {
        this.max = maxCount;
    }

    /***
     * 设置当前进度
     *
     * @param currentCount
     */
    public void setProgress(float currentCount) {
        this.progress = currentCount > max ? max : currentCount;
        invalidate();
    }

    public float getMax() {
        return max;
    }


    /**
     * 测量得到进度条的宽高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
            mWidth = widthSpecSize;
        } else {
            mWidth = 0;
        }
        if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
            mHeight = (int) getResources().getDimension(R.dimen.x20);
        } else {
            mHeight = heightSpecSize;
        }
        setMeasuredDimension(mWidth, mHeight);
    }
}

随着Fragment这个类的引入,Google官方推荐大家使用DialogFragment来代替传统的Dialog DialogFragment 有着 Dialog 所没有的非常好的特性,可以让它具有更高的可复用性(降低耦合)和更好的便利性(很好的处理屏幕翻转的情况)。

  • DialogFragment中重写onCreateView方法,该方法创建的View将会作为Dialog的内容布局,使用方式则是跟方法一在Activity中方式一致,这里就不赘述了。

重写DialogFragment的onCreateView方法

封装一个抽象类继承DialogFragment

abstract class AbsDialogFragment extends DialogFragment {

重写onCreateDialog函数

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    mContext = new WeakReference<>(getActivity()).get();//弱引用
    
    mRootView = LayoutInflater.from(mContext).inflate(getLayoutId(), null);//填充布局
    Dialog dialog = new Dialog(mContext, getDialogStyle());//实例化Dialog
    dialog.setContentView(mRootView);
    dialog.setCancelable(canCancel());
    dialog.setCanceledOnTouchOutside(canCancel());
    setWindowAttributes(dialog.getWindow());
    return dialog;
}

全部代码

public abstract class AbsDialogFragment extends DialogFragment {

    protected Context mContext;
    protected View mRootView;

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        mContext = new WeakReference<>(getActivity()).get();

        mRootView = LayoutInflater.from(mContext).inflate(getLayoutId(), null);
        Dialog dialog = new Dialog(mContext, getDialogStyle());
        dialog.setContentView(mRootView);
        dialog.setCancelable(canCancel());
        dialog.setCanceledOnTouchOutside(canCancel());
        setWindowAttributes(dialog.getWindow());
        return dialog;
    }

    protected abstract int getLayoutId();

    protected abstract int getDialogStyle();

    protected abstract boolean canCancel();

    protected abstract void setWindowAttributes(Window window);

    protected View findViewById(int id) {
        if (mRootView != null) {
            return mRootView.findViewById(id);
        }
        return null;
    }

    protected boolean canClick() {
        return ClickUtil.canClick();
    }
}

进度条代码原作者github_2011,以上代码在此基础上做了改动

设计一个简洁大方的布局

dialog_loading_progress_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/card_shape"
    android:padding="16dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/tv_title"
        android:textColor="@color/black"
        android:textSize="17dp"
        android:text="上传中"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <cn.xy.view.view.GradualChangeProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="36dip"
        android:layout_marginLeft="16dip"
        android:layout_marginRight="16dip"
        app:layout_constraintTop_toBottomOf="@+id/tv_title"/>


    <TextView
        android:id="@+id/tv_suspend"
        android:text="挂起"
        android:textColor="@color/purple_700"
        android:paddingTop="6dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingBottom="6dp"
        android:background="@drawable/bg_operator"
        android:layout_marginTop="39dip"
        android:layout_marginRight="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/progress"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/tv_value"
        android:text="99%"
        android:textColor="@color/purple_700"
        android:layout_marginTop="39dip"
        android:paddingTop="6dp"
        android:paddingRight="9dp"
        android:paddingBottom="6dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/progress"
       app:layout_constraintEnd_toStartOf="@+id/tv_suspend"/>

</androidx.constraintlayout.widget.ConstraintLayout>

接着 创建DialogProgressBar并继承AbsDialogFragment
接下来就是简单的初始化控件调用aip了

public class DialogProgressBar extends AbsDialogFragment implements View.OnClickListener {

    private String mTivle;
    private TextView mTvTivle;//标题
    private TextView mTvValue;//当前进度
    private TextView mTvSuspend;//挂起按钮
    private Context mContext =null;
    private GradualChangeProgressBar progressView ;//自定义进度条


    public interface OnClickListener {
        void suspend();
    }
    private OnClickListener listener;
    private boolean canCancel = true;
    @Override
    protected int getLayoutId() {
        return R.layout.dialog_loading_progress_layout;
    }

    @Override
    protected int getDialogStyle() {
        return R.style.dialog;
    }

    @Override
    protected boolean canCancel() {
        return canCancel;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        findViewById(R.id.tv_suspend).setOnClickListener(this);
        progressView = (GradualChangeProgressBar)findViewById(R.id.progress);
        mTvTivle = (TextView)findViewById(R.id.tv_title);
        mTvValue = (TextView)findViewById(R.id.tv_value);
        mTvTivle.setText(mTivle);
    }


    @Override
    protected void setWindowAttributes(Window window) {
//        window.setWindowAnimations(R.style.bottomToTopAnim);
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = WindowManager.LayoutParams.WRAP_CONTENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        params.gravity = Gravity.CENTER;
        window.setAttributes(params);
    }


    /***
     * 设置进度
     * @param progress
     */
    public void setProgress(float progress) {
        progressView.setProgress(progress);
        mTvValue.setText((int)progress+"%");
    }
    /***
     * 设置进度
     * @param progress
     */
    public void setProgress(int progress) {
        progressView.setProgress(progress);
        mTvValue.setText((int)progress+"%");
    }

    /**
     * 设置标题
     * @param title
     */
    public void setTitle(String title){
        mTivle = title;

    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_suspend :
                listener.suspend();
                break;
        }
        dismiss();
    }
    public void setCanCancel(boolean cancancel){
        this.canCancel = cancancel;
    }

    /**
     * 
     * @param mListener
     */
    public void setSuspendListener(OnClickListener mListener){
       this.listener = mListener;
    }

调用方法

DialogProgressBar mDialogProgressBar = new DialogProgressBar();
mDialogProgressBar.show(getSupportFragmentManager(), "DialogProgressBar");
mDialogProgressBar.setProgress(val);
mDialogProgressBar.setSuspendListener(new DialogProgressBar.OnClickListener() {
    @Override
    public void suspend() {
        //挂起事件
    }
});

嘻嘻 没有效果图一律当水贴处理

ezgif.com-gif-maker (2).gif