Android自定义view圆形进度条

自定义一个类实现构造方法 重写方法

package test.bwie.com.baixinfei20171009;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.View;

import static android.R.attr.x;

import static android.R.attr.y;

/**

* 自定义view

* Created by admin on 2017/10/9.

* 白新飞

*/

public class yuanhuan extends View {

/*private int cWdith;
private int ncolor;
private int wcolor;
private int ccolor;
private int textsize;
private String text;
private int textcolor;
private Paint p;*/
/**
* 绘制百分比的圆，一共有四部分，分别是里面的文字、背景圆、默认圆环、开始绘制的圆环；
* 思路：首先需要四支画笔, 设置画笔对应的属性等；
*/
/**
* 绘制百分比的圆，一共有四部分，分别是里面的文字、背景圆、默认圆环、开始绘制的圆环；
* 思路：首先需要四支画笔, 设置画笔对应的属性等；
*/
private Paint roundColorPaint;//外圆画笔
private Paint mCirclePaint;//中心园的画笔
private Paint mTextPaint;//文字的画笔
private Paint mArcPaint;//外圆环的画笔
private int mCircleX;//设置圆心x坐标
private int mCircleY;//设置圆心y坐标
private float mCurrentAngle;//当前角度
private RectF mArcRectF;//画中心园的外接矩形，用来画圆环用
private float mStartSweepValue;//圆环开始角度
private float mTargetPercent;//设置目标的百分比(也就是后台返回的数据)
private float mCurrentPercent;//当前百分比

private int mRadius;//圆的半径
private int mCircleBackground;//中间圆的背景颜色
private int mRingColor;//外圆环的颜色  第二次画圆的颜色
private int roundColor; //外圆环的颜色 第一次画圆的颜色
private int mTextSize;//字体大小
private int mTextColor;//字体颜色
public yuanhuan(Context context) {
super(context);
//初始化数据
init(context);
}

public yuanhuan(Context context, AttributeSet attrs) {
super(context, attrs);
// 自定义属性，attr
// 使用TypedArray
//自定义属性 values/attr
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PercentageRing);
//中间圆的背景颜色  默认 - 白色
mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xffafb4db);
//外圆环的颜色  默认 - 灰色
roundColor = typedArray.getColor(R.styleable.PercentageRing_circleColor, 0xffffffff);
//外圆环的颜色  动态画圆 - 默认-红色
mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xffafb4db);
//中间圆的半径 默认为80
mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 80);
//字体颜色 默认 - 灰色
mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xffafb4db);
//最后一定要调用这个 释放掉TypedArray
typedArray.recycle();
//初始化数据
init(context);
}

public yuanhuan(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public yuanhuan(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
private void init(Context context){
//圆环开始角度 -90° 正北方向
mStartSweepValue = -90;
//当前角度
mCurrentAngle = 0;
//当前百分比
mCurrentPercent = 0;
//设置中心园的画笔
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mCircleBackground);
mCirclePaint.setStyle(Paint.Style.FILL);
//设置文字的画笔
mTextPaint = new Paint();
mTextPaint.setColor(mTextColor);
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setStrokeWidth((float) (0.025*mRadius));
mTextPaint.setTextSize(mRadius/2);
mTextPaint.setTextAlign(Paint.Align.CENTER);
//设置外圆环的画笔
mArcPaint = new Paint();
roundColorPaint = new Paint();
roundColorPaint.setColor(roundColor);
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(mRingColor);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth((float) (0.075*mRadius));

//获得文字的字号 因为要设置文字在圆的中心位置
mTextSize = (int) mTextPaint.getTextSize();

}
//主要是测量wrap_content时候的宽和高，因为宽高一样，只需要测量一次宽即可，高等于宽
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measure(widthMeasureSpec), measure(widthMeasureSpec));
//设置圆心坐标
mCircleX = getMeasuredWidth()/2;
mCircleY = getMeasuredHeight()/2;
//如果半径大于圆心横坐标，需要手动缩小半径的值，否则就画到外面去了
if (mRadius>mCircleX) {
//设置半径大小为圆心横坐标到原点的距离
mRadius = mCircleX;
mRadius = (int) (mCircleX-0.075*mRadius);
//因为半径改变了，所以要重新设置一下字体宽度
mTextPaint.setStrokeWidth((float) (0.025*mRadius));
//重新设置字号
mTextPaint.setTextSize(mRadius/2);
//重新设置外圆环宽度
mArcPaint.setStrokeWidth((float) (0.075*mRadius));
//重新获得字号大小
mTextSize = (int) mTextPaint.getTextSize();
}
//画中心园的外接矩形，用来画圆环用
mArcRectF = new RectF(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius);
}

