android开发分享Android自定义View实现体重表盘详解流程

目录

• 效果视频
• 分析
• 起始角度
• 圆弧
• 指针
• 代码
• 初始化属性
• 画布
• 绘制内圆弧
• 绘制外圆弧
• 绘制中间指针
• 绘制中间文字
• 绘制左右两边文字
• 动画
• 全部代码
• 下载链接

   innerarcpaint.setstrokewidth( width * (float)0.1 );   outerarcpaint.setstrokewidth( width * (float)0.12 );  

   private void initpaint(){          innerarcpaint = new paint(  );          innerarcpaint.setcolor( color.white );          innerarcpaint.setantialias( true );          innerarcpaint.setstyle( paint.style.stroke );            outerarcpaint = new paint(  );          outerarcpaint.setcolor( color.blue );          outerarcpaint.setantialias( true );          outerarcpaint.setstyle( paint.style.stroke );          outerarcpaint.setshadowlayer( (float)10,(float)10,(float)10,color.parsecolor( "#99000000" ) );            textpaint = new paint(  );          textpaint.setcolor( color.red );          textpaint.setstyle( paint.style.stroke );          textpaint.settextsize( 60 );          textpaint.setstrokewidth( 2 );            scalepaint = new paint(  );          scalepaint.setcolor( color.white );          scalepaint.settextsize( 25 );          //硬件加速          setlayertype( layer_type_software,null );      }  

  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {          super.onmeasure( widthmeasurespec, heightmeasurespec );          int width = measurespec.getsize( widthmeasurespec );          innerarcpaint.setstrokewidth( width * (float)0.1 );          outerarcpaint.setstrokewidth( width * (float)0.12 );            oval = new rectf(  );          oval.left = width * (float)0.2;          oval.top = width * (float)0.2;          oval.right = width * (float)0.8;          oval.bottom = width * (float)0.8;          //宽、高一致，使画布无论边长如何变化，都成为一个正方形          setmeasureddimension( width,width );      }  

   //绘制内圆弧      private void drawinnerarc(canvas canvas){          //保存之前的画布          canvas.save();          canvas.drawarc( oval, startangle,sweepangle,false,innerarcpaint);      }  

  //绘制外圆弧      private void drawouterarc(canvas canvas){          canvas.save();          canvas.drawarc( oval, startangle,sweepangle * currentdata / 300,false,outerarcpaint);      }  

   //绘制中间指针      private void drawarrow(canvas canvas){         canvas.save();          bitmap bitmap = bitmapfactory.decoderesource( getresources(),r.mipmap.waterdrop );          int width = 75;          int height = 75;          int newwidth = (int)(getwidth() * 0.08);          float scalewidth = (float) (newwidth / width);          float scaleheight = (float) (newwidth / height);          matrix matrix = new matrix(  );          //顺序不能颠倒          matrix.setrotate( -75 + (sweepangle * currentdata / 300),bitmap.getwidth()/2,bitmap.getheight()/2 );          matrix.postscale( scalewidth,scaleheight );            bitmap bitmap1 = bitmap.createbitmap( bitmap,0,0,width,height,matrix,true );          canvas.drawbitmap( bitmap1,getwidth()/2 - bitmap1.getwidth()/2,getheight()/2 - bitmap1.getheight()/2,innerarcpaint );          bitmap.recycle();          bitmap1.recycle();      }  

  private void drawcurrentdatatext(canvas canvas){          canvas.save();          rect rect = new rect(  );          string str = string.valueof( currentdata ) + "kg";          textpaint.setcolor( color.red );          textpaint.gettextbounds( str,0,str.length(),rect );          canvas.drawtext( str,getwidth()/2 - rect.width()/2,(int)(getheight() * (float)0.38),textpaint );      }  

   private void drawscalerighttext(canvas canvas){          canvas.save();          rect rect = new rect(  );          string str =  "300kg";          textpaint.settextsize( 45 );          textpaint.gettextbounds( str,0,str.length(),rect );          textpaint.setcolor( color.white );          canvas.drawtext( str,getwidth()-getwidth()/6,(getheight()/2+getwidth()/5) ,textpaint );      }      private void drawscalelefttext(canvas canvas){          canvas.save();          rect rect = new rect(  );          string str =  "0kg";          textpaint.settextsize( 45 );          textpaint.gettextbounds( str,0,str.length(),rect );          textpaint.setcolor( color.white );          canvas.drawtext( str,(getwidth()/2-(getwidth()/3 + 75)),(getheight()/2+getwidth()/5) ,textpaint );      }  

   public void setcurrentdata(final float data, timeinterpolator interpolator){          long time = ( (long)math.abs( data- currentdata ) *20);          final valueanimator valueanimator = valueanimator.offloat( currentdata,data ).setduration( time );          valueanimator.setinterpolator( interpolator );          valueanimator.addupdatelistener( new valueanimator.animatorupdatelistener() {              @override              public void onanimationupdate(valueanimator animation) {                  customview_clockdial.this.currentdata = (float)valueanimator.getanimatedvalue();                  invalidate();              }          } );          valueanimator.start();      }  

  public class customview_clockdial extends view {      //内圆弧画笔      private paint innerarcpaint;      //外圆弧画笔      private paint outerarcpaint;      //文字画笔      private paint textpaint;      //刻度画笔      private paint scalepaint;      //圆弧范围      private rectf oval;      //当前数据      private float currentdata = 0;      //起点角度      private float startangle = 150;      //终点角度      private float sweepangle = 240;      public customview_clockdial(context context) {          super( context );          initpaint();      }        public customview_clockdial(context context, @nullable attributeset attrs) {          super( context, attrs );          initpaint();      }        public customview_clockdial(context context, @nullable attributeset attrs, int defstyleattr) {          super( context, attrs, defstyleattr );          initpaint();      }      private void initpaint(){          innerarcpaint = new paint(  );          innerarcpaint.setcolor( color.white );          innerarcpaint.setantialias( true );          innerarcpaint.setstyle( paint.style.stroke );            outerarcpaint = new paint(  );          outerarcpaint.setcolor( color.blue );          outerarcpaint.setantialias( true );          outerarcpaint.setstyle( paint.style.stroke );          outerarcpaint.setshadowlayer( (float)10,(float)10,(float)10,color.parsecolor( "#99000000" ) );            textpaint = new paint(  );          textpaint.setcolor( color.red );          textpaint.setstyle( paint.style.stroke );          textpaint.settextsize( 60 );          textpaint.setstrokewidth( 2 );            scalepaint = new paint(  );          scalepaint.setcolor( color.white );          scalepaint.settextsize( 25 );          //硬件加速          setlayertype( layer_type_software,null );      }        @override      protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {          super.onmeasure( widthmeasurespec, heightmeasurespec );          int width = measurespec.getsize( widthmeasurespec );          innerarcpaint.setstrokewidth( width * (float)0.1 );          outerarcpaint.setstrokewidth( width * (float)0.12 );            oval = new rectf(  );          oval.left = width * (float)0.2;          oval.top = width * (float)0.2;          oval.right = width * (float)0.8;          oval.bottom = width * (float)0.8;          //宽、高一致，使画布无论边长如何变化，都成为一个正方形          setmeasureddimension( width,width );      }        @override      protected void ondraw(canvas canvas) {          super.ondraw( canvas );          drawinnerarc(canvas);          drawouterarc(canvas);          drawarrow(canvas);          drawcurrentdatatext(canvas);          drawscalerighttext(canvas);          drawscalelefttext(canvas);      }      //绘制内圆弧      private void drawinnerarc(canvas canvas){          //保存之前的画布          canvas.save();          canvas.drawarc( oval, startangle,sweepangle,false,innerarcpaint);      }      //绘制外圆弧      private void drawouterarc(canvas canvas){          canvas.save();          canvas.drawarc( oval, startangle,sweepangle * currentdata / 300,false,outerarcpaint);      }      //绘制中间指针      private void drawarrow(canvas canvas){         canvas.save();          bitmap bitmap = bitmapfactory.decoderesource( getresources(),r.mipmap.waterdrop );          int width = 75;          int height = 75;          int newwidth = (int)(getwidth() * 0.08);          float scalewidth = (float) (newwidth / width);          float scaleheight = (float) (newwidth / height);          matrix matrix = new matrix(  );          //顺序不能颠倒          matrix.setrotate( -75 + (sweepangle * currentdata / 300),bitmap.getwidth()/2,bitmap.getheight()/2 );          matrix.postscale( scalewidth,scaleheight );            bitmap bitmap1 = bitmap.createbitmap( bitmap,0,0,width,height,matrix,true );          canvas.drawbitmap( bitmap1,getwidth()/2 - bitmap1.getwidth()/2,getheight()/2 - bitmap1.getheight()/2,innerarcpaint );          bitmap.recycle();          bitmap1.recycle();      }      private void drawcurrentdatatext(canvas canvas){          canvas.save();          rect rect = new rect(  );          string str = string.valueof( currentdata ) + "kg";          textpaint.setcolor( color.red );          textpaint.gettextbounds( str,0,str.length(),rect );          canvas.drawtext( str,getwidth()/2 - rect.width()/2,(int)(getheight() * (float)0.38),textpaint );      }      private void drawscalerighttext(canvas canvas){          canvas.save();          rect rect = new rect(  );          string str =  "300kg";          textpaint.settextsize( 45 );          textpaint.gettextbounds( str,0,str.length(),rect );          textpaint.setcolor( color.white );          canvas.drawtext( str,getwidth()-getwidth()/6,(getheight()/2+getwidth()/5) ,textpaint );      }      private void drawscalelefttext(canvas canvas){          canvas.save();          rect rect = new rect(  );          string str =  "0kg";          textpaint.settextsize( 45 );          textpaint.gettextbounds( str,0,str.length(),rect );          textpaint.setcolor( color.white );          canvas.drawtext( str,(getwidth()/2-(getwidth()/3 + 75)),(getheight()/2+getwidth()/5) ,textpaint );      }      public void setcurrentdata(final float data, timeinterpolator interpolator){          long time = ( (long)math.abs( data- currentdata ) *20);          final valueanimator valueanimator = valueanimator.offloat( currentdata,data ).setduration( time );          valueanimator.setinterpolator( interpolator );          valueanimator.addupdatelistener( new valueanimator.animatorupdatelistener() {              @override              public void onanimationupdate(valueanimator animation) {                  customview_clockdial.this.currentdata = (float)valueanimator.getanimatedvalue();                  invalidate();              }          } );          valueanimator.start();      }  }