首先看下效果图
布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<com.example.mytest.view.CircleProgressBar
android:id="@+id/progress1"
android:layout_width="60dp"
android:layout_height="60dp"
app:mlpb_progress_color="#566da9"
app:mlpb_progress_stoke_width="3dp" />
</LinearLayout>
声明属性
<declare-styleable name="CircleProgressBar">
<attr name="mlpb_inner_radius" format="dimension"/>
<attr name="mlpb_background_color" format="color"/>
<attr name="mlpb_progress_color" format="color"/>
<attr name="mlpb_progress_stoke_width" format="dimension"/>
<attr name="mlpb_show_arrow" format="boolean"/>
<attr name="mlpb_enable_circle_background" format="boolean"/>
<attr name="mlpb_arrow_width" format="dimension"/>
<attr name="mlpb_arrow_height" format="dimension"/>
<attr name="mlpb_progress" format="integer"/>
<attr name="mlpb_max" format="integer"/>
<attr name="mlpb_progress_text_size" format="dimension"/>
<attr name="mlpb_progress_text_color" format="color"/>
<!--<attr name="mlpb_progress_text_offset" format="dimension"/>-->
<attr name="mlpb_progress_text_visibility" format="enum">
<enum name="visible" value="0"/>
<enum name="invisible" value="1"/>
</attr>
</declare-styleable>
自定义控件:
package com.example.mytest.view;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.net.Uri;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.animation.Animation;
import android.widget.ImageView;
import com.example.mytest.R;
public class CircleProgressBar extends ImageView {
private static final int KEY_SHADOW_COLOR = 0x1E000000;
private static final int FILL_SHADOW_COLOR = 0x3D000000;
// PX
private static final float X_OFFSET = 0f;
private static final float Y_OFFSET = 1.75f;
private static final float SHADOW_RADIUS = 3.5f;
private static final int SHADOW_ELEVATION = 4;
private static final int DEFAULT_CIRCLE_BG_LIGHT = 0xFFFAFAFA;
private static final int DEFAULT_CIRCLE_DIAMETER = 56;
private static final int STROKE_WIDTH_LARGE = 3;
public static final int DEFAULT_TEXT_SIZE = 9;
private Animation.AnimationListener mListener;
private int mShadowRadius;
private int mBackGroundColor;
private int mProgressColor;
private int mProgressStokeWidth;
private int mArrowWidth;
private int mArrowHeight;
private int mProgress;
private int mMax;
private int mDiameter;
private int mInnerRadius;
private Paint mTextPaint;
private int mTextColor;
private int mTextSize;
private boolean mIfDrawText;
private boolean mShowArrow;
private MaterialProgressDrawable mProgressDrawable;
private ShapeDrawable mBgCircle;
private boolean mCircleBackgroundEnabled;
private int[] mColors = new int[]{Color.BLACK};
public CircleProgressBar(Context context) {
super(context);
init(context, null, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attrs, int defStyleAttr) {
final TypedArray a = context.obtainStyledAttributes(
attrs, R.styleable.CircleProgressBar, defStyleAttr, 0);
// <attr name="mlpb_inner_radius" format="dimension"/>
// <attr name="mlpb_background_color" format="color"/>
// <attr name="mlpb_progress_color" format="color"/>
// <attr name="mlpb_progress_stoke_width" format="dimension"/>
// <attr name="mlpb_arrow_width" format="dimension"/>
// <attr name="mlpb_arrow_height" format="dimension"/>
//
// <attr name="mlpb_progress" format="integer"/>
// <attr name="mlpb_max" format="integer"/>
//
//
// <attr name="mlpb_progress_text_size" format="dimension"/>
// <attr name="mlpb_progress_text_color" format="color"/>
//
// <attr name="mlpb_progress_text_offset" format="dimension"/>
//
// <attr name="mlpb_progress_text_visibility" format="enum">
// <enum name="visible" value="0"/>
// <enum name="invisible" value="1"/>
// </attr>
final float density = getContext().getResources().getDisplayMetrics().density;
mBackGroundColor = a.getColor(
R.styleable.CircleProgressBar_mlpb_background_color, DEFAULT_CIRCLE_BG_LIGHT);
mProgressColor = a.getColor(
R.styleable.CircleProgressBar_mlpb_progress_color, DEFAULT_CIRCLE_BG_LIGHT);
mColors = new int[]{mProgressColor};
mInnerRadius = a.getDimensionPixelOffset(
R.styleable.CircleProgressBar_mlpb_inner_radius, -1);
mProgressStokeWidth = a.getDimensionPixelOffset(
R.styleable.CircleProgressBar_mlpb_progress_stoke_width, (int) (STROKE_WIDTH_LARGE * density));
mArrowWidth = a.getDimensionPixelOffset(
R.styleable.CircleProgressBar_mlpb_arrow_width, -1);
mArrowHeight = a.getDimensionPixelOffset(
R.styleable.CircleProgressBar_mlpb_arrow_height, -1);
mTextSize = a.getDimensionPixelOffset(
R.styleable.CircleProgressBar_mlpb_progress_text_size, (int) (DEFAULT_TEXT_SIZE * density));
mTextColor = a.getColor(
R.styleable.CircleProgressBar_mlpb_progress_text_color, Color.BLACK);
mShowArrow = a.getBoolean(R.styleable.CircleProgressBar_mlpb_show_arrow, false);
mCircleBackgroundEnabled = a.getBoolean(R.styleable.CircleProgressBar_mlpb_enable_circle_background, true);
mProgress = a.getInt(R.styleable.CircleProgressBar_mlpb_progress, 0);
mMax = a.getInt(R.styleable.CircleProgressBar_mlpb_max, 100);
int textVisible = a.getInt(R.styleable.CircleProgressBar_mlpb_progress_text_visibility, 1);
if (textVisible != 1) {
mIfDrawText = true;
}
mTextPaint = new Paint();
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setAntiAlias(true);
a.recycle();
mProgressDrawable = new MaterialProgressDrawable(getContext(), this);
super.setImageDrawable(mProgressDrawable);
}
private boolean elevationSupported() {
return android.os.Build.VERSION.SDK_INT >= 21;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!elevationSupported()) {
setMeasuredDimension(getMeasuredWidth() + mShadowRadius * 2, getMeasuredHeight()
+ mShadowRadius * 2);
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
final float density = getContext().getResources().getDisplayMetrics().density;
mDiameter = Math.min(getMeasuredWidth(), getMeasuredHeight());
if (mDiameter <= 0) {
mDiameter = (int) density * DEFAULT_CIRCLE_DIAMETER;
}
if (getBackground() == null && mCircleBackgroundEnabled) {
final int shadowYOffset = (int) (density * Y_OFFSET);
final int shadowXOffset = (int) (density * X_OFFSET);
mShadowRadius = (int) (density * SHADOW_RADIUS);
if (elevationSupported()) {
mBgCircle = new ShapeDrawable(new OvalShape());
ViewCompat.setElevation(this, SHADOW_ELEVATION * density);
} else {
OvalShape oval = new OvalShadow(mShadowRadius, mDiameter - mShadowRadius * 2);
mBgCircle = new ShapeDrawable(oval);
ViewCompat.setLayerType(this, ViewCompat.LAYER_TYPE_SOFTWARE, mBgCircle.getPaint());
mBgCircle.getPaint().setShadowLayer(mShadowRadius, shadowXOffset, shadowYOffset,
KEY_SHADOW_COLOR);
final int padding = (int) mShadowRadius;
// set padding so the inner image sits correctly within the shadow.
setPadding(padding, padding, padding, padding);
}
mBgCircle.getPaint().setColor(mBackGroundColor);
setBackgroundDrawable(mBgCircle);
}
mProgressDrawable.setBackgroundColor(mBackGroundColor);
mProgressDrawable.setColorSchemeColors(mColors);
mProgressDrawable.setSizeParameters(mDiameter, mDiameter,
mInnerRadius <= 0 ? (mDiameter - mProgressStokeWidth * 2) / 4 : mInnerRadius,
mProgressStokeWidth,
mArrowWidth < 0 ? mProgressStokeWidth * 4 : mArrowWidth,
mArrowHeight < 0 ? mProgressStokeWidth * 2 : mArrowHeight);
if (isShowArrow()) {
mProgressDrawable.showArrowOnFirstStart(true);
mProgressDrawable.setArrowScale(1f);
mProgressDrawable.showArrow(true);
}
super.setImageDrawable(null);
super.setImageDrawable(mProgressDrawable);
mProgressDrawable.setAlpha(255);
if(getVisibility()==VISIBLE) {
mProgressDrawable.start();
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mIfDrawText) {
String text = String.format("%s%%", mProgress);
int x = getWidth() / 2 - text.length() * mTextSize / 4;
int y = getHeight() / 2 + mTextSize / 4;
canvas.drawText(text, x, y, mTextPaint);
}
}
@Override
final public void setImageResource(int resId) {
}
public boolean isShowArrow() {
return mShowArrow;
}
public void setShowArrow(boolean showArrow) {
this.mShowArrow = showArrow;
}
@Override
final public void setImageURI(Uri uri) {
super.setImageURI(uri);
}
@Override
final public void setImageDrawable(Drawable drawable) {
}
public void setAnimationListener(Animation.AnimationListener listener) {
mListener = listener;
}
@Override
public void onAnimationStart() {
super.onAnimationStart();
if (mListener != null) {
mListener.onAnimationStart(getAnimation());
}
}
@Override
public void onAnimationEnd() {
super.onAnimationEnd();
if (mListener != null) {
mListener.onAnimationEnd(getAnimation());
}
}
public void setColorSchemeResources(int... colorResIds) {
final Resources res = getResources();
int[] colorRes = new int[colorResIds.length];
for (int i = 0; i < colorResIds.length; i++) {
colorRes[i] = res.getColor(colorResIds[i]);
}
setColorSchemeColors(colorRes);
}
public void setColorSchemeColors(int... colors) {
mColors = colors;
if (mProgressDrawable != null) {
mProgressDrawable.setColorSchemeColors(colors);
}
}
public void setBackgroundColor(int colorRes) {
if (getBackground() instanceof ShapeDrawable) {
final Resources res = getResources();
((ShapeDrawable) getBackground()).getPaint().setColor(res.getColor(colorRes));
}
}
public boolean isShowProgressText() {
return mIfDrawText;
}
public void setShowProgressText(boolean mIfDrawText) {
this.mIfDrawText = mIfDrawText;
}
public int getMax() {
return mMax;
}
public void setMax(int max) {
mMax = max;
}
public int getProgress() {
return mProgress;
}
public void setProgress(int progress) {
if (getMax() > 0) {
mProgress = progress;
}
}
public boolean circleBackgroundEnabled() {
return mCircleBackgroundEnabled;
}
public void setCircleBackgroundEnabled(boolean enableCircleBackground) {
this.mCircleBackgroundEnabled = enableCircleBackground;
}
@Override
public int getVisibility() {
return super.getVisibility();
}
@Override
public void setVisibility(int visibility) {
super.setVisibility(visibility);
if (mProgressDrawable != null) {
mProgressDrawable.setVisible(visibility == VISIBLE, false);
if (visibility != VISIBLE) {
mProgressDrawable.stop();
} else {
if (mProgressDrawable.isRunning()) {
mProgressDrawable.stop();
}
mProgressDrawable.start();
}
}
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (mProgressDrawable != null) {
mProgressDrawable.stop();
mProgressDrawable.setVisible(getVisibility() == VISIBLE, false);
requestLayout();
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mProgressDrawable != null) {
mProgressDrawable.stop();
mProgressDrawable.setVisible(false, false);
}
}
private class OvalShadow extends OvalShape {
private RadialGradient mRadialGradient;
private int mShadowRadius;
private Paint mShadowPaint;
private int mCircleDiameter;
public OvalShadow(int shadowRadius, int circleDiameter) {
super();
mShadowPaint = new Paint();
mShadowRadius = shadowRadius;
mCircleDiameter = circleDiameter;
mRadialGradient = new RadialGradient(mCircleDiameter / 2, mCircleDiameter / 2,
mShadowRadius, new int[]{
FILL_SHADOW_COLOR, Color.TRANSPARENT
}, null, Shader.TileMode.CLAMP);
mShadowPaint.setShader(mRadialGradient);
}
@Override
public void draw(Canvas canvas, Paint paint) {
final int viewWidth = CircleProgressBar.this.getWidth();
final int viewHeight = CircleProgressBar.this.getHeight();
canvas.drawCircle(viewWidth / 2, viewHeight / 2, (mCircleDiameter / 2 + mShadowRadius),
mShadowPaint);
canvas.drawCircle(viewWidth / 2, viewHeight / 2, (mCircleDiameter / 2), paint);
}
}
}
在java代码中设置进度条上的颜色值
progress1 = (CircleProgressBar) findViewById(R.id.progress1);
progress1.setColorSchemeResources(android.R.color.holo_green_light,android.R.color.holo_orange_light,android.R.color.holo_red_light);
您可能感兴趣的文章:Android动态自定义圆形进度条Android编程之ProgressBar圆形进度条颜色设置方法Android带圆形数字进度的自定义进度条示例Android实现带数字的圆形进度条(自定义进度条)Android编程实现WebView添加进度条的方法Android自定义控件实现圆形进度条Android自定义view实现进度条指示效果android自定义view制作圆形进度条效果Android编程基于自定义View实现绚丽的圆形进度条功能示例Android实现环形进度条的实例Android编程实现类似于圆形ProgressBar的进度条效果