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類，當(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í)器停止與停止后的判斷邏輯放在AsyncTask中編寫(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)類代碼如下:

   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)于Android自定義帶有圓形進(jìn)度條的可長(zhǎng)按控件功能的文章就介紹到這了,更多相關(guān)Android圓形進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: