高仿仿微信界面二维码扫描效果 之 Android 基于google Zxing实现二维码、条形码扫描

绝大多数android开发者都是使用google Zxing来实现二维码、条形码扫描，但官方和网上很多demo的扫描界面让人不忍直视，今天我也做了一个，界面和运行效都是高仿微信最新版的扫描效果，运行效果图如下：



主要是修改了ViewfindView类，我就不多解释了，代码里有详细的注释，相信大家很容易看懂的。

/*
* Copyright (C) 2008 ZXing authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0 *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.zxing.view;

import java.util.Collection;
import java.util.HashSet;

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.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.View;

import com.google.zxing.ResultPoint;
import com.qrcode.R;
import com.zxing.camera.CameraManager;

/**
* 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.
*/
public final class ViewfinderView extends View {
private static final String TAG = "log";
/**
* 刷新界面的时间
*/
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<ResultPoint>(5);
}

@Override
public void onDraw(Canvas canvas) {
//中间的扫描框，你要修改扫描框的大小，去CameraManager里面修改
Rect frame = CameraManager.get().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);

//TODO 使用微信图片绘制
Rect rect = new Rect();
rect.left = frame.left;
rect.top = frame.top;
rect.right = frame.left + 24;
rect.bottom = frame.top + 24;
canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr1))).getBitmap(), null, rect, paint);

rect.left = frame.right - 24;
rect.top = frame.top;
rect.right = frame.right;
rect.bottom = frame.top + 24;
canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr2))).getBitmap(), null, rect, paint);

rect.left = frame.left;
rect.top = frame.bottom - 24;
rect.right = frame.left + 24;
rect.bottom = frame.bottom;
canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr3))).getBitmap(), null, rect, paint);

rect.left = frame.right - 24;
rect.top = frame.bottom - 24;
rect.right = frame.right;
rect.bottom = frame.bottom;
canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr4))).getBitmap(), null, rect, paint);

//绘制中间的线,每次刷新界面，中间的线往下移动SPEEN_DISTANCE
slideTop += SPEEN_DISTANCE;
if (slideTop >= frame.bottom) {
slideTop = frame.top;
}
//TODO 使用微信扫描的图片
Rect lineRect = new Rect();
lineRect.left = frame.left;
lineRect.right = frame.right;
lineRect.top = slideTop;
lineRect.bottom = slideTop + 18;
canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.qrcode_scan_line))).getBitmap(), null, lineRect, paint);

//画扫描框下面的字
paint.setColor(Color.WHITE);
paint.setTextSize(TEXT_SIZE * density);
paint.setAlpha(0x40);
paint.setTypeface(Typeface.DEFAULT_BOLD);
String text = getResources().getString(R.string.scan_text);
float textWidth = paint.measureText(text);
canvas.drawText(text, (width - textWidth) / 2, (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();
}

/**
* Draw a bitmap with the result points highlighted instead of the live
* scanning display.
*
* @param barcode An image of the decoded barcode.
*/
public void drawResultBitmap(Bitmap barcode) {
resultBitmap = barcode;
invalidate();
}

public void addPossibleResultPoint(ResultPoint point) {
possibleResultPoints.add(point);
}

}

参考来源：/article/1645794.html

http://blog.csdn.net/tangren03/article/details/7831826

项目下载：http://download.csdn.net/detail/tgzzl/7400399