android自定義控制元件之圓形進度條（帶動畫）
阿新 • • 發佈：2019-01-05
首先貼上圖片：
額，感覺還行吧，就是進度條的顏色醜了點，不過咱是程式設計師，不是美工，配色這種問題當然不在考慮範圍之內了
下面說重點，如何來寫一個這樣的自定義控制元件。
首先，需要有一個灰色的底圖，來作為未填充時的進度條；
然後，根據傳入的當前進度值，繪製填充時的進度圓弧，這段圓弧所對應的圓心角，由當前進度與進度的最大值（一般是100）的比值計算得出；
其次，根據進度值繪製文字提示；
最後，重繪控制元件，加上動畫，從而達到顯示進度的效果。
程式碼如下：
1、attrs.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="circleProgressBar"> <attr name="circleWidth" format="dimension" /> <attr name="betaAngle" format="integer" /> <attr name="firstColor" format="color" /> <attr name="secondColor" format="color" /> </declare-styleable> </resources>
2、CircleProgressBar.java
package com.ctgu.circleprogressbar; import android.animation.ValueAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.Paint.FontMetricsInt; import android.graphics.Rect; import android.graphics.RectF; import android.graphics.Shader; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.view.animation.OvershootInterpolator; public class CircleProgressBar extends View { /** * 進度條最大值，預設為100 */ private int maxValue = 100; /** * 當前進度值 */ private int currentValue = 0; /** * 每次掃過的角度，用來設定進度條圓弧所對應的圓心角，alphaAngle=(currentValue/maxValue)*360 */ private float alphaAngle; /** * 底部圓弧的顏色，預設為Color.LTGRAY */ private int firstColor; /** * 進度條圓弧塊的顏色 */ private int secondColor; /** * 圓環的寬度 */ private int circleWidth; /** * 畫圓弧的畫筆 */ private Paint circlePaint; /** * 畫文字的畫筆 */ private Paint textPaint; /** * 漸變圓周顏色陣列 */ private int[] colorArray = new int[] { Color.parseColor("#27B197"), Color.parseColor("#00A6D5") };// /** * 通過程式碼建立時才使用 * * @param context */ public CircleProgressBar(Context context) { this(context, null); } /** * 當從xml中載入view的時候，這個構造器才會被呼叫。其第二個引數中就包含自定義的屬性。 * * @param context * 上下文 * @param attrs * 自定義屬性 */ public CircleProgressBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } /** * 從xml載入時執行和應用一個特定的風格。這裡有兩種方式，一是從theme中獲得，二是從style中獲得。 * 第三個引數官方有這樣的說明： defStyle - The default style to apply to this view. If 0, * no style will be applied (beyond what is included in the theme). This may * either be an attribute resource, whose value will be retrieved from the * current theme, or an explicit style resource. * 預設的風格會被應用到這個view上。如果是0，沒有風格將會被應用 * （除了被包含在主題中）。這個也許是一個屬性的資源，它的值是從當前的主題中檢索，或者是一個明確的風格資源。 * * @param context * 上下文 * @param attrs * 自定義的屬性 * @param defStyleAttr * 自定義風格 */ public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.circleProgressBar, defStyleAttr, 0); int n = ta.getIndexCount(); for (int i = 0; i < n; i++) { int attr = ta.getIndex(i); switch (attr) { case R.styleable.circleProgressBar_firstColor: firstColor = ta.getColor(attr, Color.LTGRAY); // 預設底色為亮灰色 break; case R.styleable.circleProgressBar_secondColor: secondColor = ta.getColor(attr, Color.BLUE); // 預設進度條顏色為藍色 break; case R.styleable.circleProgressBar_circleWidth: circleWidth = ta.getDimensionPixelSize(attr, (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 6, getResources().getDisplayMetrics())); // 預設圓弧寬度為6dp break; default: break; } } ta.recycle(); circlePaint = new Paint(); circlePaint.setAntiAlias(true); // 抗鋸齒 circlePaint.setDither(true); // 防抖動 circlePaint.setStrokeWidth(circleWidth); textPaint = new Paint(); textPaint.setAntiAlias(true); textPaint.setDither(true); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// 分別獲取期望的寬度和高度，並取其中較小的尺寸作為該控制元件的寬和高 int measureWidth = MeasureSpec.getSize(widthMeasureSpec); int measureHeight = MeasureSpec.getSize(heightMeasureSpec); setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight)); } @Override protected void onDraw(Canvas canvas) { int center = this.getWidth() / 2; int radius = center - circleWidth / 2; drawCircle(canvas, center, radius); // 繪製進度圓弧 drawText(canvas, center, radius); } /** * 繪製進度圓弧 * * @param canvas * 畫布物件 * @param center * 圓心的x和y座標 * @param radius * 圓的半徑 */ private void drawCircle(Canvas canvas, int center, int radius) { circlePaint.setShader(null); // 清除上一次的shader circlePaint.setColor(firstColor); // 設定底部圓環的顏色，這裡使用第一種顏色 circlePaint.setStyle(Paint.Style.STROKE); // 設定繪製的圓為空心 canvas.drawCircle(center, center, radius, circlePaint); // 畫底部的空心圓 RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius); // 圓的外接正方形 // 繪製顏色漸變圓環 // shader類是Android在圖形變換中非常重要的一個類。Shader在三維軟體中我們稱之為著色器，其作用是來給影象著色。 LinearGradient linearGradient = new LinearGradient(circleWidth, circleWidth, getMeasuredWidth() - circleWidth, getMeasuredHeight() - circleWidth, colorArray, null, Shader.TileMode.MIRROR); circlePaint.setShader(linearGradient); circlePaint.setShadowLayer(10, 10, 10, Color.RED); circlePaint.setColor(secondColor); // 設定圓弧的顏色 circlePaint.setStrokeCap(Paint.Cap.ROUND); // 把每段圓弧改成圓角的 alphaAngle = currentValue * 360.0f / maxValue * 1.0f; // 計算每次畫圓弧時掃過的角度，這裡計算要注意分母要轉為float型別，否則alphaAngle永遠為0 canvas.drawArc(oval, -90, alphaAngle, false, circlePaint); } /** * 繪製文字 * * @param canvas * 畫布物件 * @param center * 圓心的x和y座標 * @param radius * 圓的半徑 */ private void drawText(Canvas canvas, int center, int radius) { float result = (currentValue * 100.0f / maxValue * 1.0f); // 計算進度 String percent = String.format("%.1f", result) + "%"; textPaint.setTextAlign(Paint.Align.CENTER); // 設定文字居中，文字的x座標要注意 textPaint.setColor(Color.BLACK); // 設定文字顏色 textPaint.setTextSize(40); // 設定要繪製的文字大小 textPaint.setStrokeWidth(0); // 注意此處一定要重新設定寬度為0,否則繪製的文字會重疊 Rect bounds = new Rect(); // 文字邊框 textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 獲得繪製文字的邊界矩形 FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 獲取繪製Text時的四條線 int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; // 計算文字的基線,方法見http://blog.csdn.net/harvic880925/article/details/50423762 canvas.drawText(percent, center, baseline, textPaint); // 繪製表示進度的文字 } /** * 設定圓環的寬度 * * @param width */ public void setCircleWidth(int width) { this.circleWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width, getResources() .getDisplayMetrics()); circlePaint.setStrokeWidth(circleWidth); invalidate(); } /** * 設定圓環的底色，預設為亮灰色LTGRAY * * @param color */ public void setFirstColor(int color) { this.firstColor = color; circlePaint.setColor(firstColor); invalidate(); } /** * 設定進度條的顏色，預設為藍色<br> * * @param color */ public void setSecondColor(int color) { this.secondColor = color; circlePaint.setColor(secondColor); invalidate(); } /** * 設定進度條漸變色顏色陣列 * * @param colors * 顏色陣列，型別為int[] */ public void setColorArray(int[] colors) { this.colorArray = colors; invalidate(); } /** * 按進度顯示百分比 * * @param progress * 進度，值通常為0到100 */ public void setProgress(int progress) { int percent = progress * maxValue / 100; if (percent < 0) { percent = 0; } if (percent > 100) { percent = 100; } this.currentValue = percent; invalidate(); } /** * 按進度顯示百分比，可選擇是否啟用數字動畫 * * @param progress * 進度，值通常為0到100 * @param useAnimation * 是否啟用動畫，true為啟用 */ public void setProgress(int progress, boolean useAnimation) { int percent = progress * maxValue / 100; if (percent < 0) { percent = 0; } if (percent > 100) { percent = 100; } if (useAnimation) // 使用動畫 { ValueAnimator animator = ValueAnimator.ofInt(0, percent); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { currentValue = (int) animation.getAnimatedValue(); invalidate(); } }); animator.setInterpolator(new OvershootInterpolator()); animator.setDuration(1000); animator.start(); } else { setProgress(progress); } } }
3、activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:lh2="http://schemas.android.com/apk/res/com.ctgu.circleprogressbar" android:layout_width="match_parent" android:layout_height="match_parent" > <com.ctgu.circleprogressbar.CircleProgressBar android:id="@+id/circleProgressBar" android:layout_width="150dp" android:layout_height="150dp" android:layout_centerHorizontal="true" android:layout_gravity="center" android:layout_marginTop="20dp" lh2:circleWidth="6dp" lh2:firstColor="#d3d3d3" lh2:secondColor="#3B95C8" /> <SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#778899" /> </RelativeLayout>
4、MainActivity.java
package com.ctgu.circleprogressbar;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.widget.SeekBar;
public class MainActivity extends Activity
{
private CircleProgressBar circleProgressBar; // 自定義的進度條
private SeekBar seekbar; // 拖動條
private int[] colors = new int[] { Color.parseColor("#27B197"), Color.parseColor("#00A6D5") };
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circleProgressBar = (CircleProgressBar) findViewById(R.id.circleProgressBar);
// circleProgressBar.setFirstColor(Color.LTGRAY);
// circleProgressBar.setColorArray(colors); //覺得進度條顏色醜的，這裡可以自行傳入一個顏色漸變陣列。
// circleProgressBar.setCircleWidth(6);
seekbar = (SeekBar) findViewById(R.id.seekbar);
seekbar.setMax(100);
seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener()
{
@Override
public void onStopTrackingTouch(SeekBar seekBar)
{
}
@Override
public void onStartTrackingTouch(SeekBar seekBar)
{
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
if (fromUser)
{
// circleProgressBar.setProgress(progress); //不使用動畫
circleProgressBar.setProgress(progress, true); // 使用數字過渡動畫
}
}
});
}
}
程式碼註釋很詳細了，基本上了解自定義控制元件的都看得懂。