荐 android自定义view圆形百分比progressBar√
前言
最近工作太不饱和,基本是这个节奏:
8.40到公司,吃个早餐,边吃边玩手机
9.消化一下,打开电脑看会新闻。阿三们又在搞事,反对made in china的产品、禁用几十款app,加上国安法在香港也有游行不服的,哎,我大清太难了
9.30-10.带薪拉屎时间
10.如果当天有茅台抢购,也是要打开京东抢一抢的,虽然东哥暂时还不认我这个兄弟
11.要开始做点事了(反正不是工作的事)
12.-1.30吃饭、午觉
14.把每个群的消息浏览一遍,最活跃的群非同学们的炒股群莫属(每天如此),都在讨论牛市要来了,准备进场一把梭哈。我也想试试,但是奈何钱不够,今天还要交房租。
15.要开始做点事了(一般是逛知乎、写博客)
16.下半场休息时间,这个时候一般抽根黄鹤楼斗斗地主,豆子很快就会输完,好在我有两个号,想骗我充值、看广告,不存在的
17.继续做“事”
18.准点下班(怪不好意思的)
h5、小程序开发倒是挺忙的,过几天要正儿八经学一下小程序,希望能一起帮前端的兄弟一起迭代之前的小程序。
现在呢,时间总不能浪费,写写blog吧,记录一下,说不定还能帮到需要的朋友。
进入正题,继续接着上一篇android自定义view实现进度条动画、按钮渐变及录制状态控制,趁热打铁,继续来画个进度条,这个跟上一篇实现方式类似,多了一个百分比数字显示以及完成后的√。
上效果:
没什么好解释的,直接上代码:
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
上一篇: os x10.11el capitan beta2下载地址
下一篇: 改变JFrame窗口左上角图标