//当wrap_content的时候，view的大小根据半径大小改变，但最大不会超过屏幕
private int measure(int measureSpec){
int result=0;
//1、先获取测量模式 和 测量大小
//2、如果测量模式是MatchParent 或者精确值，则宽为测量的宽
//3、如果测量模式是WrapContent ，则宽为 直径值 与 测量宽中的较小值；否则当直径大于测量宽时，会绘制到屏幕之外；
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
}else {
result =(int) (1.075*mRadius*2);
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;

}

//开始画中间圆、文字和外圆环
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1、画中间背景圆
//2、画文字
//3、画圆环
//4、判断进度，重新绘制
canvas.drawCircle(mCircleX, mCircleY, mRadius, roundColorPaint);
canvas.drawText(String.valueOf(mCurrentPercent) + "%", mCircleX, mCircleY + mTextSize / 4, mTextPaint);
canvas.drawArc(mArcRectF, mStartSweepValue, mCurrentAngle, false, mArcPaint);

if (mCurrentPercent < mTargetPercent) {
//当前百分比+1
mCurrentPercent += 1;
//当前角度+360
mCurrentAngle += 3.6;
//每10ms重画一次
postInvalidateDelayed(10);
} else if (mCurrentPercent == mTargetPercent) {
//当前百分比+1
mCurrentPercent = 0;
//当前角度+360
mCurrentAngle = 0;
//每10ms重画一次
postInvalidateDelayed(10);
//canvas.drawRect(mArcRectF, mRingPaint);
}
}
//设置目标的百分比
public void setTargetPercent(float percent){
mTargetPercent = percent;
}

}

自定义属性

<resources>
<declare-styleable name="PercentageRing">
<attr name="circleColor" format="color"/>
<attr name="radius" format="integer"/>
<attr name="circleBackground" format="color"/>
<attr name="ringColor" format="color"/>
<attr name="textColor" format = "color"/>
</declare-styleable> </resources>

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/test.bwie.com.baixinfei20171009"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layou
b46f
t_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="test.bwie.com.baixinfei20171009.MainActivity">

<test.bwie.com.baixinfei20171009.yuanhuan
android:id="@+id/recommend_progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:circleBackground="#00000000"
android:layout_centerHorizontal="true"
app:ringColor="#ffea4745"
app:textColor="#ff999999"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/start"
android:layout_below="@id/recommend_progressBar"
android:text="开始"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/reset"
android:layout_toRightOf="@id/start"
android:layout_below="@id/recommend_progressBar"
android:text="暂停"/>
</RelativeLayout>

MainActivity

package test.bwie.com.baixinfei20171009;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

public class MainActivity extends AppCompatActivity {

private yuanhuan cc;

private Button start;

private Button resut;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

start= (Button) findViewById(R.id.start);

resut= (Button) findViewById(R.id.reset);

cc= (yuanhuan) findViewById(R.id.recommend_progressBar);

start.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

cc.setTargetPercent(100);

cc.invalidate();

}
});

resut.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

cc.setTargetPercent(0);

cc.invalidate();

}
});

}

}