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

目录效果视频分析起始角度圆弧指针代码初始化属性画布绘制内圆弧绘制外圆弧绘制中间指针绘制中间文字绘制左右两边文字动画全部代码下载链接效果视频分析起始角度如下图所示,起点角度为150,终点角度为240圆弧

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

      上述就是android开发分享Android自定义View实现体重表盘详解流程的全部内容,如果对大家有所用处且需要了解更多关于Android学习教程,希望大家多多关注—计算机技术网(www.ctvol.com)

      效果视频

      Android自定义View实现体重表盘详解流程

      分析

      起始角度

      如下图所示,起点角度为150,终点角度为240

      Android自定义View实现体重表盘详解流程

      圆弧

      白色圆弧为整个圆弧范围,蓝色圆弧为根据数据变动而覆盖白色圆弧,蓝色圆弧比白色圆弧大一点,突出显示

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

      指针

      中间的水滴指针是一个白色的水滴图片,下图蓝色为选择文件的背景颜色(截图),由于水滴指向-135度,将图像旋转-75度,水滴尖刚好指向150度的起点。

      Android自定义View实现体重表盘详解流程

      代码

      初始化属性

         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();      }  }  

      下载链接

      gitee下载链接

      到此这篇关于android自定义view实现体重表盘详解流程的文章就介绍到这了,更多相关android 自定义view内容请搜索<计算机技术网>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网>!

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ctvol.com/addevelopment/937655.html

      (0)
      好看的图片好看的图片
      上一篇 2021年11月12日
      下一篇 2021年11月12日

      精彩推荐