Android自定义View实现两种二维码的扫描效果

元梓珊

目录

• 背景
  
• 横线效果
  
• 网格效果
  
• 基础属性
  
• 绘制背景色
  
• 绘制边框线
  
• 绘制四个边角线
  
• 扫描线绘制及移动
  
• 特点
  

背景

最近在开发新项目时，使用了扫描二维码的功能，一般扫描二维码的效果是一条横线从上到下循环移动，这次却换成了网格图片。网上的大多数第三方库实现类似效果时 网格图片被拉伸变形。为了实现效果，只能动手写，话不多说，先看效果。(片尾附有代码地址)

横线效果

网格效果

基础属性

这里自定义了一些常见属性：
scan_image扫描图片资源scan_duration扫描一次时间 msscan_width正方形扫描框宽度scan_bg_color除正方形扫描框之外的背景颜色scan_rect_width正方形扫描框边框宽度scan_rect_color正方形扫描框边框颜色scan_border_width扫描框四个边角线的宽度scan_border_length扫描框四个边角线的长度scan_border_color扫描框四个边角线的颜色
绘制背景色

首先定义正方形扫描框矩形的位置，这么默认使用屏幕中心的位置

1. private fun createRect() {
   
2.         val leftOffset = (width - mScanWidth) / 2f
   
3.         val topOffset = (height - mScanWidth) / 2f
   
4.         mRectFrameRect =
   
5.             RectF(leftOffset, topOffset, leftOffset + mScanWidth, topOffset + mScanWidth)
   
6. 
   
7.         val scaleHeight = mScanWidth.toFloat() / mLineBitmap!!.width * mLineBitmap!!.height
   
8.         mLineBitmap =
   
9.             Bitmap.createScaledBitmap(mLineBitmap!!, mScanWidth, scaleHeight.toInt(), true)
   
10. 
    
11. 
    
12.     }

复制代码

绘制背景色

1. /**
   
2.      * 绘制背景色
   
3.      */
   
4.     private fun drawScanBackground(canvas: Canvas?) {
   
5.         mPaint?.style = Paint.Style.FILL
   
6.         mPaint?.color = mBackgroundColor
   
7.         val canvasWidth = canvas?.width
   
8.         val canvasHeight = canvas?.height
   
9.         mPaint?.let {
   
10.             canvas?.drawRect(0f, 0f, canvasWidth!!.toFloat(), mRectFrameRect!!.top, it)
    
11.             canvas?.drawRect(
    
12.                 0f,
    
13.                 mRectFrameRect!!.top - mBorderWidth / 2,
    
14.                 mRectFrameRect!!.left,
    
15.                 mRectFrameRect!!.bottom + mBorderWidth / 2,
    
16.                 it
    
17.             )
    
18.             canvas?.drawRect(
    
19.                 mRectFrameRect!!.right,
    
20.                 mRectFrameRect!!.top - mBorderWidth / 2,
    
21.                 canvasWidth!!.toFloat(),
    
22.                 mRectFrameRect!!.bottom,
    
23.                 it
    
24.             )
    
25.             canvas?.drawRect(
    
26.                 0f,
    
27.                 mRectFrameRect!!.bottom - mBorderWidth / 2,
    
28.                 canvasWidth!!.toFloat(),
    
29.                 canvasHeight!!.toFloat(),
    
30.                 it
    
31.             )
    
32.         }
    
33. 
    
34.     }

复制代码

将阴影部分分为四块，使用canvas.drawRect分别绘制。

绘制边框线

1. /**
   
2.      * 画边框线
   
3.      */
   
4.     private fun drawBorderLine(canvas: Canvas?) {
   
5.         mPaint?.color = mRectColor
   
6.         mPaint?.style = Paint.Style.STROKE
   
7.         mPaint?.strokeWidth = mRectWidth.toFloat()
   
8.         mRectFrameRect?.let { mPaint?.let { it1 -> canvas?.drawRect(it, it1) } }
   
9.     }

复制代码

通过上面定义的扫描框矩形，绘制扫描框的边框线。

绘制四个边角线

四个边角线为折线，使用自定义view中的path实现比较简单。

1.     /**
   
2.      * 画四个角
   
3.      */
   
