2. 程式人生 > >Android自定義View——從零開始實現圓形進度條

Android自定義View——從零開始實現圓形進度條

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

前言：以前老是用別人造的輪子，知其然不知其所以然，有時看懂了別人寫的過多幾個月又忘了，遂來開個坑把一步步實現和思路寫下來，弄成一個系列。由於上班時間不多，爭取一週擼個一到兩篇出來

本篇只著重於思路和實現步驟，裡面用到的一些知識原理不會非常細地拿來講，如果有不清楚的api或方法可以在網上搜下相應的資料，肯定有大神講得非常清楚的，我這就不獻醜了。本著認真負責的精神我會把相關知識的博文連結也貼出來（其實就是懶不想寫那麼多哈哈），大家可以自行傳送

效果展示

目錄
  • 繪製一個圓弧
  • 為圓弧新增動畫效果
  • 測量及自適應圓形進度條View的寬高
  • 自定義attr屬性
  • 實現可跟隨進度條進度變化的文字效果
  • 實現進度條顏色漸變動畫

繪製一個圓弧

本著先寫後優化的思想，怎麼簡單怎麼來，像引數定義，自定義View大小適配什麼的都先不去管，後面再慢慢填坑，我們就先簡單畫一個圓弧（為了更好地觀察圓弧的繪製區域，我們會將繪製圓弧的矩形區域畫出來）。程式碼如下

public class CircleBarView extends View {

    private Paint rPaint;//繪製矩形的畫筆
    private Paint progressPaint;//繪製圓弧的畫筆

    public CircleBarView(Context context, AttributeSet attrs) {
        super
 
(context, attrs);
        init(context,attrs);
    }

    private void init(Context context,AttributeSet attrs){
        rPaint = new Paint();
        rPaint.setStyle(Paint.Style.STROKE);//只描邊，不填充
        rPaint.setColor(Color.RED);

        progressPaint = new Paint();
        progressPaint.setStyle(Paint.Style.STROKE);//只描邊，不填充
 

        progressPaint.setColor(Color.BLUE);
        progressPaint.setAntiAlias(true);//設定抗鋸齒
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float x = 50;
        float y = 50;
        RectF rectF = new RectF(x,y,x+300,y+300);//建一個大小為300 * 300的正方形區域

        canvas.drawArc(rectF,0,270,false,progressPaint);//這裡角度0對應的是三點鐘方向，順時針方向遞增
        canvas.drawRect(rectF,rPaint);
    }
}

介面佈局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <com.anlia.progressbar.CircleBarView
            android:id="@+id/circle_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

在Activity中進行註冊

circleBarView = (CircleBarView)findViewById(R.id.circle_view);

效果如圖

為圓弧新增動畫效果

我們需要給圓弧的繪製加上一個動畫效果，這裡主要用到Animation方面的知識，我們改下之前的CircleBarView程式碼

private float sweepAngle;//圓弧經過的角度

private void init(Context context,AttributeSet attrs){
    //省略部分程式碼...
    anim = new CircleAnim();
}

@Override
protected void onDraw(Canvas canvas) {
    //省略部分程式碼...
    canvas.drawArc(rectF,0,sweepAngle,false,progressPaint);
}

public class CircleBarAnim extends Animation{

    public CircleBarAnim(){
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        sweepAngle = interpolatedTime * 360;
        postInvalidate();
    }
}

//寫個方法給外部呼叫，用來設定動畫時間
public void setProgressNum(int time) {
    anim.setDuration(time);
    this.startAnimation(anim);
}

在Activity中呼叫setProgressNum()方法

circleBarView.setProgressNum(3000);//設定動畫時間為3000毫秒，即3秒

效果如圖

新增背景圓弧

根據我們最終實現的效果圖，我們還需要繪製一個完整的圓弧作為進度條圓弧的背景，同時我們需要修改一下之前的setProgressNum()方法，將當前進度條的值作為引數傳進去，以便計算進度條繪製的角度，繼續改我們之前的CircleBarView程式碼

