2. 程式人生 > >Android 自定義View之仿華為圓形載入進度條

Android 自定義View之仿華為圓形載入進度條

阿新 • • 發佈：2019-01-23

效果圖

這裡寫圖片描述

實現思路

可以看出該View可分為三個部分來實現

  • 最外圍的圓，該部分需要區分進度圓和底部的刻度圓，進度部分的刻度需要和底色刻度區分開來
  • 中間顯示的文字進度，需要讓文字在View中居中顯示
  • 旋轉的小圓點，小圓點需要模擬小球下落運動時的加速度效果，開始下落的時候慢，到最底部時最快，上來時速度再逐漸減慢

具體實現

先具體細分講解，部落格最後面給出全部原始碼

（1）首先為View建立自定義的xml屬性
在工程的values目錄下新建attrs.xml檔案

<resources>
    <!-- 仿華為圓形載入進度條 -->
    <declare-styleable
 
 name="CircleLoading">
        <attr name="indexColor" format="color"/>
        <attr name="baseColor" format="color"/>
        <attr name="dotColor" format="color"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color"/>
    </declare-styleable
 
>
</resources>

各個屬性的作用：

  • indexColor：進度圓的顏色
  • baseColor：刻度圓底色
  • dotColor：小圓點顏色
  • textSize：文字大小
  • textColor：文字顏色

（2）新建CircleLoadingView類繼承View類，重寫它的三個構造方法，獲取使用者設定的屬性，同時指定預設值

    public CircleLoadingView(Context context) {
        this(context, null);
    }

    public CircleLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0
 
);
    }

    public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 獲取使用者配置屬性
        TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
        baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
        indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
        textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
        dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
        textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
        tya.recycle();

        initUI();
    }

我們從View繪製的第一步開始
（3）測量onMeasure，首先需要測量出View的寬和高，並指定View在wrap_content時的最小範圍，對於View繪製流程還不熟悉的同學，可以先去了解下具體的繪製流程

重寫onMeasure方法，其中我們要考慮當View的寬高被指定為wrap_content時的情況，如果我們不對wrap_content的情況進行處理，那麼當使用者指定View的寬高為wrap_content時將無法正常顯示出View

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        // 獲取寬
        if (myWidthSpecMode == MeasureSpec.EXACTLY) {
            // match_parent/精確值
            mWidth = myWidthSpecSize;
        } else {
            // wrap_content
            mWidth = DensityUtil.dip2px(mContext, 120);
        }

        // 獲取高
        if (myHeightSpecMode == MeasureSpec.EXACTLY) {
            // match_parent/精確值
            mHeight = myHeightSpecSize;
        } else {
            // wrap_content
            mHeight = DensityUtil.dip2px(mContext, 120);
        }

        // 設定該view的寬高
        setMeasuredDimension(mWidth, mHeight);
    }

MeasureSpec的狀態分為三種EXACTLY、AT_MOST、UNSPECIFIED，這裡只要單獨指定非精確值EXACTLY之外的情況就好了
本文中使用到的DensityUtil類，是為了將dp轉換為px來使用，以便適配不同的螢幕顯示效果

    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

（4）重寫onDraw，繪製需要顯示的內容
因為做的是單純的View而不是ViewGroup，內部沒有子控制元件需要確定位置，所以可直接跳過onLayout方法，直接開始對View進行繪製
分為三個部分繪製，繪製刻度圓，繪製文字值，繪製旋轉小圓點

    @Override
    protected void onDraw(Canvas canvas) {
        drawArcScale(canvas);
        drawTextValue(canvas);
        drawRotateDot(canvas);
    }
  • 繪製刻度圓

先畫一個小豎線，通過canvas.rotate()方法每次旋轉3.6度（總共360度，用100/360=3.6）得到一個刻度為100的圓，然後通過progress引數，得到要顯示的進度數，並把小於progress的刻度變成進度圓的顏色

    /**
     * 畫刻度
     */
    private void drawArcScale(Canvas canvas) {
        canvas.save();

        for (int i = 0; i < 100; i++) {
            if (progress > i) {
                mScalePaint.setColor(indexColor);
            } else {
                mScalePaint.setColor(baseColor);
            }
            canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
            // 旋轉的度數 = 100 / 360
            canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
        }

        canvas.restore();
    }
  • 繪製中間文字