4.     private fun drawBorderCorner(canvas: Canvas?) {
   
5.         mPaint?.color = mBorderColor
   
6.         mPaint?.style = Paint.Style.STROKE
   
7.         val connerWidth = mBorderWidth / 2
   
8.         mPaint?.strokeWidth = mBorderWidth.toFloat()
   
9. 
   
10.         mPath.reset()
    
11.         //左上     
    
12.         mPath.moveTo(mRectFrameRect!!.left, mRectFrameRect!!.top - connerWidth + mBorderLength)
    
13.         mPath.lineTo(mRectFrameRect!!.left, mRectFrameRect!!.top)
    
14.         mPath.lineTo(mRectFrameRect!!.left - connerWidth + mBorderLength, mRectFrameRect!!.top)
    
15.          //右上     
    
16.         mPath.moveTo(mRectFrameRect!!.right + connerWidth - mBorderLength, mRectFrameRect!!.top)
    
17.         mPath.lineTo(mRectFrameRect!!.right, mRectFrameRect!!.top)
    
18.         mPath.lineTo(mRectFrameRect!!.right, mRectFrameRect!!.top - mBorderWidth + mBorderLength)
    
19.         //左下   
    
20.         mPath.moveTo(mRectFrameRect!!.left, mRectFrameRect!!.bottom + mBorderWidth - mBorderLength)
    
21.         mPath.lineTo(mRectFrameRect!!.left, mRectFrameRect!!.bottom)
    
22.         mPath.lineTo(mRectFrameRect!!.left - mBorderWidth + mBorderLength, mRectFrameRect!!.bottom)
    
23.          //右下
    
24.         mPath.moveTo(mRectFrameRect!!.right, mRectFrameRect!!.bottom + mBorderWidth - mBorderLength)
    
25.         mPath.lineTo(mRectFrameRect!!.right, mRectFrameRect!!.bottom)
    
26.         mPath.lineTo(mRectFrameRect!!.right + mBorderWidth - mBorderLength, mRectFrameRect!!.bottom)
    
27. 
    
28.         canvas?.drawPath(mPath, mPaint!!)
    
29.     }

复制代码

扫描线绘制及移动

绘制扫描线使用了canvas.drawBitmap 方法 ，通过裁剪显示位置绘制扫描图片。

1.   /**
   
2.      * 绘制扫描线
   
3.      */
   
4.     private fun drawScanLine(canvas: Canvas?) {
   
5.         canvas?.save()
   
6.         canvas?.restore()
   
7. 
   
8.         val dstGridRectF = RectF(
   
9.             mRectFrameRect!!.left,
   
10.             mRectFrameRect!!.top,
    
11.             mRectFrameRect!!.right,
    
12.             mRectFrameRect!!.top + mMoveStep
    
13.         )
    
14.         val srcRect = Rect(
    
15.             0,
    
16.             (mLineBitmap!!.height - dstGridRectF.height()).toInt(),
    
17.             mLineBitmap!!.width,
    
18.             mLineBitmap!!.height
    
19.         )
    
20.         mLineBitmap?.let {
    
21.             canvas?.drawBitmap(it, srcRect, dstGridRectF, mPaint)
    
22.         }
    
23. 
    
24.         mMoveStep += dp2px(3F)
    
25.         if (mMoveStep >= mScanWidth + mLineBitmap!!.height / 2) {
    
26.             mMoveStep = 0F
    
27.         }
    
28.         postInvalidateDelayed(mDelayTimes.toLong())
    
29.     }

复制代码

这里通过调用postInvalidateDelayed 不停延迟绘制图片来实现扫描图的移动效果。

特点

像zxing 等三方库 直接使用扫描图片来绘制效果，由于扫描框是正方形，如果网格扫描图是长方形图片，则会导致被拉伸为正方形显示，图片变形。为了解决网格图的变形问题，这里对图片进行缩放处理，避免变形。

1. val scaleHeight = mScanWidth.toFloat() / mLineBitmap!!.width * mLineBitmap!!.height
   
2.         mLineBitmap =
   
3.             Bitmap.createScaledBitmap(mLineBitmap!!, mScanWidth, scaleHeight.toInt(), true)

复制代码

代码简洁，不用区分是线性扫描还是网格扫描，都可以直接使用，使用时，只需传入需要的扫描图片即可。
项目地址：github.com/AndroidYou/ScanCodeView
以上就是Android自定义View实现两种二维码的扫描效果的详细内容，更多关于Android二维码扫描的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

在等待撞

感谢楼主分享。

傅娅闺

顶顶更健康！！！