画一个实心圆
效果图
创建attrs.xml文件
在value文件夹下创建一个名为attrs.xml文件，为圆设置一个背景颜色的属性，代码如下：
<declare-styleable name="CircleView_Solid"> <attr name="CircleColor_Solid" format="color"/> </declare-styleable>
初始化样式属性
为圆设置颜色属性，并设置抗锯齿
private void InitAttrs(Context context , AttributeSet attrs){ TypedArray array = context.getTheme().obtainStyledAttributes( attrs,R.styleable.CircleView_Solid,0,0 ); mCircleBGColor = array.getColor( R.styleable.CircleView_Solid_CircleColor_Solid,0xFFFFFFFF ); } private void InitVar(){ mCirclePaint = new Paint( ); mCirclePaint.setAntiAlias( true ); mCirclePaint.setColor( mCircleBGColor ); }
支持Padding属性
由于直接继承view，不再onDraw()中进行处理，是无法直接使用Padding属性，代码如下：
protected void onDraw(Canvas canvas) { super.onDraw( canvas ); int PaddingLeft = getPaddingLeft(); int PaddingRight = getPaddingRight(); int PaddingTop = getPaddingTop(); int PaddingBottom = getPaddingBottom(); int Width = (getWidth() - (PaddingLeft+PaddingRight)) / 2 +PaddingLeft; int Height = (getHeight() -(PaddingTop+PaddingBottom))/2+PaddingTop; int Radius = Math.min( Width,Height )/2; canvas.drawCircle( Width,Height,Radius,mCirclePaint ); }
支持wrap_content属性
若不在onMeasure()对wrap_content进行处理，效果很可能达不到预期效果，如果控件使用wrap_content属性，那么他的Measure specification mode就为At_Most，而它的宽高就等于specSize，这种情况下specSize是就相当于父容器当前剩余的大小，代码如下：
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure( widthMeasureSpec, heightMeasureSpec ); int Width = 500; int Height = 500; int WidthMode = MeasureSpec.getMode( widthMeasureSpec ); int WidthSize = MeasureSpec.getSize( widthMeasureSpec ); int HeightMode = MeasureSpec.getMode( heightMeasureSpec ); int HeightSize = MeasureSpec.getSize( heightMeasureSpec ); if (WidthMode == MeasureSpec.AT_MOST && HeightMode == MeasureSpec.AT_MOST){ setMeasuredDimension( Math.min( Width,HeightSize ),Math.min( Height ,HeightSize) ); } else if (WidthMode == MeasureSpec.AT_MOST) { setMeasuredDimension( Math.min( Width,HeightSize ),HeightSize ); }else if (HeightMode == MeasureSpec.AT_MOST){ setMeasuredDimension( WidthSize,Math.min( Height ,HeightSize) ); } }
布局文件中的应用
<com.franzliszt.customcircleview.CircleView_Solid android:layout_width="wrap_content" android:layout_height="wrap_content" app:CircleColor_Solid="@color/colorRed" android:padding="10dp"/>
画一个带外圆环的圆
效果图
创建attrs.xml文件
<declare-styleable name="CircleView_Text"> <!-- 内圆颜色--> <attr name="CircleColor" format="color"/> <!-- 外圆环颜色--> <attr name="RingColor" format="color"/> <!-- 圆的半径--> <attr name="Radius" format="dimension"/> <!-- 外圆环的宽度--> <attr name="StrokeWidth" format="dimension"/> </declare-styleable>
初始化样式属性
private void InitAttrs(Context context , AttributeSet attrs){ TypedArray array = context.getTheme().obtainStyledAttributes( attrs,R.styleable.CircleView_Text,0,0 ); CircleColor = array.getColor( R.styleable.CircleView_Text_CircleColor,0xFFFFFFFF ); RingColor = array.getColor( R.styleable.CircleView_Text_RingColor,0xFFFFFFFF ); mRadius = array.getDimension( R.styleable.CircleView_Text_Radius,80 ); mStrokeWidth = array.getDimension( R.styleable.CircleView_Text_StrokeWidth,10 ); mRingRadius = mRadius + mStrokeWidth / 2; } private void InitVar(){ //内圆 //设置颜色 CirclePaint.setColor( CircleColor ); //设置填充方式 CirclePaint.setStyle( Paint.Style.FILL ); //设置抗锯齿 CirclePaint.setAntiAlias( true ); //外圆环 RingPaint.setColor( RingColor ); RingPaint.setStyle( Paint.Style.STROKE ); RingPaint.setAntiAlias( true ); RingPaint.setStrokeWidth( mStrokeWidth ); }
内圆与外圆环的绘制
protected void onDraw(Canvas canvas) { super.onDraw( canvas ); mCenterX = getWidth()/2; mCenterY = getHeight()/2; canvas.drawCircle( mCenterX,mCenterY,mRadius,CirclePaint ); RectF rect = new RectF( ); rect.left = mCenterX - mRingRadius; rect.right = 2 * mRingRadius + (mCenterX - mRingRadius); rect.top = mCenterY - mRingRadius; rect.bottom = 2 * mRingRadius + (mCenterY - mRingRadius); canvas.drawArc( rect,0,360,false,RingPaint ); }
布局文件中的应用
<com.franzliszt.customcircleview.CircleView android:layout_width="100dp" android:layout_height="100dp" app:Radius="40dp" app:StrokeWidth="10dp" app:CircleColor="@color/colorBlack" app:RingColor="@color/colorRed"/>
画一个外圆环可根据数值变动的圆
效果图
创建attrs.xml文件
<declare-styleable name="CircleView_Progress"> <!-- 内圆颜色--> <attr name="CircleProgressColor" format="color"/> <!-- 外圆环颜色--> <attr name="RingProgressColor" format="color"/> <!-- 外圆环覆盖部分颜色--> <attr name="RingBgProgressColor" format="color"/> <!-- 文字颜色--> <attr name="TextProgressColor" format="color"/> <!-- 圆的半径--> <attr name="RadiusProgress" format="dimension"/> <!-- 外圆环的宽度--> <attr name="StrokeWidthProgress" format="dimension"/> <attr name="CurrentProgress" format="float"/> </declare-styleable>
初始化样式属性
private void InitAttrs(Context context , AttributeSet attrs){ TypedArray array = context.getTheme().obtainStyledAttributes( attrs,R.styleable.CircleView_Progress,0,0 ); CircleColor = array.getColor( R.styleable.CircleView_Progress_CircleProgressColor,0xFFFFFFFF ); RingColor = array.getColor( R.styleable.CircleView_Progress_RingProgressColor,0xFFFFFFFF ); RingBgColor = array.getColor( R.styleable.CircleView_Progress_RingBgProgressColor,0xFFFFFFFF ); TextColor = array.getColor( R.styleable.CircleView_Progress_TextProgressColor, 0xFFFFFFFF); mRadius = array.getDimension( R.styleable.CircleView_Progress_RadiusProgress,80 ); mStrokeWidth = array.getDimension( R.styleable.CircleView_Progress_StrokeWidthProgress,10 ); mCurrentProgress = array.getFloat( R.styleable.CircleView_Progress_CurrentProgress,10 ); mRingRadius = mRadius + mStrokeWidth / 2; } private void InitVar(){ //内圆 //设置颜色 CirclePaint.setColor( CircleColor ); //设置填充方式 CirclePaint.setStyle( Paint.Style.FILL ); //设置抗锯齿 CirclePaint.setAntiAlias( true ); //外圆环 RingPaint.setColor( RingColor ); RingPaint.setStyle( Paint.Style.STROKE ); RingPaint.setAntiAlias( true ); RingPaint.setStrokeWidth( mStrokeWidth ); //外圆环覆盖部分 RingBgPaint.setColor( RingBgColor ); RingBgPaint.setStyle( Paint.Style.STROKE ); RingBgPaint.setAntiAlias( true ); RingBgPaint.setStrokeWidth( mStrokeWidth ); //中间文字 TextPaint.setStyle( Paint.Style.FILL ); TextPaint.setAntiAlias( true ); TextPaint.setColor( TextColor ); TextPaint.setTextSize( mRadius/2 ); //文字的高度 Paint.FontMetrics fontMetrics = TextPaint.getFontMetrics(); mTextHeight = (int)Math.ceil( fontMetrics.descent - fontMetrics.ascent ); }
绘制View
protected void onDraw(Canvas canvas) { super.onDraw( canvas ); mCenterX = getWidth()/2; mCenterY = getHeight()/2; canvas.drawCircle( mCenterX,mCenterY,mRadius,CirclePaint ); RectF rect = new RectF( ); rect.left = mCenterX - mRingRadius; rect.right = 2 * mRingRadius + (mCenterX - mRingRadius); rect.top = mCenterY - mRingRadius; rect.bottom = 2 * mRingRadius + (mCenterY - mRingRadius); canvas.drawArc( rect,0,360,false,RingPaint ); //当mCurrentProgress大于0时，外圆环覆盖部分显示 if (mCurrentProgress > 0){ RectF rect_progress = new RectF( ); rect_progress.left = mCenterX - mRingRadius; rect_progress.right = 2 * mRingRadius + (mCenterX - mRingRadius); rect_progress.top = mCenterY - mRingRadius; rect_progress.bottom = 2 * mRingRadius + (mCenterY - mRingRadius); //例如外圆环数值为35，即35/100*360，获得外圆环覆盖部分 canvas.drawArc( rect,-90,(float) (mCurrentProgress / mTotalProgress)*360,false,RingBgPaint ); } //文字部分 String text = mCurrentProgress+"%"; //文字部分的宽度 mTextWidth = TextPaint.measureText( text,0,text.length() ); canvas.drawText( text,mCenterX - mTextWidth / 2, mCenterY + mTextHeight / 4,TextPaint ); }
提供方法修改样式
public void setProgress(double progress){ mCurrentProgress = progress; postInvalidate(); } public void setRingBgColor(int Color){ RingBgColor = Color; postInvalidate(); } public void setTextColor(int Color){ TextColor = Color; postInvalidate(); }
布局文件中的应用
<com.franzliszt.customcircleview.CircleView_ProgressBar android:id="@+id/Progress" android:layout_width="200dp" android:layout_height="200dp" android:layout_marginTop="50dp" app:Radius="100dp" app:StrokeWidth="10dp" app:CircleColor="@color/colorWhite" app:RingColor="@color/colorGrey" app:RingProgressColor="@color/colorRed" app:TextProgressColor="@color/colorPrimary" app:CurrentProgress="59" />
