android自定義view圓形百分比progressBar√
前言
最近工做太不飽和，基本是這個節奏： 8.40到公司，吃個早餐，邊吃邊玩手機前端
9.消化一下，打開電腦看會新聞。阿三們又在搞事，反對made in china的產品、禁用幾十款app，加上國安法在香港也有遊行不服的，哎，我大清太難了android
9.30-10.帶薪拉屎時間canvas
10.若是當天有茅臺搶購，也是要打開京東搶一搶的，雖然東哥暫時還不認我這個兄弟小程序
11.要開始作點事了（反正不是工做的事）bash
12.-1.30吃飯、午覺app
14.把每一個羣的消息瀏覽一遍，最活躍的羣非同窗們的炒股羣莫屬（天天如此），都在討論牛市要來了，準備進場一把梭哈。我也想試試，可是奈何錢不夠，今天還要交房租。ide
15.要開始作點事了（通常是逛知乎、寫博客）post
16.下半場休息時間，這個時候通常抽根黃鶴樓鬥鬥地主，豆子很快就會輸完，好在我有兩個號，想騙我充值、看廣告，不存在的優化
17.繼續作「事」動畫
18.準點下班（怪很差意思的）
h五、小程序開發卻是挺忙的，過幾天要正兒八經學一下小程序，但願能一塊兒幫前端的兄弟一塊兒迭代以前的小程序。 如今呢，時間總不能浪費，寫寫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）都相等。這裏有兩個優化點： 一、okSpeed的值是固定的，可添加插值器來改變okSpeed的值，從而達到畫√的速率 二、這個√的開始和結束的兩端是直角，略生硬，可優化成圓角（在兩個地方對應drawCircle便可） 其餘沒什麼好說的，上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
相關文章
- 1. Android自定義View：帶百分比的圓形進度條
- 2. 自定義圓形ProgressBar
- 3. 自定義圓形的ProgressBar
- 4. Android 自定義View——自定義ProgressBar
- 5. 自定義ProgressBar（圓）
- 6. Android-------自定義View圓形進度條
- 7. Android 自定義View圓形進度條
- 8. 自定義View之帶進度百分比ProgressBar
- 9. 自定義圓形progressbar顏色
- 10. Android-自定義view之圓形與「半圓形」菜單
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • MySQL自定義函數（CREATE FUNCTION） - MySQL教程
- • RxJava操作符（十）自定義操作符
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
