Android自定義帶有圓形進(jìn)度條的可長(zhǎng)按控件功能
更新時(shí)間：2022年06月15日 16:41:42 作者：移動(dòng)端開(kāi)發(fā)_小黑
這篇文章主要介紹了Android自定義帶有圓形進(jìn)度條的可長(zhǎng)按控件,思路很簡(jiǎn)單，使用簡(jiǎn)單的畫(huà)筆工具就可以完成這個(gè)控件，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
這幾天有在學(xué)習(xí)Jetpack中CameraX的內(nèi)容，在拍攝視頻的時(shí)候想著做一個(gè)自定義帶有進(jìn)度條的可長(zhǎng)按控件，用來(lái)顯示拍攝進(jìn)度，故記錄下來(lái)與大家分享！效果如下：
(篇幅過(guò)長(zhǎng)是因?yàn)橛写a解析過(guò)程，可直接到最后查看完整代碼)
這個(gè)控件較為簡(jiǎn)易，從效果中可以看出，控件模擬了單擊拍照，長(zhǎng)按可以錄制視頻的功能，中途松手或者時(shí)間到都可以停止錄制
思路很簡(jiǎn)單，使用簡(jiǎn)單的畫(huà)筆工具就可以完成這個(gè)控件
- 繼承自View
- 定義自定義屬性并獲取
- 定義填充樣式的畫(huà)筆
- onMeasure中測(cè)量大小，onDraw中繪制圓與扇形
- 監(jiān)聽(tīng)長(zhǎng)按監(jiān)聽(tīng)開(kāi)始定時(shí)器并刷新畫(huà)布，監(jiān)聽(tīng)觸摸事件進(jìn)行結(jié)束的回調(diào)
以上就是全部的思路了，代碼拆解如下：
（一）繼承自View并實(shí)現(xiàn)構(gòu)造方法，代碼如下：
public class LongClickView extends View {
public int DEFAULT_MAX_SECONDS = 15;
public int DEFAULT_ANNULUS_WIDTH = 5;
public int DEFAULT_ANNULUS_COLOR;
public int DEFAULT_RATE = 50;
private Paint mSmallCirclePaint;
private Paint mMiddenCirclePaint;
private Paint mBigCirclePaint;
private Paint mAngleCirclePaint;
private int mWidthSize;
private Timer mTimer;//計(jì)時(shí)器
private AtomicInteger mCount = new AtomicInteger(0);
private MyClickListener mMyClickListener;
private boolean mIsFinish = true;
private long mStartTime;//點(diǎn)擊的時(shí)間
private long mEndTime;//點(diǎn)擊結(jié)束的時(shí)間
private int mMaxSeconds;
private int mDelayMilliseconds;
private int mAnnulusColor;
private float mAnnulusWidth;
public interface MyClickListener {
void longClickFinish();//長(zhǎng)按結(jié)束
void singleClickFinish();//單擊結(jié)束
}
public void setMyClickListener(MyClickListener myClickListener) {
mMyClickListener = myClickListener;
}
public LongClickView(Context context) {
this(context, null);
}
public LongClickView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LongClickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
getAttrs(context, attrs);
initView();
}
}（二）定義并獲取自定義屬性，屬性以及獲取屬性代碼如下：
attr_long_click_view.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="LongClickView">
<attr name="maxSeconds" format="integer" />
<attr name="annulusWidth" format="integer" />
<attr name="annulusColor" format="color" />
<attr name="delayMilliseconds" format="integer" />
</declare-styleable>
</resources> private void getAttrs(Context context, @Nullable AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LongClickView);
//maxSeconds 最大的秒數(shù)
mMaxSeconds = typedArray.getInt(R.styleable.LongClickView_maxSeconds, DEFAULT_MAX_SECONDS);
//annulusWidth 圓環(huán)的寬度
mAnnulusWidth = typedArray.getInt(R.styleable.LongClickView_annulusWidth, DEFAULT_ANNULUS_WIDTH);
//annulusColor 圓環(huán)的顏色
DEFAULT_ANNULUS_COLOR = context.getResources().getColor(R.color.color_grey);
mAnnulusColor = typedArray.getColor(R.styleable.LongClickView_annulusColor, DEFAULT_ANNULUS_COLOR);
//delayMilliseconds 進(jìn)度條隔多少時(shí)間走一次,值越小走的越快，顯得更流暢
mDelayMilliseconds = typedArray.getInt(R.styleable.LongClickView_delayMilliseconds, DEFAULT_RATE);
}(三)定義畫(huà)筆工具 的代碼如下:
private void initView() {
mBigCirclePaint = new Paint();
mSmallCirclePaint = new Paint();
mMiddenCirclePaint = new Paint();
mAngleCirclePaint = new Paint();
mBigCirclePaint.setStyle(Paint.Style.FILL);
mBigCirclePaint.setColor(Color.LTGRAY);
mBigCirclePaint.setAntiAlias(true);
mBigCirclePaint.setStrokeWidth(5);
mSmallCirclePaint.setStrokeWidth(5);
mSmallCirclePaint.setAntiAlias(true);
mSmallCirclePaint.setColor(Color.WHITE);
mSmallCirclePaint.setStyle(Paint.Style.FILL);
mMiddenCirclePaint.setStrokeWidth(5);
mMiddenCirclePaint.setAntiAlias(true);
mMiddenCirclePaint.setColor(Color.LTGRAY);
mMiddenCirclePaint.setStyle(Paint.Style.FILL);
mAngleCirclePaint.setStrokeWidth(5);
mAngleCirclePaint.setAntiAlias(true);
mAngleCirclePaint.setColor(mAnnulusColor);
mAngleCirclePaint.setStyle(Paint.Style.FILL);
...//這里是長(zhǎng)按監(jiān)聽(tīng)
}(四)onMeasure中測(cè)量大小，onDraw中繪制圓與扇形，代碼如下：
onMeasure中，如果沒(méi)有定義實(shí)際寬高就會(huì)使用父組件的寬高，如果有實(shí)際寬高便會(huì)使用自己的寬高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidthSize = MeasureSpec.getSize(widthMeasureSpec);
setMeasuredDimension(mWidthSize, mWidthSize);
}onDraw中，一共有三層圓形填充繪制以及一層扇形填充繪制，先繪制最外層的灰色圓形，再根據(jù)此時(shí)的進(jìn)度繪制一定角度的扇形，然后覆蓋一層灰色的圓形，最后在覆蓋上一層白色的中心圓，并且在繪制過(guò)程以及繪制結(jié)束時(shí)的中心圓半徑不同。代碼如下：
@Override
protected void onDraw(Canvas canvas) {
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2, mBigCirclePaint);//最外層的填充圓
RectF rectF = new RectF(0, 0, mWidthSize, mWidthSize);//進(jìn)度扇形
if (mCount.get() > 0) {
//求出每一次定時(shí)器執(zhí)行所繪制的扇形度數(shù)
float perAngle = 360f / mMaxSeconds / (1000f / mDelayMilliseconds);
canvas.drawArc(rectF, 0, perAngle * mCount.get(), true, mAngleCirclePaint);
}
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mMiddenCirclePaint);//中間一層灰色的圓
//最后繪制中心圓
if (mIsFinish) {
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mSmallCirclePaint);
} else {
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 8, mSmallCirclePaint);
}
super.onDraw(canvas);
}（五）監(jiān)聽(tīng)長(zhǎng)按監(jiān)聽(tīng)開(kāi)始定時(shí)器并刷新畫(huà)布，監(jiān)聽(tīng)觸摸事件進(jìn)行結(jié)束的回調(diào)，定時(shí)器使用的是Timer類(lèi)，當(dāng)時(shí)間超過(guò)自定義的最大秒數(shù)時(shí)就會(huì)自動(dòng)停止，并定時(shí)刷新畫(huà)布,代碼如下:
this.setOnLongClickListener(new OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
mIsFinish = false;
mCount.set(0);
mTimer = new Timer();
mTimer.schedule(new TimerTask() {
@Override
public void run() {
mCount.addAndGet(1);
invalidate();
if (mCount.get() * mDelayMilliseconds >= mMaxSeconds * 1000) {
mCount.set(0);
this.cancel();
invalidate();
mIsFinish = true;
if (mMyClickListener != null) {
mMyClickListener.longClickFinish();
}
}
}
}, 0, mDelayMilliseconds);
return true;
}
}); @Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
mEndTime = System.currentTimeMillis();
new MyAsyncTask().execute();
} else if (event.getAction() == MotionEvent.ACTION_DOWN) {
mStartTime = System.currentTimeMillis();
}
return super.onTouchEvent(event);
}將定時(shí)器停止與停止后的判斷邏輯放在A(yíng)syncTask中編寫(xiě)，確保定時(shí)器不會(huì)繼續(xù)處理邏輯之后再做判斷
public class MyAsyncTask extends AsyncTask<Void, Void, Void> {
@Override
protected Void doInBackground(Void... voids) {
if (mTimer != null) {
mTimer.cancel();
}
return null;
}
@Override
protected void onPostExecute(Void aVoid) {
//使用時(shí)間戳的差來(lái)判斷是單擊或者長(zhǎng)按
if (mEndTime - mStartTime > 1000) {
//防止在自動(dòng)結(jié)束后松開(kāi)手指又重新調(diào)用了一次長(zhǎng)按結(jié)束的回調(diào)
if (!mIsFinish) {
if (mMyClickListener != null) {
mMyClickListener.longClickFinish();
}
}
} else {
//若是單擊就清除進(jìn)度條
mCount.set(0);
invalidate();
if (mMyClickListener != null) {
mMyClickListener.singleClickFinish();
}
}
mIsFinish = true;
}
}
結(jié)束后的回調(diào)類(lèi)代碼如下:
public interface MyClickListener {
void longClickFinish();//長(zhǎng)按結(jié)束
void singleClickFinish();//單擊結(jié)束
}最后，完整的代碼如下，自定義屬性上方有貼出來(lái)代碼：
public class LongClickView extends View {
public int DEFAULT_MAX_SECONDS = 15;
public int DEFAULT_ANNULUS_WIDTH = 5;
public int DEFAULT_ANNULUS_COLOR;
public int DEFAULT_RATE = 50;
private Paint mSmallCirclePaint;
private Paint mMiddenCirclePaint;
private Paint mBigCirclePaint;
private Paint mAngleCirclePaint;
private int mWidthSize;
private Timer mTimer;//計(jì)時(shí)器
private AtomicInteger mCount = new AtomicInteger(0);
private MyClickListener mMyClickListener;
private boolean mIsFinish = true;
private long mStartTime;//點(diǎn)擊的時(shí)間
private long mEndTime;//點(diǎn)擊結(jié)束的時(shí)間
private int mMaxSeconds;
private int mDelayMilliseconds;
private int mAnnulusColor;
private float mAnnulusWidth;
public interface MyClickListener {
void longClickFinish();//長(zhǎng)按結(jié)束
void singleClickFinish();//單擊結(jié)束
}
public void setMyClickListener(MyClickListener myClickListener) {
mMyClickListener = myClickListener;
}
public LongClickView(Context context) {
this(context, null);
}
public LongClickView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LongClickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
getAttrs(context, attrs);
initView();
}
private void getAttrs(Context context, @Nullable AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LongClickView);
//maxSeconds 最大的秒數(shù)
mMaxSeconds = typedArray.getInt(R.styleable.LongClickView_maxSeconds, DEFAULT_MAX_SECONDS);
//annulusWidth 圓環(huán)的寬度
mAnnulusWidth = typedArray.getInt(R.styleable.LongClickView_annulusWidth, DEFAULT_ANNULUS_WIDTH);
//annulusColor 圓環(huán)的顏色
DEFAULT_ANNULUS_COLOR = context.getResources().getColor(R.color.color_grey);
mAnnulusColor = typedArray.getColor(R.styleable.LongClickView_annulusColor, DEFAULT_ANNULUS_COLOR);
//delayMilliseconds 進(jìn)度條隔多少時(shí)間走一次,值越小走的越快，顯得更流暢
mDelayMilliseconds = typedArray.getInt(R.styleable.LongClickView_delayMilliseconds, DEFAULT_RATE);
}
private static final String TAG = "LongClickView";
private void initView() {
mBigCirclePaint = new Paint();
mSmallCirclePaint = new Paint();
mMiddenCirclePaint = new Paint();
mAngleCirclePaint = new Paint();
mBigCirclePaint.setStyle(Paint.Style.FILL);
mBigCirclePaint.setColor(Color.LTGRAY);
mBigCirclePaint.setAntiAlias(true);
mBigCirclePaint.setStrokeWidth(5);
mSmallCirclePaint.setStrokeWidth(5);
mSmallCirclePaint.setAntiAlias(true);
mSmallCirclePaint.setColor(Color.WHITE);
mSmallCirclePaint.setStyle(Paint.Style.FILL);
mMiddenCirclePaint.setStrokeWidth(5);
mMiddenCirclePaint.setAntiAlias(true);
mMiddenCirclePaint.setColor(Color.LTGRAY);
mMiddenCirclePaint.setStyle(Paint.Style.FILL);
mAngleCirclePaint.setStrokeWidth(5);
mAngleCirclePaint.setAntiAlias(true);
mAngleCirclePaint.setColor(mAnnulusColor);
mAngleCirclePaint.setStyle(Paint.Style.FILL);
this.setOnLongClickListener(new OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
mIsFinish = false;
mCount.set(0);
mTimer = new Timer();
mTimer.schedule(new TimerTask() {
@Override
public void run() {
mCount.addAndGet(1);
invalidate();
if (mCount.get() * mDelayMilliseconds >= mMaxSeconds * 1000) {
mCount.set(0);
this.cancel();
invalidate();
mIsFinish = true;
if (mMyClickListener != null) {
mMyClickListener.longClickFinish();
}
}
}
}, 0, mDelayMilliseconds);
return true;
}
});
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidthSize = MeasureSpec.getSize(widthMeasureSpec);
setMeasuredDimension(mWidthSize, mWidthSize);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2, mBigCirclePaint);//最外層的填充圓
RectF rectF = new RectF(0, 0, mWidthSize, mWidthSize);//進(jìn)度扇形
if (mCount.get() > 0) {
//求出每一次定時(shí)器執(zhí)行所繪制的扇形度數(shù)
float perAngle = 360f / mMaxSeconds / (1000f / mDelayMilliseconds);
canvas.drawArc(rectF, 0, perAngle * mCount.get(), true, mAngleCirclePaint);
}
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mMiddenCirclePaint);//中間一層灰色的圓
//最后繪制中心圓
if (mIsFinish) {
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mSmallCirclePaint);
} else {
canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 8, mSmallCirclePaint);
}
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
mEndTime = System.currentTimeMillis();
new MyAsyncTask().execute();
} else if (event.getAction() == MotionEvent.ACTION_DOWN) {
mStartTime = System.currentTimeMillis();
}
return super.onTouchEvent(event);
}
public class MyAsyncTask extends AsyncTask<Void, Void, Void> {
@Override
protected Void doInBackground(Void... voids) {
if (mTimer != null) {
mTimer.cancel();
}
return null;
}
@Override
protected void onPostExecute(Void aVoid) {
//使用時(shí)間戳的差來(lái)判斷是單擊或者長(zhǎng)按
if (mEndTime - mStartTime > 1000) {
//防止在結(jié)束后松開(kāi)手指有重新調(diào)用了一次長(zhǎng)按結(jié)束的回調(diào)
if (!mIsFinish) {
if (mMyClickListener != null) {
mMyClickListener.longClickFinish();
}
}
} else {
mCount.set(0);
invalidate();
if (mMyClickListener != null) {
mMyClickListener.singleClickFinish();
}
}
mIsFinish = true;
}
}
}使用的代碼如下：
activity_long_click_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<com.example.customerview.long_click_view.LongClickView
android:id="@+id/long_click_view"
android:layout_width="100dp"
android:layout_height="wrap_content"
app:annulusColor="@color/color_2196F3"
app:annulusWidth="20"
app:delayMilliseconds="40"
app:maxSeconds="4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="長(zhǎng)按錄制視頻，單擊拍照"
android:textColor="@color/colorBlack"
android:textSize="20dp" />
</LinearLayout>LongClickViewActivity.java
mLongClickView.setMyClickListener(new LongClickView.MyClickListener() {
@Override
public void longClickFinish() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LongClickViewActivity.this, "長(zhǎng)按結(jié)束", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void singleClickFinish() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LongClickViewActivity.this, "單擊結(jié)束", Toast.LENGTH_SHORT).show();
}
});
}
});到此這篇關(guān)于A(yíng)ndroid自定義帶有圓形進(jìn)度條的可長(zhǎng)按控件功能的文章就介紹到這了,更多相關(guān)Android圓形進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android多線(xiàn)程斷點(diǎn)續(xù)傳下載實(shí)現(xiàn)代碼
這篇文章主要介紹了Android多線(xiàn)程斷點(diǎn)續(xù)傳下載實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Android 如何修改APK的默認(rèn)名稱(chēng)
這篇文章主要介紹了Android 如何修改APK的默認(rèn)名稱(chēng)的相關(guān)資料,需要的朋友可以參考下2017-02-02
Android實(shí)現(xiàn)TextView中文字鏈接的4種方式介紹及代碼
Android實(shí)現(xiàn)TextView中文字鏈接的方式有很多種;總結(jié)起來(lái)大概有4種:用Spannable或?qū)崿F(xiàn)它的類(lèi)，如SpannableString來(lái)格式，部分字符串等等，感興趣的你可以參考下2013-02-02
這篇文章主要介紹了Android自定義組件ListPopWindow的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)NFC讀取校園卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Android Socket實(shí)現(xiàn)多個(gè)客戶(hù)端即時(shí)通信聊天
這篇文章主要為大家詳細(xì)介紹了Android Socket實(shí)現(xiàn)多個(gè)客戶(hù)端即時(shí)通信聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
超簡(jiǎn)單的幾行代碼搞定Android底部導(dǎo)航欄功能
這篇文章主要介紹了超簡(jiǎn)單的幾行代碼搞定Android底部導(dǎo)航欄功能,需要的朋友可以參考下2018-03-03
Android使用BottomNavigationBar實(shí)現(xiàn)底部導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Android使用BottomNavigationBar實(shí)現(xiàn)底部導(dǎo)航欄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
android PopupWindow 和 Activity彈出窗口實(shí)現(xiàn)方式
本人小菜一個(gè)。目前只見(jiàn)過(guò)兩種彈出框的實(shí)現(xiàn)方式，第一種是最常見(jiàn)的PopupWindow，第二種也就是Activity的方式是前幾天才見(jiàn)識(shí)過(guò),需要的朋友可以參考下2012-11-11
Jetpack?Compose對(duì)比React?Hooks?API相似度
這篇文章主要為大家介紹了Jetpack?Compose對(duì)比React?Hooks?API相似度，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08