文字繪製的座標是以文字的左下角開始繪製的，所以需要先通過把文字裝載到一個矩形Rect，通過畫筆的getTextBounds方法取得字串的長度和寬度，通過動態計算，來使文字居中顯示

    /**
     * 畫內部數值
     */
    private void drawTextValue(Canvas canvas) {
        canvas.save();

        String showValue = String.valueOf(progress);
        Rect textBound = new Rect();
        mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound);    // 獲取文字的矩形範圍
        float textWidth = textBound.right - textBound.left;  // 獲得文字寬
        float textHeight = textBound.bottom - textBound.top; // 獲得文字高
        canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);

        canvas.restore();
    }
  • 繪製旋轉小圓點

這個小圓點就是簡單的繪製一個填充的圓形就好

    /**
     * 畫旋轉小圓點
     */
    private void drawRotateDot(final Canvas canvas) {
        canvas.save();

        canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
        canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);

        canvas.restore();
    }

讓它自己動起來可以通過兩種方式，一種是開一個執行緒，線上程中改變mDotProgress的數值，並通過postInvalidate方法跨執行緒重新整理View的顯示效果

        new Thread() {
            @Override
            public void run() {
                while (true) {
                    mDotProgress++;
                    if (mDotProgress == 100) {
                        mDotProgress = 0;
                    }
                    postInvalidate();
                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();

開執行緒的方式不推薦使用，這是沒必要的開銷，而且執行緒不好控制，要實現讓小圓點在執行過程中開始和結束時慢，運動到中間時加快這種效果不好實現，所以最好的方式是使用屬性動畫，需要讓小圓點動起來時，呼叫以下方法就好了

    /**
     * 啟動小圓點旋轉動畫
     */
    public void startDotAnimator() {
        animator = ValueAnimator.ofFloat(0, 100);
        animator.setDuration(1500);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 設定小圓點的進度，並通知介面重繪
                mDotProgress = (Float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.start();
    }

在屬性動畫中可以通過setInterpolator方法指定不同的插值器，這裡要模擬小球掉下來的重力效果，所以需要使用AccelerateDecelerateInterpolator插值類，該類的效果就是在動畫開始時和結束時變慢，中間加快

（5）設定當前進度值
對外提供一個方法，用來更新當前圓的進度

    /**
     * 設定進度
     */
    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

通過外部呼叫setProgress方法就可以跟更新當前圓的進度了

原始碼

/**
 * 仿華為圓形載入進度條
 * Created by zhuwentao on 2017-08-19.
 */
public class CircleLoadingView extends View {

    private Context mContext;

    // 刻度畫筆
    private Paint mScalePaint;

    // 小原點畫筆
    private Paint mDotPaint;

    // 文字畫筆
    private Paint mTextPaint;

    // 當前進度
    private int progress = 0;

    /**
     * 小圓點的當前進度
     */
    public float mDotProgress;

    // View寬
    private int mWidth;

    // View高
    private int mHeight;

    private int indexColor;

    private int baseColor;

    private int dotColor;

    private int textSize;

    private int textColor;

    private ValueAnimator animator;

    public CircleLoadingView(Context context) {
        this(context, null);
    }

    public CircleLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 獲取使用者配置屬性
        TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
        baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
        indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
        textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
        dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
        textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
        tya.recycle();

        initUI();
    }

    private void initUI() {
        mContext = getContext();

        // 刻度畫筆
        mScalePaint = new Paint();
        mScalePaint.setAntiAlias(true);
        mScalePaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
        mScalePaint.setStrokeCap(Paint.Cap.ROUND);
        mScalePaint.setColor(baseColor);
        mScalePaint.setStyle(Paint.Style.STROKE);

        // 小圓點畫筆
        mDotPaint = new Paint();
        mDotPaint.setAntiAlias(true);
        mDotPaint.setColor(dotColor);
        mDotPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
        mDotPaint.setStyle(Paint.Style.FILL);

        // 文字畫筆
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(textColor);
        mTextPaint.setTextSize(textSize);
        mTextPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
        mTextPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawArcScale(canvas);
        drawTextValue(canvas);
        drawRotateDot(canvas);
    }

    /**
     * 畫刻度
     */
    private void drawArcScale(Canvas canvas) {
        canvas.save();

        for (int i = 0; i < 100; i++) {
            if (progress > i) {
                mScalePaint.setColor(indexColor);
            } else {
                mScalePaint.setColor(baseColor);
            }
            canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
            // 旋轉的度數 = 100 / 360
            canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
        }

        canvas.restore();
    }

    /**
     * 畫內部數值
     */
    private void drawTextValue(Canvas canvas) {
        canvas.save();

        String showValue = String.valueOf(progress);
        Rect textBound = new Rect();
        mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound);    // 獲取文字的矩形範圍
        float textWidth = textBound.right - textBound.left;  // 獲得文字寬
        float textHeight = textBound.bottom - textBound.top; // 獲得文字高
        canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);

        canvas.restore();
    }

    /**
     * 畫旋轉小圓點
     */
    private void drawRotateDot(final Canvas canvas) {
        canvas.save();

        canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
        canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);

        canvas.restore();
    }

    /**
     * 啟動小圓點旋轉動畫
     */
    public void startDotAnimator() {
        animator = ValueAnimator.ofFloat(0, 100);
        animator.setDuration(1500);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 設定小圓點的進度，並通知介面重繪
                mDotProgress = (Float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.start();
    }

    /**
     * 設定進度
     */
    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        // 獲取寬
        if (myWidthSpecMode == MeasureSpec.EXACTLY) {
            // match_parent/精確值
            mWidth = myWidthSpecSize;
        } else {
            // wrap_content
            mWidth = DensityUtil.dip2px(mContext, 120);
        }

        // 獲取高
        if (myHeightSpecMode == MeasureSpec.EXACTLY) {
            // match_parent/精確值
            mHeight = myHeightSpecSize;
        } else {
            // wrap_content
            mHeight = DensityUtil.dip2px(mContext, 120);
        }

        // 設定該view的寬高
        setMeasuredDimension(mWidth, mHeight);
    }
}

總結

  • 在的onDraw方法中需要避免頻繁的new物件，所以把一些如初始化畫筆Paint的方法放到了最前面的構造方法中進行。

  • 在分多個模組繪製時，應該使用canvas.save()和canvas.restore()的組合，來避免不同模組繪製時的相互干擾，在這兩個方法中繪製相當於PS中的圖層概念，上一個圖層進行的修改不會影響到下一個圖層的顯示效果。

  • 在需要顯示動畫效果的地方使用屬性動畫來處理，可自定義的效果強，在系統提供的插值器類不夠用的情況下，我麼還可通過繼承Animation類，重寫它的applyTransformation方法來處理各種複雜的動畫效果。

相關推薦

Android 自定義View之仿華為圓形載入進度條

效果圖 實現思路 可以看出該View可分為三個部分來實現 最外圍的圓，該部分需要區分進度圓和底部的刻度圓，進度部分的刻度需要和底色刻度區分開來 中間顯示的文字進度，需要讓文字在View中居中顯示 旋轉的小圓點，小圓點需要模擬小球下落運動時的加速度

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之仿QQ側滑選單實現

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。 下面先放上效果圖： 我們這裡的側

Android自定義View之仿京東售後稽核進度

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 概述：同常在做商城類的App時，都會有售後的需求，而售後流程通常會因為不同的業務，而分為不確定的幾個步驟，如下圖所示： 那麼問題就來了，像這樣的效果如何實現呢？讓我們先放下這個問題，先看

Android 自定義View,繪製一個帶比例的環形進度條

最近專案有一個需求，要在首頁顯示三個環形餅狀圖，要求可以顯示比例大小，中間顯示文字部分，並且需要可以自定義顏色。設計圖如下： 思路： 繪製一個帶百分比的圓環，一共分了四個部分： 1.背景圓（就是底圖圓） 2.預設圓環 3.繪製的圓環（就是比例圓環） 4.中心文字 下面我們開始進行繪製，先準

Android自定義View：水平帶數字百分比的進度條

public class NumberProgressView extends View { /** * 進度條畫筆的寬度（dp） */ private int paintProgressWidth = 3; /** * 文字百分比的字型大小（sp）

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。 二：實現思路 自定義view，實現效果 動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成 預設選

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧 效果 大概思路 自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子 處理煙霧動畫效果 畫杯子 這裡需要畫兩部分內容，第

Android 自定義View之下雨動畫

文章目錄效果思路畫雲畫雨滴優化 效果 開始前先做個熱身( ˘•灬•˘ ) 自己實現比較容易，但是到了要出部落格整理思路，總結要點的時候就撓頭，不知雲所以，所以最簡單的還是 如果對安卓UI有興趣的朋友可以加我好友互相探討， 思路 思路比較簡單，整個view無

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

android自定義view之畫圓隨著手指移動

public class MyView extends View { private Paint mFanPaint,mTextPaint;//扇形畫筆和文字畫筆 public float AxisX=100; public float AxisY=100; public MyView(