欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

荐 android自定义view圆形百分比progressBar√

程序员文章站 2022-03-03 22:30:55
前言最近工作太不饱和,基本是这个节奏:8.40到公司,吃个早餐,边吃边玩手机9.消化一下,打开电脑看会新闻。阿三们又在搞事,反对made in china的产品、禁用几十款app,加上国安法在香港也有游行不服的,哎,我大清真难了9.30-10.带薪拉屎时间10.如果当天有茅台抢购,也是要打开京东抢一抢的,虽然东哥暂时还不认我这个兄弟11.要开始做点事了(反正不是工作的事)12.-1.30吃饭、午觉14.把每个群的消息浏览一遍,最活跃的群非同学们的炒股群莫属(每天如此),都在讨论牛市要来了,准...

前言

最近工作太不饱和,基本是这个节奏:
8.40到公司,吃个早餐,边吃边玩手机
9.消化一下,打开电脑看会新闻。阿三们又在搞事,反对made in china的产品、禁用几十款app,加上国安法在香港也有游行不服的,哎,我大清太难了
9.30-10.带薪拉屎时间
10.如果当天有茅台抢购,也是要打开京东抢一抢的,虽然东哥暂时还不认我这个兄弟
11.要开始做点事了(反正不是工作的事)
12.-1.30吃饭、午觉
14.把每个群的消息浏览一遍,最活跃的群非同学们的炒股群莫属(每天如此),都在讨论牛市要来了,准备进场一把梭哈。我也想试试,但是奈何钱不够,今天还要交房租。
15.要开始做点事了(一般是逛知乎、写博客)
16.下半场休息时间,这个时候一般抽根黄鹤楼斗斗地主,豆子很快就会输完,好在我有两个号,想骗我充值、看广告,不存在的
17.继续做“事”
18.准点下班(怪不好意思的)

h5、小程序开发倒是挺忙的,过几天要正儿八经学一下小程序,希望能一起帮前端的兄弟一起迭代之前的小程序。
现在呢,时间总不能浪费,写写blog吧,记录一下,说不定还能帮到需要的朋友。

进入正题,继续接着上一篇android自定义view实现进度条动画、按钮渐变及录制状态控制,趁热打铁,继续来画个进度条,这个跟上一篇实现方式类似,多了一个百分比数字显示以及完成后的√。

上效果:

荐
                                                        android自定义view圆形百分比progressBar√

没什么好解释的,直接上代码:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;

/**
 * 进度
 *
 * @author ly
 * date 2020/3/3 11:02
 */
public class CircleProgressView extends View {

    private static final int COMPLETE = 360;
    private int okSpeed = 3;

    private Paint paint;
    //进度圈颜色
    private int circleOutsideColor;
    //进度颜色
    private int circleProgressColor;
    private float progressW;
    //进度条圆圈半径
    private float circleProgressR;
    private OnProgressListener onProgressListener;

    private RectF progressRect;
    private float progress;
    private String progressText;
    private Path okPath;
    private int sX, sY;
    private int mX;
    private int eX;
    private int cX, cY;

    public CircleProgressView(Context context) {
        super(context);
        init();
    }

    public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        circleOutsideColor = 0xffF2F4F5;
        circleProgressColor = 0xff6066DD;
        paint = new Paint();
        paint.setAntiAlias(true);//抗锯齿
        paint.setDither(true); //设置防抖动
    }

    /**
     * @param progress 已加载进度/总进度
     * @author ly on 2020/3/3 16:41
     */
    public void setProgress(float progress) {
        this.progress = progress * COMPLETE;
        if (this.progress >= COMPLETE) {//表示录制达到最大时长,自动结束
            this.progress = COMPLETE;
        }
        progressText = (int) (progress * 100) + "%";
        invalidate();
    }

    public void reset() {
        setProgress(0);

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (circleProgressR == 0 || okPath == null) {
            int w = getWidth();
            progressW = w * 0.061f;
            circleProgressR = (w - progressW) / 2f;

            progressRect = new RectF(0 + progressW / 2, 0 + progressW / 2, w - progressW / 2, w - progressW / 2);

            int okW = (int) ((getWidth() - progressW) * 0.45);
            int okH = (int) ((getHeight() - progressW) * 0.32);

            cX = sX = (getWidth() - okW) / 2;
            cY = sY = getHeight() / 2;
            mX = (int) (sX + 0.39 * okW);
            int mY = (int) (sY + 0.35 * okW);
            eX = getWidth() - (getWidth() - okW) / 2;
            int eY = (getHeight() - okH) / 2;

            okPath = new Path();
            okPath.moveTo(sX, sY);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画进度圈
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(circleOutsideColor);
        paint.setStrokeWidth(progressW);//设置画笔粗细
        canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, circleProgressR, paint);

        //画进度就是圆弧
        //时钟3点的方向为0度,顺时钟方向为正,-90是圆弧的开始点,即12点位置开始,
        //sweepAngle扫过的角度,调整该值即可实现进度顺时针加载(0-360)
        paint.setColor(circleProgressColor);
        canvas.drawArc(progressRect, -90, progress, false, paint);

        if (progress < COMPLETE) {
            if (!TextUtils.isEmpty(progressText)) {
                // 将坐标原点移到控件中心
                int dx = getWidth() / 2;
                int dy = getHeight() / 2;
                canvas.translate(dx, dy);
                // 绘制居中文字
                paint.setTextSize(PixelUtil.sp2px(30));
                // 文字宽
                float textWidth = paint.measureText(progressText);
                // 文字baseline在y轴方向的位置
                float baseLineY = Math.abs(paint.ascent() + paint.descent()) / 2;
                paint.setStyle(Paint.Style.FILL);
//            paint.setStrokeWidth(2);
                canvas.drawText(progressText, -textWidth / 2, baseLineY, paint);
            }
        } else {//加载完成,画√
            if (cX < eX) {//来个动画凑合用
                cX += okSpeed;
                if (cX < mX) {
                    cY += okSpeed;
                } else {
                    cY -= okSpeed;
                }
                invalidate();
            } else {
                postDelayed(() -> {
                    if (onProgressListener != null)
                        onProgressListener.complete();
                }, 1500);
            }
            okPath.lineTo(cX, cY);
            canvas.drawPath(okPath, paint);
        }
    }

    public float getProgress() {
        return progress / COMPLETE;
    }

    public void setOnProgressListener(OnProgressListener onProgressListener) {
        this.onProgressListener = onProgressListener;
    }

    public interface OnProgressListener {
        void complete();
    }
}

还是说一下那个√的动画吧,其实是个规则的图形,都是直线。x轴的坐标是增加的,y坐标先递减再递增。由于要画的√的两条直线可拆分为两个等腰三角形对应的斜边,所以x和y坐标的增减量(okSpeed)都相等。这里有两个优化点:
1、okSpeed的值是固定的,可添加插值器来改变okSpeed的值,从而达到画√的速率
2、这个√的开始和结束的两端是直角,略生硬,可优化成圆角(画笔设置paint.setStrokeCap(Paint.Cap.ROUND)即可)
其他没什么好说的,上dialog的代码:

import android.content.Context;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;

/**
 * @author ly
 * date 2019/8/1 17:36
 */
public class CircleProgressDialog extends BaseDialog {

    private CircleProgressView circleProgressView;
    private TextView tv_dialog_progress_status;
    private ImageView iv_dialog_progress_close;
    private OnProgressCallBack onProgressCallBack;

    public CircleProgressDialog(@NonNull Context context, OnProgressCallBack onProgressCallBack) {
        super(context);
        this.onProgressCallBack = onProgressCallBack;

    }

    @Override
    public int getLayoutResId() {
        return R.layout.v_dialog_circle_progress;
    }

    @Override
    public void initViews() {
        if (getWindow() != null) {
            getWindow().getAttributes().width = ScreenUtil.getScreenWidth() * 4 / 5;
            getWindow().setGravity(Gravity.CENTER);
        }
        setCanceledOnTouchOutside(false);
        setCancelable(false);

        circleProgressView = findViewById(R.id.circleProgressView);
        tv_dialog_progress_status = findViewById(R.id.tv_dialog_progress_status);
        iv_dialog_progress_close = findViewById(R.id.iv_dialog_progress_close);
        iv_dialog_progress_close.setOnClickListener(v -> {
            if (onProgressCallBack != null)
                onProgressCallBack.intoNextPage();
            dismiss();
        });
        iv_dialog_progress_close.setVisibility(View.GONE);

        circleProgressView.setOnProgressListener(() -> {
            if (onProgressCallBack != null)
                onProgressCallBack.intoNextPage();
            dismiss();
        });
        setOnDismissListener(dialog -> circleProgressView.reset());
    }

    public void setProgress(float progress) {
        circleProgressView.setProgress(progress);
        if (progress >= 1) {
            tv_dialog_progress_status.setText("发布成功");
            iv_dialog_progress_close.setVisibility(View.VISIBLE);
        } else {
            tv_dialog_progress_status.setText("正在发布中...");
            iv_dialog_progress_close.setVisibility(View.GONE);
        }
    }

    public float getProgress() {
        return circleProgressView.getProgress();
    }

    public interface OnProgressCallBack {
        void intoNextPage();
    }
}

v_dialog_circle_progress:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/shape_white_r16"
    android:padding="12dp">

    <ImageView
        android:id="@+id/iv_dialog_progress_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@mipmap/ico_close4dialog" />


    <com.xxx.CircleProgressView
        android:id="@+id/circleProgressView"
        android:layout_width="117dp"
        android:layout_height="117dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="34dp" />

    <TextView
        android:id="@+id/tv_dialog_progress_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/circleProgressView"
        android:layout_centerHorizontal="true"
        android:paddingTop="23dp"
        android:paddingBottom="28dp"
        android:textColor="#ff727a7c"
        android:textSize="15sp"
        tools:text="正在发布中..." />
</RelativeLayout>

最后给个fake进度,就可以看到效果啦:

   private ScheduledFuture<?> scheduledFuture;
   private void fakeProgress() {
    	CircleProgressDialog circleProgressDialog = new CircleProgressDialog(this, () -> {});
   		circleProgressDialog.show();
        scheduledFuture = ExecutorServiceManager.get().getExecutorService().scheduleWithFixedDelay(() -> {
            runOnUiThread(() -> {
                float progress = circleProgressDialog.getProgress();
                if (!circleProgressDialog.isShowing() || videoNoteInfo != null) {
                    if (scheduledFuture != null)
                        scheduledFuture.cancel(true);
                    scheduledFuture = null;
                    return;
                }
                progress += 0.006f;
                circleProgressDialog.setProgress(progress);
            });
        }, 0, 20, TimeUnit.MILLISECONDS);
    }

如果对大家有帮助,请点个赞以鼓励我不断前进~

end

本文地址:https://blog.csdn.net/xiaoerye/article/details/107125130