第一view類
package
views;
import
android.content.Context;
import
android.content.res.TypedArray;
import
android.graphics.Canvas;
import
android.graphics.Paint;
import
android.graphics.RectF;
import
android.util.AttributeSet;
import
android.view.View;
/**
* Created by wangyajie on 2017/10/21.
*/
public class
CompletedView
extends
View {
//
畫實心圓的畫筆
private
Paint
mCirclePaint;
//
畫圓環的畫筆
private
Paint
mRingPaint;
//
畫圓環的畫筆背景色
private
Paint
mRingPaintBg;
//
畫字體的畫筆
private
Paint
mTextPaint;
//
圓形顏色
private
int mCircleColor;
//
圓環顏色
private
int mRingColor;
//
圓環背景顏色
private
int mRingBgColor;
//
半徑
private
float mRadius;
//
圓環半徑
private
float mRingRadius;
//
圓環寬度
private
float mStrokeWidth;
//
圓心x座標
private
int mXCenter;
//
圓心y座標
private
int mYCenter;
//
字的長度
private
float mTxtWidth;
//
字的高度
private
float mTxtHeight;
//
總進度
private
int mTotalProgress
=
100;
//
當前進度
private
int mProgress;
public
CompletedView(Context
context,
AttributeSet attrs) {
super(context,
attrs);
//
獲取自定義的屬性
initAttrs(context,
attrs);
initVariable();
}
//屬性
private
void initAttrs(Context
context,
AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView,
0,
0);
mRadius
= typeArray.getDimension(R.styleable.TasksCompletedView_radius,
80);
mStrokeWidth
= typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth,
10);
mCircleColor
= typeArray.getColor(R.styleable.TasksCompletedView_circleColor,
0xFFFFFFFF);
mRingColor
= typeArray.getColor(R.styleable.TasksCompletedView_ringColor,
0xFFFFFFFF);
mRingBgColor
= typeArray.getColor(R.styleable.TasksCompletedView_ringBgColor,
0xFFFFFFFF);
mRingRadius
=
mRadius
+
mStrokeWidth
/
2;
}
//初始化畫筆
private
void initVariable()
{
//內圓
mCirclePaint
=
new
Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mCircleColor);
mCirclePaint.setStyle(Paint.Style.FILL);
//外圓弧背景
mRingPaintBg
=
new
Paint();
mRingPaintBg.setAntiAlias(true);
mRingPaintBg.setColor(mRingBgColor);
mRingPaintBg.setStyle(Paint.Style.STROKE);
mRingPaintBg.setStrokeWidth(mStrokeWidth);
//外圓弧
mRingPaint
=
new
Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
mRingPaint.setStrokeWidth(mStrokeWidth);
//mRingPaint.setStrokeCap(Paint.Cap.ROUND);//設置線冒樣式,有圓
有方
//中間字
mTextPaint
=
new
Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(mRingColor);
mTextPaint.setTextSize(mRadius
/
2);
Paint.FontMetrics
fm = mTextPaint.getFontMetrics();
mTxtHeight
= (int)
Math.ceil(fm.descent
- fm.ascent);
}
//畫圖
@Override
protected
void onDraw(Canvas
canvas) {
mXCenter
= getWidth() /
2;
mYCenter
= getHeight() /
2;
//內圓
canvas.drawCircle(mXCenter,
mYCenter,
mRadius,
mCirclePaint);
//外圓弧背景
RectF
oval1 = new
RectF();
oval1.left
= (mXCenter
-
mRingRadius);
oval1.top
= (mYCenter
-
mRingRadius);
oval1.right
=
mRingRadius
*
2
+ (mXCenter
-
mRingRadius);
oval1.bottom
=
mRingRadius
*
2
+ (mYCenter
-
mRingRadius);
canvas.drawArc(oval1,
0,
360, false,
mRingPaintBg);
//圓弧所在的橢圓對象、圓弧的起始角度、圓弧的角度、是否顯示半徑連線
//外圓弧
if
(mProgress
>
0
) {
RectF oval =
new
RectF();
oval.left
= (mXCenter
-
mRingRadius);
oval.top
= (mYCenter
-
mRingRadius);
oval.right
=
mRingRadius
*
2
+ (mXCenter
-
mRingRadius);
oval.bottom
=
mRingRadius
*
2
+ (mYCenter
-
mRingRadius);
canvas.drawArc(oval,
-90,
((float)mProgress
/
mTotalProgress) *
360, false,
mRingPaint);
//
//字體
String
txt = mProgress
+
"分";
mTxtWidth
=
mTextPaint.measureText(txt,
0,
txt.length());
canvas.drawText(txt,
mXCenter
-
mTxtWidth
/
2,
mYCenter
+
mTxtHeight
/
4,
mTextPaint);
}
}
//設置進度
public
void setProgress(int
progress) {
mProgress
= progress;
postInvalidate();//重繪
}
}
第二佈局
引用時在佈局的上邊加上
xmlns:tc="http://schemas.android.com/apk/res/com.***.test.***"
com.***.test.*** 是你自己的包名
<views.CompletedView
android:id="@+id/tasks_view"
android:layout_width="223dp"
android:layout_height="223dp"
tc:circleColor="@color/white"
tc:radius="50dip"
tc:ringBgColor="@color/white2"
tc:ringColor="@color/colorRed"
tc:strokeWidth="10dip"
/>
第三attrs文件
<?xml
version="1.0"
encoding="utf-8"?>
<resources>
<!--圓弧進度條-->
<declare-styleable
name="TasksCompletedView">
<attr
name="radius"
format="dimension"/>
<attr
name="strokeWidth"
format="dimension"/>
<attr
name="circleColor"
format="color"/>
<attr
name="ringColor"
format="color"/>
<attr
name="ringBgColor"
format="color"/>
</declare-styleable>
</resources>
第四顏色
粘到colors文件裏
<color
name="white">#FFFFFF</color>
<color
name="white2">#f5f3f3</color>
<color
name="colorRed">#d50f09</color>