private Paint bgPaint;//繪製背景圓弧的畫筆

private float progressNum;//可以更新的進度條數值
private float maxNum;//進度條最大值

private float progressSweepAngle;//進度條圓弧掃過的角度
private float startAngle;//背景圓弧的起始角度
private float sweepAngle;//背景圓弧掃過的角度

private void init(Context context,AttributeSet attrs){
    //省略部分程式碼...
    progressPaint = new Paint();
    progressPaint.setStyle(Paint.Style.STROKE);//只描邊，不填充
    progressPaint.setColor(Color.GREEN);
    progressPaint.setAntiAlias(true);//設定抗鋸齒
    progressPaint.setStrokeWidth(15);//隨便設定一個畫筆寬度，看看效果就好，之後會通過attr自定義屬性進行設定

    bgPaint = new Paint();
    bgPaint.setStyle(Paint.Style.STROKE);//只描邊，不填充
    bgPaint.setColor(Color.GRAY);
    bgPaint.setAntiAlias(true);//設定抗鋸齒
    bgPaint.setStrokeWidth(15);

    progressNum = 0;
    maxNum = 100;//也是隨便設的

    startAngle = 0;
    sweepAngle = 360;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //省略部分程式碼...
    canvas.drawArc(rectF,startAngle,sweepAngle,false,bgPaint);
    canvas.drawArc(rectF,startAngle,progressSweepAngle,false,progressPaint);
}

public class CircleBarAnim extends Animation{

    public CircleBarAnim(){
    }
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        progressSweepAngle = interpolatedTime * sweepAngle * progressNum / maxNum;//這裡計算進度條的比例
        postInvalidate();
    }
}

public void setProgressNum(float progressNum, int time) {
    //省略部分程式碼...
    this.progressNum = progressNum;
}

在Activity中呼叫setProgressNum()方法

circleBarView.setProgressNum(100,3000);

效果如圖

測量及自適應圓形進度條View的寬高

在上面的程式碼中，View的寬高是由繪製圓弧的矩形區域大小決定的，直接寫死在了init()方法中，而我們的實際需求是View的寬高可以由我們在外部進行設定，且無論怎麼設定寬高View都應該是一個正方形（寬高相等），因此我們需要重寫View的onMeasure()方法

繼續修改我們的CircleBarView程式碼

private RectF mRectF;//繪製圓弧的矩形區域

private float barWidth;//圓弧進度條寬度
private int defaultSize;//自定義View預設的寬高

private void init(Context context,AttributeSet attrs){
    //省略部分程式碼...
    defaultSize = DpOrPxUtils.dip2px(context,100);
    barWidth = DpOrPxUtils.dip2px(context,10);
    mRectF = new RectF();

    progressPaint.setStrokeWidth(barWidth);

    bgPaint.setStrokeWidth(barWidth);
}

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

    int height = measureSize(defaultSize, heightMeasureSpec);
    int width = measureSize(defaultSize, widthMeasureSpec);
    int min = Math.min(width, height);// 獲取View最短邊的長度
    setMeasuredDimension(min, min);// 強制改View為以最短邊為長度的正方形

    if(min >= barWidth*2){//這裡簡單限制了圓弧的最大寬度
        mRectF.set(barWidth/2,barWidth/2,min-barWidth/2,min-barWidth/2);
    }

}

private int measureSize(int defaultSize,int measureSpec) {
    int result = defaultSize;
    int specMode = View.MeasureSpec.getMode(measureSpec);
    int specSize = View.MeasureSpec.getSize(measureSpec);

    if (specMode == View.MeasureSpec.EXACTLY) {
        result = specSize;
    } else if (specMode == View.MeasureSpec.AT_MOST) {
        result = Math.min(result, specSize);
    }
    return result;
}

其中用到了dp和px相互轉換的工具類（相關知識有興趣的可以自己上網搜下），這裡也將相關程式碼貼出來

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

自定義attr屬性

