android 自定义view 实现定制二维码扫描框

2023-12-18 12:13| 来源: 网络整理| 查看: 265

上一篇文章说到如何使用google的zxing开源框架android导入zxing进行二维码开发，本篇就讲讲如何通过自定义ViewFinderView这个类来制作我们自己的扫描框。

首先在com\google\zxing\client\android目录下找到ViewFinderView这个类，这个View就是用来绘制二维码扫描的页面的

具体修改代码如下：

package com.google.zxing.client.android; import com.google.zxing.ResultPoint; import com.google.zxing.client.android.camera.CameraManager; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.graphics.Typeface; import android.util.AttributeSet; import android.view.View; import java.util.ArrayList; import java.util.Collection; import java.util.HashSet; import java.util.List; /** * This view is overlaid on top of the camera preview. It adds the viewfinder rectangle and partial * transparency outside it, as well as the laser scanner animation and result points. * * @author [email protected] (Daniel Switkin) */ public final class ViewfinderView extends View { //维护cameraManager变量 private CameraManager cameraManager; //刷新界面的时间 private static final long ANIMATION_DELAY = 10L ; private static final int OPAQUE = 0xFF ; //四个绿色边角对应的长度 private int ScreenRate ; //四个绿色边角对应的宽度 private static final int CORNER_WIDTH = 10 ; //扫描框中中间线的宽度 private static final int MiDDLE_LINE_WIDTH = 6 ; //扫描框中的中间线与扫描框左右的间隙 private static final int MIDDLE_LINE_PADDING = 5; //中间那条线每次刷新移动的距离 private static final int SPEEN_DISTANCE = 5 ; //手机的屏幕密度 private static float density ; //字体大小 private static final int TEXT_SIZE = 16 ; //字体距离扫描框下面的距离 private static final int TEXT_PADDING_TOP = 30; //画笔对象的引用 private Paint paint ; //中间滑动线的最顶端位置 private int slideTop ; //中间滑动线的最底端位置 private int slideBottom ; private Bitmap resultBitmap ; private final int maskColor ; private final int resultColor ; private final int resultPointColor ; private Collection possibleResultPoints ; private Collection lastPossibleResultPoints ; boolean isFirst ; public ViewfinderView( Context context , AttributeSet attrs ){ super(context , attrs); density = context.getResources().getDisplayMetrics().density; //像素转化成dp ScreenRate = (int) (20*density); paint = new Paint(); Resources resources = getResources(); maskColor = resources.getColor(R.color.viewfinder_mask); resultColor = resources.getColor(R.color.result_view); resultPointColor = resources.getColor(R.color.possible_result_points); possibleResultPoints = new HashSet(5); } //初始化cameraManager对象 public void setCameraManager(CameraManager cameraManager) { this.cameraManager = cameraManager; } @Override protected void onDraw(Canvas canvas) { //中间的扫描框,想要修改扫描框的大小可以去CameraManager里面修改 Rect frame = cameraManager.getFramingRect(); if( frame == null ){ return; } //初始化中间线滑动的最上边和最下边 if( !isFirst ){ isFirst = true ; slideTop = frame.top; slideBottom = frame.bottom ; } //获取屏幕的宽和高 int width = canvas.getWidth() ; int height = canvas.getHeight() ; paint.setColor(resultBitmap != null ? resultColor : maskColor ); //画出扫描框外面的阴影部分，共四个部分，扫描框的上面到屏幕上面，扫描框的下面到屏幕下面 //扫描框的左边面到屏幕左边，扫描框的右边到屏幕右边 canvas.drawRect(0, 0, width, frame.top, paint); canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint); canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint); canvas.drawRect(0, frame.bottom + 1, width, height, paint); if (resultBitmap != null) { // Draw the opaque result bitmap over the scanning rectangle paint.setAlpha(OPAQUE); canvas.drawBitmap(resultBitmap, frame.left, frame.top, paint); }else { //画扫描框边上的角，总共8个部分 paint.setColor(Color.GREEN); canvas.drawRect(frame.left, frame.top, frame.left + ScreenRate, frame.top + CORNER_WIDTH, paint); canvas.drawRect(frame.left, frame.top, frame.left + CORNER_WIDTH, frame.top + ScreenRate, paint); canvas.drawRect(frame.right - ScreenRate, frame.top, frame.right, frame.top + CORNER_WIDTH, paint); canvas.drawRect(frame.right - CORNER_WIDTH, frame.top, frame.right, frame.top + ScreenRate, paint); canvas.drawRect(frame.left, frame.bottom - CORNER_WIDTH, frame.left + ScreenRate, frame.bottom, paint); canvas.drawRect(frame.left, frame.bottom - ScreenRate, frame.left + CORNER_WIDTH, frame.bottom, paint); canvas.drawRect(frame.right - ScreenRate, frame.bottom - CORNER_WIDTH, frame.right, frame.bottom, paint); canvas.drawRect(frame.right - CORNER_WIDTH, frame.bottom - ScreenRate, frame.right, frame.bottom, paint); //绘制中间的线,每次刷新界面，中间的线往下移动SPEEN_DISTANCE slideTop += SPEEN_DISTANCE; if(slideTop >= frame.bottom){ slideTop = frame.top; } canvas.drawRect(frame.left + MIDDLE_LINE_PADDING, slideTop - MiDDLE_LINE_WIDTH/2, frame.right - MIDDLE_LINE_PADDING,slideTop + MiDDLE_LINE_WIDTH/2, paint); //画扫描框下面的字 paint.setColor(Color.WHITE); paint.setTextSize(TEXT_SIZE * density); paint.setAlpha(0x40); paint.setTypeface(Typeface.create("System", Typeface.BOLD)); canvas.drawText("请将二维码对准屏幕正中央扫描框", frame.left, (float) (frame.bottom + (float)TEXT_PADDING_TOP *density), paint); Collection currentPossible = possibleResultPoints; Collection currentLast = lastPossibleResultPoints; if (currentPossible.isEmpty()) { lastPossibleResultPoints = null; } else { possibleResultPoints = new HashSet(5); lastPossibleResultPoints = currentPossible; paint.setAlpha(OPAQUE); paint.setColor(resultPointColor); for (ResultPoint point : currentPossible) { canvas.drawCircle(frame.left + point.getX(), frame.top + point.getY(), 6.0f, paint); } } if (currentLast != null) { paint.setAlpha(OPAQUE / 2); paint.setColor(resultPointColor); for (ResultPoint point : currentLast) { canvas.drawCircle(frame.left + point.getX(), frame.top + point.getY(), 3.0f, paint); } } //只刷新扫描框的内容，其他地方不刷新 postInvalidateDelayed(ANIMATION_DELAY, frame.left, frame.top, frame.right, frame.bottom); } } public void drawViewfinder() { resultBitmap = null; invalidate(); } public void drawResultBitmap(Bitmap barcode) { resultBitmap = barcode; invalidate(); } public void addPossibleResultPoint(ResultPoint point) { possibleResultPoints.add(point); } }

修改完毕后直接运行zxing这个项目，可以看到取景框已经变得比较好看

这里写图片描述

参考博客：Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果

【本文地址】

公司简介

联系我们