Android 自定義控制元件一 帶圓形進度的按鈕 ControlButton2
效果圖
圖片展示的是中間的圖案ImageView和下面一層自定義控制元件的效果
每次點選都會有一個圓形滾動進度條出現
開始背景黑色,點選後進度條開始滾動,100%時背景變藍持續一定時間後回覆初始
程式碼實現
package com.demo.ui.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.os.Handler;
import android.os.Message;
import android.view.View;
public class ControlButton2 extends View{
private static final String TAG = "CircleProgressBar";
private int mMaxProgress = 3000;
private int mProgress = 0;
private final int mCircleLineStrokeWidth = 4;
private final int mTxtStrokeWidth = 2;
// 畫圓所在的距形區域
private final RectF mRectF;
private final Paint mPaint;
private final Paint mPaintCircle;
private final Context mContext;
private String mTxtHint1;
private String mTxtHint2;
private SweepGradient mSweepGradient;
private CBOnTriggerListener cbOnTriggerListener;
private boolean hasTrigle =false;
public boolean isControlButtonRun = false;
public int circleBackColor = 0xe518151E;//0xFF006CFF
public int cicleColor = 0xFF0586FB;
private Runnable runnable;
private Runnable Stoprunnable;
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
}
};
public ControlButton2(Context context) {
super(context);
mContext = context;
mRectF = new RectF();
mPaint = new Paint();
mPaintCircle = new Paint();
runnable = new Runnable()
{
public void run()
{
//sendContinueMessage();
mProgress += 20;
setProgress(mProgress);
handler.postDelayed(this, 20);
if(mProgress == 3000){
stop(controlSuccess);
}
}
};
Stoprunnable = new Runnable()
{
public void run()
{
mProgress += 160;
setProgress(mProgress);
handler.postDelayed(this, 10);
if(mProgress >= 3000){
hasTrigle = true;
stop(controlSuccess);
}
}
};
}
@SuppressLint("DrawAllocation") @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = this.getWidth();
int height = this.getHeight();
//canvas.drawColor(0xFFFFFF00);
mSweepGradient = new SweepGradient(width/2, height/2, new int[] {cicleColor,cicleColor,cicleColor,cicleColor,cicleColor}, null);
if (width != height) {
int min = Math.min(width, height);
width = min;
height = min;
}
// 設定畫筆相關屬性
mPaint.setAntiAlias(true);
mPaint.setColor(Color.rgb(0xe9, 0xe9, 0xe9));
canvas.drawColor(Color.TRANSPARENT);
mPaint.setStrokeWidth(mCircleLineStrokeWidth);
mPaint.setStyle(Style.STROKE);
// 位置
mRectF.left = mCircleLineStrokeWidth / 2; // 左上角x
mRectF.top = mCircleLineStrokeWidth / 2; // 左上角y
mRectF.right = width - mCircleLineStrokeWidth / 2; // 左下角x
mRectF.bottom = height - mCircleLineStrokeWidth / 2; // 右下角y
// 繪製圓圈,進度條背景
//canvas.drawArc(mRectF, -90, 360, false, mPaint);
//mPaint.setColor(Color.rgb(0xf8, 0x60, 0x30));
canvas.rotate(0, width / 2, height / 2);
mPaint.setShader(mSweepGradient);
canvas.drawArc(mRectF,-90, ((float) mProgress / mMaxProgress) * 360, false, mPaint);
mPaintCircle.setColor(circleBackColor);
mPaintCircle.setAntiAlias(true);
mPaintCircle.setStyle(Style.FILL);
canvas.drawCircle( width / 2, height / 2,(width / 2)-mCircleLineStrokeWidth,mPaintCircle);
}
public int getMaxProgress() {
return mMaxProgress;
}
public void setMaxProgress(int maxProgress) {
this.mMaxProgress = maxProgress;
}
public void setProgress(int progress) {
this.mProgress = progress;
this.invalidate();
}
public int getmProgress() {
return mProgress;
}
public void setProgressNotInUiThread(int progress) {
this.mProgress = progress;
this.postInvalidate();
}
public String getmTxtHint1() {
return mTxtHint1;
}
public void setmTxtHint1(String mTxtHint1) {
this.mTxtHint1 = mTxtHint1;
}
public String getmTxtHint2() {
return mTxtHint2;
}
public void setmTxtHint2(String mTxtHint2) {
this.mTxtHint2 = mTxtHint2;
}
public void setCBOnTriggerListener(CBOnTriggerListener listener) {
cbOnTriggerListener = listener;
}
public interface CBOnTriggerListener {
void trigger();
}
public void start(){
cicleColor = 0xFF0586FB;
if(!isControlButtonRun){
isControlButtonRun = true;
handler.postDelayed(runnable,0);
}
}
boolean controlSuccess = true;
int controlTimeDelay = 3000;
public void stop(boolean controlSuccess)
{
this.controlSuccess = controlSuccess;
handler.removeCallbacks(runnable);
handler.postDelayed(Stoprunnable,0);
if(controlSuccess){
cicleColor = 0xFF0586FB;//0xFF006CFF
controlTimeDelay = 3000;
}else{
cicleColor = 0xFFFF0000;//0xFF006CFF
controlTimeDelay = 6000;
}
if (cbOnTriggerListener != null){
if(hasTrigle){
hasTrigle = false;
cbOnTriggerListener.trigger();
isControlButtonRun = false;
setProgress(0);
handler.removeCallbacks(Stoprunnable);
}
}
/*new Handler().postDelayed(new Runnable() {
@Override
public void run() {
isControlButtonRun = false;
setProgress(0);
handler.removeCallbacks(Stoprunnable);
}
},controlTimeDelay);*/
}
public void setCircleBackColor(int circleBackColor) {
this.circleBackColor = circleBackColor;
invalidate();
}
public boolean isControlButtonRun() {
return isControlButtonRun;
}
public void setControlButtonRun(boolean controlButtonRun) {
isControlButtonRun = controlButtonRun;
}
}
相關文章
- 自定義圓形進度條控制元件控制元件
- Android自定義圓形進度條Android
- Android自定義控制元件實現一個帶文字與數字的圓形進度條Android控制元件
- 自定義圓形進度條
- Android自定義控制元件系列之圓形進度條的實現Android控制元件
- Android開發自定義控制元件實現一個圓形進度條【帶數值和動畫】Android控制元件動畫
- Android自定義圓形進度條原始碼解析Android原始碼
- Android進階 自定義View(三)圓形刻度進度條AndroidView
- Android自定義圓形進度條實現程式碼Android
- Android圓形圖片--自定義控制元件Android控制元件
- iOS專案開發實戰——自定義圓形進度提示控制元件iOS控制元件
- Android 自定義控制元件 按鈕滾動選擇Android控制元件
- Android自定義設定圓形圖片控制元件Android控制元件
- 短視訊開發app,自定義帶進度條的視訊播放按鈕APP
- Android自定義View——從零開始實現圓形進度條AndroidView
- Qt自定義開關按鈕控制元件QT控制元件
- Android 自定義圓形頭像Android
- Android自定義圓形頭像Android
- Android 自定義 View:包含多種狀態的下載用圓形進度條AndroidView
- Android 自定義圓形旋轉進度條,仿微博頭像載入效果Android
- C#自定義控制元件—旋轉按鈕C#控制元件
- [-Flutter 自定義元件-] 圓形進度條Flutter元件
- 自定義view之寫一個帶刪除按鈕的EdittextView
- 【Android】自定義樹形控制元件Android控制元件
- LabVIEW的自定義按鈕View
- Android 自定義dialog,實現右上角顯示一個控制元件按鈕Android控制元件
- 3個自定義view佈局:矩形TextView,圓形進度條,圓環viewTextView
- Android 自定義Switch開關按鈕的樣式Android
- 圓形進度條+二維碼掃描+自定義組合控制元件標題欄+自定義矩形view+介面回撥方法控制元件View
- 自定義ImageView完成圓形頭像自定義View
- Android 自定義實現switch開關按鈕Android
- Android UI控制元件系列:ImageButton(帶圖示的按鈕)AndroidUI控制元件
- 自定義View:自定義屬性(自定義按鈕實現)View
- Android開發自定義View之滑動按鈕與自定義屬性AndroidView
- Android自定義控制元件 帶文字提示的SeekBarAndroid控制元件
- 自定義一個酷炫的提交完成按鈕
- ABAP ALV TOOLBAR 自定義按鈕的型別以及listmenu按鈕型別
- android自帶ProgressBar圓形進度條修改顏色的技巧方法無bug探索Android