我們的View中有許多屬性需要在佈局檔案中進行設定，例如進度條顏色、寬度等等，這裡我們選取最基本的五個屬性（其餘的可根據需要另行擴充套件）：進度條圓弧顏色、背景圓弧顏色、起始角度、掃過的角度（可以理解為進度條的最大長度）、進度條寬度進行自定義

首先在res\values資料夾中新增attr.xml，為CircleBarView自定義屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--注意這裡的name要和自定義View的名稱一致，不然在佈局檔案中無法引用-->
    <declare-styleable name="CircleBarView">
        <attr name="progress_color" format="color"></attr>
        <attr name="bg_color" format="color"></attr>

        <attr name="bar_width" format="dimension"></attr>

        <attr name="start_angle" format="float"></attr>
        <attr name="sweep_angle" format="float"></attr>
    </declare-styleable>
</resources>

修改CircleBarView，為自定義屬性賦值

private int progressColor;//進度條圓弧顏色
private int bgColor;//背景圓弧顏色
private float startAngle;//背景圓弧的起始角度
private float sweepAngle;//背景圓弧掃過的角度
private float barWidth;//圓弧進度條寬度

private void init(Context context,AttributeSet attrs){
    //省略部分程式碼...
    TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CircleBarView);

    progressColor = typedArray.getColor(R.styleable.CircleBarView_progress_color,Color.GREEN);//預設為綠色
    bgColor = typedArray.getColor(R.styleable.CircleBarView_bg_color,Color.GRAY);//預設為灰色
    startAngle = typedArray.getFloat(R.styleable.CircleBarView_start_angle,0);//預設為0
    sweepAngle = typedArray.getFloat(R.styleable.CircleBarView_sweep_angle,360);//預設為360
    barWidth = typedArray.getDimension(R.styleable.CircleBarView_bar_width,DpOrPxUtils.dip2px(context,10));//預設為10dp
    typedArray.recycle();//typedArray用完之後需要回收，防止記憶體洩漏


    progressPaint.setColor(progressColor);
    progressPaint.setStrokeWidth(barWidth);

    bgPaint.setColor(bgColor);
    bgPaint.setStrokeWidth(barWidth);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawArc(mRectF,startAngle,sweepAngle,false,bgPaint);
    canvas.drawArc(mRectF,startAngle,progressSweepAngle,false, progressPaint);
}

在佈局檔案中設定自定義屬性試試效果

<!--省略部分程式碼-->
<RelativeLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <com.anlia.progressbar.CircleBarView
            app:start_angle="135"
            app:sweep_angle="270"
            app:progress_color="@color/red"
            app:bg_color="@color/gray_light"
            app:bar_width="20dp"/>
    </LinearLayout>
</RelativeLayout>

效果如圖

實現可跟隨進度條進度變化的文字效果

根據需求，我們需要顯示可以跟隨進度條進度變化的文字，網上許多實現的方法都是在自定義View中實現相應的文書處理邏輯，然後使用canvas.drawText()方法去繪製文字。我個人覺得這樣寫比較麻煩且可擴充套件性不高，下面提供另外一種思路供大家參考

我的做法是將條形進度條和文字顯示區分開來，文字顯示的元件直接在佈局檔案用TextView就可以了，將TextView傳入CircleBarView，然後在CircleBarView提供介面編寫文書處理的邏輯即可。這樣實現的好處在於後期我們要是想改變文字的字型、樣式、位置等等都不需要再在CircleBarView中傷筋動骨地去改，實現了文字與進度條解耦

具體實現如下，修改我們的CircleBarView

private TextView textView;
private OnAnimationListener onAnimationListener;
public class CircleBarAnim extends Animation{
    //省略部分程式碼...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        //省略部分程式碼...
        if(textView !=null && onAnimationListener!=null){
            textView.setText(onAnimationListener.howToChangeText(interpolatedTime,progressNum,maxNum));
        }
    }
}

/**
 * 設定顯示文字的TextView
 * @param textView
 */
public void setTextView(TextView textView) {
    this.textView = textView;
}

