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

更新时间：2024年01月17日 15:31:25 作者：IT小码哥

这篇文章主要为大家详细介绍了Android如何自定义View实现两种二维码的扫描效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

背景

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

横线效果

网格效果

基础属性

这里自定义了一些常见属性：

scan_image	扫描图片资源
scan_duration	扫描一次时间 ms
scan_width	正方形扫描框宽度
scan_bg_color	除正方形扫描框之外的背景颜色
scan_rect_width	正方形扫描框边框宽度
scan_rect_color	正方形扫描框边框颜色
scan_border_width	扫描框四个边角线的宽度
scan_border_length	扫描框四个边角线的长度
scan_border_color	扫描框四个边角线的颜色

绘制背景色

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

 private fun createRect() {
        val leftOffset = (width - mScanWidth) / 2f
        val topOffset = (height - mScanWidth) / 2f
        mRectFrameRect =
            RectF(leftOffset, topOffset, leftOffset + mScanWidth, topOffset + mScanWidth)

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


    }

绘制背景色

/**
     * 绘制背景色
     */
    private fun drawScanBackground(canvas: Canvas?) {
        mPaint?.style = Paint.Style.FILL
        mPaint?.color = mBackgroundColor
        val canvasWidth = canvas?.width
        val canvasHeight = canvas?.height
        mPaint?.let {
            canvas?.drawRect(0f, 0f, canvasWidth!!.toFloat(), mRectFrameRect!!.top, it)
            canvas?.drawRect(
                0f,
                mRectFrameRect!!.top - mBorderWidth / 2,
                mRectFrameRect!!.left,
                mRectFrameRect!!.bottom + mBorderWidth / 2,
                it
            )
            canvas?.drawRect(
                mRectFrameRect!!.right,
                mRectFrameRect!!.top - mBorderWidth / 2,
                canvasWidth!!.toFloat(),
                mRectFrameRect!!.bottom,
                it
            )
            canvas?.drawRect(
                0f,
                mRectFrameRect!!.bottom - mBorderWidth / 2,
                canvasWidth!!.toFloat(),
                canvasHeight!!.toFloat(),
                it
            )
        }

    }

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

绘制边框线

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

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

绘制四个边角线

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

    /**
     * 画四个角
     */
    private fun drawBorderCorner(canvas: Canvas?) {
        mPaint?.color = mBorderColor
        mPaint?.style = Paint.Style.STROKE
        val connerWidth = mBorderWidth / 2
        mPaint?.strokeWidth = mBorderWidth.toFloat()

        mPath.reset()
        //左上     
        mPath.moveTo(mRectFrameRect!!.left, mRectFrameRect!!.top - connerWidth + mBorderLength)
        mPath.lineTo(mRectFrameRect!!.left, mRectFrameRect!!.top)
        mPath.lineTo(mRectFrameRect!!.left - connerWidth + mBorderLength, mRectFrameRect!!.top)
         //右上     
        mPath.moveTo(mRectFrameRect!!.right + connerWidth - mBorderLength, mRectFrameRect!!.top)
        mPath.lineTo(mRectFrameRect!!.right, mRectFrameRect!!.top)
        mPath.lineTo(mRectFrameRect!!.right, mRectFrameRect!!.top - mBorderWidth + mBorderLength)
        //左下    
        mPath.moveTo(mRectFrameRect!!.left, mRectFrameRect!!.bottom + mBorderWidth - mBorderLength)
        mPath.lineTo(mRectFrameRect!!.left, mRectFrameRect!!.bottom)
        mPath.lineTo(mRectFrameRect!!.left - mBorderWidth + mBorderLength, mRectFrameRect!!.bottom)
         //右下 
        mPath.moveTo(mRectFrameRect!!.right, mRectFrameRect!!.bottom + mBorderWidth - mBorderLength)
        mPath.lineTo(mRectFrameRect!!.right, mRectFrameRect!!.bottom)
        mPath.lineTo(mRectFrameRect!!.right + mBorderWidth - mBorderLength, mRectFrameRect!!.bottom)

        canvas?.drawPath(mPath, mPaint!!)
    }

扫描线绘制及移动

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

  /**
     * 绘制扫描线
     */
    private fun drawScanLine(canvas: Canvas?) {
        canvas?.save()
        canvas?.restore()

        val dstGridRectF = RectF(
            mRectFrameRect!!.left,
            mRectFrameRect!!.top,
            mRectFrameRect!!.right,
            mRectFrameRect!!.top + mMoveStep
        )
        val srcRect = Rect(
            0,
            (mLineBitmap!!.height - dstGridRectF.height()).toInt(),
            mLineBitmap!!.width,
            mLineBitmap!!.height
        )
        mLineBitmap?.let {
            canvas?.drawBitmap(it, srcRect, dstGridRectF, mPaint)
        }

        mMoveStep += dp2px(3F)
        if (mMoveStep >= mScanWidth + mLineBitmap!!.height / 2) {
            mMoveStep = 0F
        }
        postInvalidateDelayed(mDelayTimes.toLong())
    }

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

特点

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

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

代码简洁，不用区分是线性扫描还是网格扫描，都可以直接使用，使用时，只需传入需要的扫描图片即可。

项目地址：github.com/AndroidYou/ScanCodeView

以上就是Android自定义View实现两种二维码的扫描效果的详细内容，更多关于Android二维码扫描的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android仿正点闹钟时间齿轮滑动效果
这篇文章主要为大家详细介绍了Android仿正点闹钟时间齿轮滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
Android中深入学习对象的四种引用类型
这篇文章主要介绍Android中深入学习对象的四种引用类型，Java中，一切被视为对象，引用则是用来操纵对象的;在JDK1.2就把对象引用分为四种级别，从而使程序能更灵活控制它的生命周期，级别由高到底依次为强引用、软引用、弱引用、虚引用,需要的朋友可以参考一下
2021-10-10
android系统分享的自定义功能的示例代码
本篇文章主要介绍了android系统分享的自定义功能的示例代码，非常具有实用价值，需要的朋友可以参考下
2017-08-08
Android Admob接入原理及完整教程示例
这篇文章主要为大家介绍了Android Admob接入原理及完整教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Android 不同Activity间数据的传递 Bundle对象的应用
本篇文章小编为大家介绍，Android 不同Activity间数据的传递 Bundle对象的应用。需要的朋友参考下
2013-04-04
Android开发必备技巧之高效字符串筛选
在开发过程中或多或少都要使用一些方法去筛选符合我们要求的字符串，所以下面我们就来介绍一些在开发工作中常用到的字符串筛选方法，让大家都能掌握高效的字符串筛选技巧吧
2023-06-06
Android补间动画的实现示例
本文主要介绍了Android补间动画的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Android自定义view仿QQ的Tab按钮动画效果(示例代码)
这篇文章主要介绍了Android自定义view仿QQ的Tab按钮动画效果(示例代码),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下
2021-01-01
Android View滑动的实现分析示例
View滑动是Android实现自定义控件的基础，同时在开发中难免会遇到View的滑动处理，其实不管是那种滑动方法，基本思路是类似的；当点击事件传到View时，系统记下触摸点的坐标，手指移动时系统记下移动后的左边并算出偏移量，通过偏移量来修改View的坐标
2022-08-08
Android中二维码的扫描和生成(使用zxing库)
ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口,下面这篇文章主要给大家介绍了关于Android中二维码扫描和生成的相关资料,主要使用的zxing库,需要的朋友可以参考下
2022-09-09