欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 09:39:55
...

上一篇文章说到如何使用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 aaa@qq.com (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<ResultPoint> possibleResultPoints ;
  private Collection<ResultPoint> 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<ResultPoint> currentPossible = possibleResultPoints;
      Collection<ResultPoint> currentLast = lastPossibleResultPoints;
      if (currentPossible.isEmpty()) {
        lastPossibleResultPoints = null;
      } else {
        possibleResultPoints = new HashSet<ResultPoint>(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 自定义view 实现定制二维码扫描框

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