public interface OnAnimationListener {
    /**
     * 如何處理要顯示的文字內容
     * @param interpolatedTime 從0漸變成1,到1時結束動畫
     * @param progressNum 進度條數值
     * @param maxNum 進度條最大值
     * @return
     */
    String howToChangeText(float interpolatedTime, float progressNum, float maxNum);
}

然後在Activity中呼叫介面

circleBarView.setOnAnimationListener(new CircleBarView.OnAnimationListener() {
    @Override
    public String howToChangeText(float interpolatedTime, float progressNum, float maxNum) {
        DecimalFormat decimalFormat=new DecimalFormat("0.00");
        String s = decimalFormat.format(interpolatedTime * progressNum / maxNum * 100) + "%";
        return s;
    }
});
circleBarView.setProgressNum(80,3000);

佈局檔案也相應修改

<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp">
    <com.anlia.progressbar.CircleBarView
        android:id="@+id/circle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        app:start_angle="135"
        app:sweep_angle="270"
        app:progress_color="@color/red"
        app:bg_color="@color/gray_light"
        app:bar_width="8dp"/>
    <TextView
        android:id="@+id/text_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

來看下效果


其他文字效果也只需要改改佈局檔案就好

這裡只是簡單地提供一點思路，如果大家有更復雜的需求在此基礎上擴充套件介面即可

實現進度條顏色漸變動畫

在上一點的基礎上稍微做點延伸，實現進度條的顏色漸變動畫，這裡的顏色線性漸變演算法由@Aaron_cxx提供，大家如果對顏色漸變演算法感興趣的可以看下這位大大的部落格

下面繼續改我們的CircleBarView，這裡只要稍微擴充套件一下我們的OnAnimationListener介面即可

public interface OnAnimationListener {
    //省略部分程式碼...
    /**
     * 如何處理進度條的顏色
     * @param paint 進度條畫筆
     * @param interpolatedTime 從0漸變成1,到1時結束動畫
     * @param progressNum 進度條數值
     * @param maxNum 進度條最大值
     */
    void howTiChangeProgressColor(Paint paint, float interpolatedTime, float progressNum, float maxNum);
}

//記得在我們的動畫中呼叫howTiChangeProgressColor
public class CircleBarAnim extends Animation{
    //省略部分程式碼...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        //省略部分程式碼...
        onAnimationListener.howTiChangeProgressColor(progressPaint,interpolatedTime,progressNum,maxNum);
    }
}

同樣的，在Activity中編寫相應的邏輯

circleBarView.setOnAnimationListener(new CircleBarView.OnAnimationListener() {
    //省略部分程式碼...
    @Override
    public void howTiChangeProgressColor(Paint paint, float interpolatedTime, float progressNum, float maxNum) {
        LinearGradientUtil linearGradientUtil = new LinearGradientUtil(Color.YELLOW,Color.RED);
        paint.setColor(linearGradientUtil.getColor(interpolatedTime));
    }
});

效果如圖

至此本篇從零開始實現的教程就告一段落了，如果大家看了感覺還不錯麻煩點個贊，你們的支援是我最大的動力~要是小夥伴們想要擴充套件一些新的功能，也可以在評論區給我留言，我有空會把新功能的實現教程更新上去

相關推薦

Android自定義View——從零開始實現圓形進度條

前言：以前老是用別人造的輪子，知其然不知其所以然，有時看懂了別人寫的過多幾個月又忘了，遂來開個坑把一步步實現和思路寫下來，弄成一個系列。由於上班時間不多，爭取一週擼個一到兩篇出來 本篇只著重於思路和實現步驟，裡面用到的一些知識原理不會非常細地拿來講，如

Android自定義View——從零開始實現水波浪進度框

前言：相信同行們都知道，我們程式設計師有一種痛，叫做別人的程式碼。讀懂別人的程式碼很重要的一點就是要抓住作者的思路，有了思路才能將過程推匯出來，否則腦闊會疼。為己為人，本系列教程部落格，我都會將自己實現的思路寫下來，帶大家一步步從零開始實現我們想要的效果

Android自定義View——從零開始實現雪花飄落效果

