Android自定義控制元件之圓形進度條動畫
阿新 • • 發佈：2020-07-17
本文例項為大家分享了Android實現圓形進度條動畫的具體程式碼，供大家參考，具體內容如下
首先貼上圖片：
額，感覺還行吧，就是進度條的顏色醜了點，不過咱是程式設計師，不是美工，配色這種問題當然不在考慮範圍之內了。
下面說重點，如何來寫一個這樣的自定義控制元件。
首先，需要有一個灰色的底圖，來作為未填充時的進度條；
然後，根據傳入的當前進度值，繪製填充時的進度圓弧，這段圓弧所對應的圓心角，由當前進度與進度的最大值（一般是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,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,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,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,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 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,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,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); // 使用數字過渡動畫
}
}
});
}
}
程式碼註釋很詳細了，基本上了解自定義控制元件的都看得懂。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。