Android如何自定义view实现半圆环效果(android,view,开发技术)

具体内容如下

1.自定义属性

<declare-styleablename="SemicircleView"><attrname="radius"format="dimension"/><attrname="strokeWidth"format="dimension"/><attrname="bgArcColor"format="color"/><attrname="usedArcColor"format="color"/><attrname="usedTextSize"format="dimension"/><attrname="usedPercentTextSize"format="dimension"/><attrname="percentTextSize"format="dimension"/></declare-styleable>

2.自定义View

packagecom.anhuitelecom.share.activity.view;importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.graphics.Canvas;importandroid.graphics.Paint;importandroid.graphics.Paint.FontMetrics;importandroid.graphics.Rect;importandroid.graphics.RectF;importandroid.os.Handler;importandroid.os.Message;importandroid.util.AttributeSet;importandroid.view.View;importcom.anhuitelecom.share.activity.R;/****@ClassName:SemicircleView*@Description:自定义view实现半圆弧*@authorchenzheng*@date2017-2-21下午2:44:16*/publicclassSemicircleViewextendsView{//线圆弧画笔privatePaintmLineArcPaint;//背景圆弧画笔privatePaintmBackgroudArcPaint;//已使用圆弧画笔privatePaintmUsedArcPaint;//已使用以及流量文字画笔privatePaintmUsedTxtPaint;//已使用百分比文字画笔privatePaintmUsedPercentTxtPaint;//百分号画笔privatePaintmPercentTxtPaint;//最外层圆弧线颜色privateintmLineArcColor;//背景圆环颜色privateintmBackgroundArcColor;//已使用圆弧颜色privateintmUsedArcColor;//圆弧半径privatefloatmArcRadius;//外线大半径privatefloatmLineRadius;//圆弧宽度privatefloatmArcStrokeWidth;//圆心x坐标privateintmXCenter;//圆心y坐标privateintmYCenter;//已使用百分比privatefloatmProgress=0;//动画展示弧度privatefloatmShowProgress;privateContextmContext;//已使用和总流量privateStringmUserdAndAll;privatefloatmUsedTextSize;privatefloatmUsedPercentTextSize;privatefloatmPercentTextSize;privatefloatmUsedPercentTxtHeight;//privateCircleThreadprivateHandlercircleHandler=newHandler(){publicvoidhandleMessage(Messagemsg){super.handleMessage(msg);if(msg.what==1){floattemp=(Float)msg.obj;setShowProgress(temp);}};};publicSemicircleView(Contextcontext){this(context,null);}publicSemicircleView(Contextcontext,AttributeSetattrs){this(context,attrs,0);}publicSemicircleView(Contextcontext,AttributeSetattrs,intdefStyle){super(context,attrs,defStyle);mContext=context;//获取自定义的属性initAttrs(context,attrs);initVariable();}privatevoidinitAttrs(Contextcontext,AttributeSetattrs){TypedArraytypeArray=context.getTheme().obtainStyledAttributes(attrs,R.styleable.SemicircleView,0,0);mLineRadius=typeArray.getDimension(R.styleable.SemicircleView_radius,120);mArcStrokeWidth=typeArray.getDimension(R.styleable.SemicircleView_strokeWidth,12);mBackgroundArcColor=typeArray.getColor(R.styleable.SemicircleView_bgArcColor,0xFFFFFFFF);mUsedArcColor=typeArray.getColor(R.styleable.SemicircleView_usedArcColor,0xFFFF3D3B);mUsedTextSize=typeArray.getDimension(R.styleable.SemicircleView_usedTextSize,14);mUsedPercentTextSize=typeArray.getDimension(R.styleable.SemicircleView_usedPercentTextSize,52);mPercentTextSize=typeArray.getDimension(R.styleable.SemicircleView_percentTextSize,16);typeArray.recycle();}privatevoidinitVariable(){//初始化一些值mLineRadius=mLineRadius+mArcStrokeWidth/2;mArcRadius=mLineRadius-1.8f*mArcStrokeWidth;mLineArcColor=0x33FFFFFF;mUserdAndAll="0M/0M";//外层线圆弧画笔设置mLineArcPaint=newPaint();mLineArcPaint.setAntiAlias(true);mLineArcPaint.setColor(mLineArcColor);mLineArcPaint.setStyle(Paint.Style.STROKE);mLineArcPaint.setStrokeWidth(1);mLineArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形//背景圆弧画笔设置mBackgroudArcPaint=newPaint();mBackgroudArcPaint.setAntiAlias(true);mBackgroudArcPaint.setColor(mBackgroundArcColor);mBackgroudArcPaint.setStyle(Paint.Style.STROKE);mBackgroudArcPaint.setStrokeWidth(mArcStrokeWidth);mBackgroudArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形//已使用多少圆环画笔设置mUsedArcPaint=newPaint();mUsedArcPaint.setAntiAlias(true);mUsedArcPaint.setColor(mUsedArcColor);mUsedArcPaint.setStyle(Paint.Style.STROKE);mUsedArcPaint.setStrokeWidth(mArcStrokeWidth);mUsedArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形mUsedTxtPaint=newPaint();mUsedTxtPaint.setAntiAlias(true);mUsedTxtPaint.setStyle(Paint.Style.FILL);mUsedTxtPaint.setColor(0x80FFFFFF);mUsedTxtPaint.setTextSize(mUsedTextSize);//百分比数字画笔mUsedPercentTxtPaint=newPaint();mUsedPercentTxtPaint.setAntiAlias(true);mUsedPercentTxtPaint.setStyle(Paint.Style.FILL);mUsedPercentTxtPaint.setColor(0xFFFFFFFF);mUsedPercentTxtPaint.setTextSize(mUsedPercentTextSize);//百分号画笔mPercentTxtPaint=newPaint();mPercentTxtPaint.setAntiAlias(true);mPercentTxtPaint.setStyle(Paint.Style.FILL);mPercentTxtPaint.setColor(0xFFFFFFFF);mPercentTxtPaint.setTextSize(mPercentTextSize);//获取字体高度FontMetricsfm=mUsedPercentTxtPaint.getFontMetrics();mUsedPercentTxtHeight=(int)Math.ceil(fm.descent-fm.ascent);}@OverrideprotectedvoidonDraw(Canvascanvas){//TODOAuto-generatedmethodstubsuper.onDraw(canvas);mXCenter=getWidth()/2;mYCenter=getHeight()/2;RectFlineOval=newRectF();lineOval.left=(mXCenter-mLineRadius);lineOval.top=(mYCenter-mLineRadius);lineOval.right=mLineRadius*2+(mXCenter-mLineRadius);lineOval.bottom=mLineRadius*2+(mYCenter-mLineRadius);RectFoval=newRectF();oval.left=(mXCenter-mArcRadius);oval.top=(mYCenter-mArcRadius);oval.right=mArcRadius*2+(mXCenter-mArcRadius);oval.bottom=mArcRadius*2+(mYCenter-mArcRadius);//绘制最外面圆弧线canvas.drawArc(lineOval,-225,270,false,mLineArcPaint);//绘制背景圆弧canvas.drawArc(oval,-225,270,false,mBackgroudArcPaint);//绘制已使用圆弧floatmShowDegree=mShowProgress/100*270;canvas.drawArc(oval,-225,mShowDegree,false,mUsedArcPaint);//已使用文字RectusedRect=newRect();StringusedStr="已使用";mUsedTxtPaint.getTextBounds(usedStr,0,usedStr.length(),usedRect);intusedX=mXCenter-usedRect.width()/2;canvas.drawText(usedStr,usedX,mYCenter-mArcRadius*0.6f,mUsedTxtPaint);//已使用和总流量Rectua_rect=newRect();mUsedTxtPaint.getTextBounds(mUserdAndAll,0,mUserdAndAll.length(),ua_rect);intuaX=mXCenter-ua_rect.width()/2;canvas.drawText(mUserdAndAll,uaX,mYCenter+mArcRadius*0.6f,mUsedTxtPaint);//百分比数字StringprogressStr=(int)mShowProgress+"";StringpercentStr="%";floatusedPercentWidth=mUsedPercentTxtPaint.measureText(progressStr,0,progressStr.length());floatpercentWidth=mPercentTxtPaint.measureText(percentStr,0,percentStr.length());floatupX=mXCenter-(usedPercentWidth+percentWidth)/2;canvas.drawText(progressStr,upX,mYCenter+mUsedPercentTxtHeight/3,mUsedPercentTxtPaint);floatpX=upX+usedPercentWidth;canvas.drawText(percentStr,pX,mYCenter+mUsedPercentTxtHeight/3,mPercentTxtPaint);}privatevoidsetShowProgress(floatprogress){this.mShowProgress=progress;postInvalidate();}publicvoidsetProgress(floatprogress){mProgress=progress;newThread(newCircleThread()).start();}publicvoidsetUsedArcColor(intusedArcColor){this.mUsedArcColor=usedArcColor;if(mUsedArcPaint!=null){mUsedArcPaint.setColor(mUsedArcColor);}}publicvoidsetUsedAndAll(StringusedAndAll){this.mUserdAndAll=usedAndAll;}publicstaticintdp2px(Contextcontext,floatdipValue){finalfloatscale=context.getResources().getDisplayMetrics().density;return(int)(dipValue*scale+0.5f);}publicstaticintsp2px(Contextcontext,floatspValue){finalfloatfontScale=context.getResources().getDisplayMetrics().scaledDensity;return(int)(spValue*fontScale+0.5f);}publicstaticintpx2sp(Contextcontext,floatpxValue){finalfloatfontScale=context.getResources().getDisplayMetrics().scaledDensity;return(int)(pxValue/fontScale+0.5f);}privateclassCircleThreadimplementsRunnable{intm=0;floati=0;@Overridepublicvoidrun(){//TODOAuto-generatedmethodstubwhile(!Thread.currentThread().isInterrupted()){try{Thread.sleep(30);m++;Messagemsg=newMessage();msg.what=1;if(i<mProgress){i+=m;msg.obj=i;circleHandler.sendMessage(msg);}else{i=mProgress;msg.obj=i;circleHandler.sendMessage(msg);return;}}catch(InterruptedExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}}}}}

3.外部调用

<com.view.SemicircleViewandroid:id="@+id/semicircleView"android:layout_width="215dp"android:layout_height="215dp"android:layout_gravity="center_horizontal"android:layout_marginTop="30dp"halfArc:bgArcColor="#ffffff"halfArc:percentTextSize="16sp"halfArc:radius="100dp"halfArc:strokeWidth="11dp"halfArc:usedArcColor="#FF3D3B"halfArc:usedPercentTextSize="52sp"halfArc:usedTextSize="14sp"/>

semicircleView.setUsedAndAll("170M/200M");semicircleView.setProgress(81);

4.实现效果图