前言：轉眼已是十一月下旬了，天氣慢慢轉冷，不知道北方是不是已經開始下雪了呢？本期教程我們就順應季節主題，一起來實現 雪花飄落的效果吧。本篇效果思路參考自國外大神的Android實現雪花飛舞效果，並在此基礎上實現進一步的封裝和功能擴充套件 本篇只著重於思路和

Android自定義View初體驗，實現圓形TextView的三種方式

自定義view對我來說一直是比較恐懼的，但是萬事開頭難，今天總結一下自己實現圓形TextView的三種方式。 首先來說一下自定義view的三種方式： 一，自繪控制元件： 自繪控制元件就是說介面展示的內容就是我們在ondraw（）方法中繪製出來的，繼承Vie

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果 通過繼承GridLayout實現的拖拽移位效果 首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implement

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果 通過繼承GridLayout實現的拖拽移位效果 首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implements

android 自定義View 儀表盤 DashboardView 的實現

有天上班，老闆突然扔給我一張圖， 說：這個東西能不能做一下。 我說應該可以。然後老闆那就沒有下文了，我想既然問了，那我就抽空做一下。 當我做出來的時候去找老闆，我說上次你給我發的那個圖，我已經做出來了，您要不要看一下。 老闆說，不用了，不需要了。

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

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

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

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

Android自定義控制元件之百分比圓環進度條

首先我們先來看一下效果 分析 我們來看這個進度條應該分為3個小部分 1.中間的圓 2.外邊的圓環 3.中間的文字 分開畫 這3部分就是需要我們自己畫出來的，因此我們需要3根畫筆 //設定中心園的畫筆

從零開始學Android自定義View之動畫系列——屬性動畫（3）

屬性動畫對補間動畫進行了很大幅度的改進，之前補間動畫可以做到的屬性動畫也能做到，補間動畫做不到的現在屬性動畫也可以做到了。因此，今天我們就來學習一下屬性動畫的高階用法，看看如何實現一些補間動畫所無法實現的功能。 ValueAnimator的高階用法 補間

Android自定義 view之圖片裁剪從設計到實現

android圖片剪下是常用的功能，因為部落格開發的是SDK不涉及到activity，所以就需要自定義裁剪功能，參閱了網上的大部分資料後，在github上一個封裝好的裁剪庫cropper，正好符合要求，本著拿來主義的思想，直接把原始碼clone嵌入到專案裡，然後

Android -- 自定義view實現keep歡迎頁倒計時效果

super onfinish -m use new getc awt ttr alt 1，最近打開keep的app的時候，發現它的歡迎頁面的倒計時效果還不錯，所以打算自己來寫寫，然後就有了這篇文章。 2，還是老規矩，先看一下我們今天實現的效果 　　相較於我們常見的倒計時

Android自定義View——實現水波紋效果類似剩余流量球

string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin

Android 自定義View-----流式佈局(粗糙實現)

//首先檢視一下佈局介面吧 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app

Android自定義view實現圖片選色器

https://www.jb51.net/article/141336.htm 這篇文章主要為大家詳細介紹了Android自定義view實現圖片選色器，具有一定的參考價值，感興趣的小夥伴們可以參考一下 簡介 本文介紹該自定義view的使用及實現的方法，主要實現以下幾個功能： - 選取

Android :自定義view實現簡易的轉盤

直接先上效果圖 xml裡面的程式碼 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

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

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

Android 自定義View實現拖拽效果

騰訊QQ有那種紅點拖動效果,今天就來實現一個簡單的自定義View拖動效果,再回到原處,並非完全仿QQ紅點拖動 先來看一下效果圖 簡單說一下實現步驟 1.建立一個類繼承View 2.繪製出一個

Android 自定義View小例項-實現繪製打折標籤

前言 許多商城APP都會有商品打折的需求，而為文字新增下劃線直接設定style就可以完成，我們在這裡說的如下圖，也就是我們demo實現的效果圖。 1. 選取自定義View的方法 我們都知道自定義View有多種方式，比如繼承自View、ViewGroup或者繼承自現有的View子