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

上一篇文章说到如何使用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 dswitkin@google.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 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果