您现在的位置是:首页 > 文章详情

Android 自定义控件之腾讯安全卫士扫描

日期:2017-04-14点击:517

该文章同步发布到CSDN,转载请注明出处

简书:http://blog.csdn.net/ling9400/article/details/70182583

这篇博客应该算是博主真正意义上的第一篇自定义控件的博客,所以写出这个控件之后第一时间进行记录,废话不多说,先上效果图:


这里写图片描述

这个图在我CSDN博客的上一篇文章中已经上过了的,在上篇文章中就说明要做出这个效果。
自定义控件无非就是那几个步骤:

  1. onMeasure
  2. onLayout(ViewGroup中会重写,这里直接集成View,所以不会重写)
  3. onDraw(所有自定义View的重要步骤)

现在根据上面的几个步骤简要说明一下:
首先,看下属性:


这里写图片描述

然后是控件的构造方法以及初始化操作和自定义属性的取值:


这里写图片描述

自定义属性在这:


这里写图片描述

然后在是重点步骤————onMeasure


这里写图片描述

onLayout这里就不需要重写了,所以直接来到onDraw,直接上代码

protected void onDraw(Canvas canvas) { super.onDraw(canvas); //先画两个外圆 mPaint.setStrokeWidth(1); mPaint.setColor(Color.BLUE); canvas.drawCircle(mWidth/2, mHeight/2, wRadius, mPaint); canvas.drawCircle(mWidth/2, mHeight/2, nRadius, mPaint); //背景图片 Bitmap bgMap = BitmapFactory.decodeResource(getResources(), mapBg); float scaleWidth = (float) (nRadius*2 - 80)/bgMap.getWidth(); float scaleHeight = (float) (nRadius*2 - 50)/bgMap.getHeight(); //缩放图片 Matrix mMatrix = new Matrix(); mMatrix.postScale(scaleWidth, scaleHeight); Bitmap bgNew = Bitmap.createBitmap(bgMap, 0,0, bgMap.getWidth(), bgMap.getHeight(), mMatrix, true); canvas.drawBitmap(bgNew, mWidth/2 - bgNew.getWidth()/2 , mHeight/2 - bgNew.getHeight()/2 , mPaint); //缩放扫描的背景图片 Matrix scanMa = new Matrix(); Bitmap scaningMap = BitmapFactory.decodeResource(getResources(), mapScaning); scanMa.postScale(0.8f, 0.8f); Bitmap newScan = Bitmap.createBitmap(scaningMap,0,0,scaningMap.getWidth(),scaningMap.getHeight(),scanMa, true);` //滚动圆滚动的矩形 mPaint.setStrokeWidth(gWidth); loadingRectF = new RectF(mWidth/2 - gRadius, mWidth/2 -gRadius, mWidth/2 +gRadius, mWidth/2 + gRadius); //扫描bitmap if(!isFirst){ isFirst = true; scanRect = new Rect(mWidth/2 - gRadius + 20, mWidth/2 - gRadius + 20, mWidth/2 +gRadius - 20, mWidth/2 + gRadius - 20); } //开始扫描 if(isStart && !isEnd){ canvas.drawBitmap(newScan, mWidth/2 - newScan.getWidth()/2, mHeight/2 - newScan.getHeight()/2, mPaint); mPaint.setColor(Color.RED); //画三个滚动的圆弧 canvas.drawArc(loadingRectF, topDegree, arc, false, mPaint); canvas.drawArc(loadingRectF, bottomDegree, arc, false, mPaint); canvas.drawArc(loadingRectF, thirdDegree, arc, false, mPaint); mPaint.setColor(Color.GRAY); //画扫描线 -- 通过修改top值来实现一直往下扫描效果 canvas.drawRect(scanRect.left, scanRect.top, scanRect.right, scanRect.top + 1, mPaint); scanRect.top += scanDis; if(scanRect.top >= scanRect.bottom){ scanRect.top = (int) loadingRectF.top + 20; } //圆弧滚动 -- 通过修改圆弧的初始值来实现滚动 startRotating(); }else{//结束扫描 完成扫描 Bitmap downMap = BitmapFactory.decodeResource(getResources(), mapDown); Matrix downMatrix = new Matrix(); downMatrix.postScale(2.0f, 2.0f); Bitmap newDownMap = Bitmap.createBitmap(downMap, 0,0, downMap.getWidth(), downMap.getHeight(), downMatrix, true); canvas.drawBitmap(newDownMap, mWidth/2 - newDownMap.getWidth()/2, mHeight/2 - newDownMap.getHeight()/2, mPaint); } } 

代码里面都注释的很清楚了,我想不需要另外在说明了。还有几个方法就是圆弧滚动的实现以及开始扫描和完成扫描


这里写图片描述
这里写图片描述

最后,通过调用startScan方法即可执行扫描,调用stopScan完成扫描。

PS:最后说明一句,由于开始扫描和完成扫描没有实现动画效果感觉有点突兀,希望懂的朋友可以指点或者帮忙实现下也是可以滴,哈哈···

原文链接:https://yq.aliyun.com/articles/515335
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章