03_android集成zxing并自定义扫码界面
一.zxing_core jar包生成
-
下载完成和可以看到zxing sdk的目录结构如下
-
把core目录下的文件打成一个jar包
-
使用Intellij IDEA创建一个java项目,命名为zxing
-
把sdk中的core目录下的com目录完整拷贝到java项目的src目录下
-
生成zxing_core_3.4.0.jar文件
-
二.在android studio中集成zxing
-
新建一个android studio项目
-
新建一个库module lib_zxing,并把上一步生成的jar包拷贝到libs目录下
-
在zxing_core_3.4.0.jar文件上点右键->Add As Library…
-
从zxing sdk的android目录下拷贝ViewfinderView.java、CameraManager.java到lib_zxing中,并做相应修改
-
拷贝zxing sdk的android目录下colors.xml到lib_zxing中,并做相应修改
<?xml version="1.0" encoding="UTF-8"?> <resources> <color name="viewfinder_mask">#60000000</color> <color name="result_view">#b0000000</color> <color name="viewfinder_laser">#ffcc0000</color> <!-- Android standard ICS color --> <color name="possible_result_points">#c0ffbd21</color> <!-- Android standard ICS color --> <color name="result_points">#c099cc00</color> <!-- Android standard ICS color --> </resources>
-
从zxing sdk的android目录下拷贝capture.xml layout文件到lib_zxing中,并做相应修改
<?xml version="1.0" encoding="UTF-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <SurfaceView android:id="@+id/preview_view" android:layout_width="fill_parent" android:layout_height="fill_parent"/> <com.aykj.lib_zxing.scanner.ViewfinderView android:id="@+id/viewfinder_view" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </merge>
-
从zxing sdk的android目录下拷贝CaptureActivity.java文件到lib_zxing中,并做相应修改,同时根据CaptureActivity.java拷贝其他用到的java文件、xml文件
-
最后不要忘了,在android6.0及以后的版本需要收到去申请照相机、闪光灯等权限
-
按照上面的步骤一步步的进行修改,直至项目不报错位置,如果觉得麻烦,可以去下载我修改好的
三.竖屏不识别条形码问题解决
- 按照上面的步骤集成后会发现,在竖屏情况下不能识别条线码,因此需要对其进行修改,使其能在竖屏模式下识别条形码,参考将zxing扫码界面改为竖屏的问题进行修改
-
限制CaptureActivity为竖屏显示,并禁用横屏切换
将:
if (prefs.getBoolean(PreferencesActivity.KEY_DISABLE_AUTO_ORIENTATION, true)) { setRequestedOrientation(getCurrentOrientation()); } else { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE); }
改为:
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
-
在CameraManager中,修改预览缩放。主要根据长宽比对预览效果进行了分类。如果不需要横屏了,可以直接取竖屏的设置
将:
rect.left = rect.left * cameraResolution.x / screenResolution.x; rect.right = rect.right * cameraResolution.x / screenResolution.x; rect.top = rect.top * cameraResolution.y / screenResolution.y; rect.bottom = rect.bottom * cameraResolution.y / screenResolution.y;
改为:
if (screenResolution.x < screenResolution.y) { // 下面为竖屏模式 rect.left = framingRect.left * cameraResolution.y / screenResolution.x; rect.right = framingRect.right * cameraResolution.y / screenResolution.x; rect.top = framingRect.top * cameraResolution.x / screenResolution.y; rect.bottom = framingRect.bottom * cameraResolution.x / screenResolution.y; } else { // 下面为横屏模式 rect.left = framingRect.left * cameraResolution.x / screenResolution.x; rect.right = framingRect.right * cameraResolution.x / screenResolution.x; rect.top = framingRect.top * cameraResolution.y / screenResolution.y; rect.bottom = framingRect.bottom * cameraResolution.y / screenResolution.y; }
-
在CameraManager中,修改解析函数 buildLuminanceSource(),根据竖屏条件,将获得数据的宽和高置换,使其适应竖屏环境
将:
return new PlanarYUVLuminanceSource(data, width, height, rect.left, rect.top, rect.width(), rect.height(), false);
改为:
PlanarYUVLuminanceSource source; Point point = configManager.getScreenResolution(); if (point.x < point.y) { byte[] rotatedData = new byte[data.length]; int newWidth = height; int newHeight = width; for (int y = 0; y < height; y++) { for (int x = 0; x < width; x++) rotatedData[x * newWidth + newWidth - 1 - y] = data[x + y * width]; } source = new PlanarYUVLuminanceSource(rotatedData, newWidth, newHeight, rect.left, rect.top, rect.width(), rect.height(), false); } else { source = new PlanarYUVLuminanceSource(data, width, height, rect.left, rect.top, rect.width(), rect.height(), false); } return source;
-
在CameraConfigurationUtils中,需要在findBestPreviewSizeValue方法中将screenAspectRatio分情况设置,因为screenAspectRatio的要求总是大值比小值
将:
double screenAspectRatio = screenResolution.x / (double) screenResolution.y;
改为:
double screenAspectRatio = 0; if(screenResolution.x < screenResolution.y) { //竖屏 screenAspectRatio = screenResolution.y / (double) screenResolution.x; } else { //横屏 screenAspectRatio = screenResolution.x / (double) screenResolution.y; }
-
在CameraConfigurationUtils中,删除如下代码,原因是对于镜头分辨率高,而屏幕分辨率低的手机,这段代码直接导致扫码插件采用较低的分辨率去生成用于解析的位图,所以直接去掉。然后你就会发现低分辨率的手机,对二维码、条码的识别率显著提高。
if (maybeFlippedWidth == screenResolution.x && maybeFlippedHeight == screenResolution.y) { Point exactPoint = new Point(realWidth, realHeight); Log.i(TAG, "Found preview size exactly matching screen size: " + exactPoint); return exactPoint; }
四.扫码结果获取
-
在CaptureActivity的handleDecode方法中增加如下代码:
String scanResult = rawResult.getText(); Intent intent = new Intent(); intent.putExtra("scanResult", !TextUtils.isEmpty(scanResult) ? scanResult:""); setResult(Activity.RESULT_OK, intent); finish();
-
在跳转CaptureActivity时通过startActivityForResult进行跳转,在onActivityResult回调方法中即可获取扫描结果
Intent intent = new Intent(mContext, CaptureActivity.class); startActivityForResult(intent, 101);
@Override protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { super.onActivityResult(requestCode, resultCode, data); switch (requestCode) { case 101: if (resultCode == RESULT_OK) { String scanResult = data.getStringExtra("scanResult"); mTvResult.setText("扫描结果:" + scanResult); } break; } }
五.扫码界面自定义
从上面的图中可以看出,zxing的demo提供的扫码界面不能满足我们的要求,可以说是有点丑😊,接下来我们就来自定义一个扫码界面:
-
去除中间的红色线条,在ViewfinderView的onDraw方法中删除如下代码即可
paint.setColor(laserColor); paint.setAlpha(SCANNER_ALPHA[scannerAlpha]); scannerAlpha = (scannerAlpha + 1) % SCANNER_ALPHA.length; int middle = frame.height() / 2 + frame.top; canvas.drawRect(frame.left + 2, middle - 1, frame.right - 1, middle + 2, paint);
-
绘制取景框边框,修改ViewfinderView的onDraw方法
public void onDraw(Canvas canvas) { ... if (resultBitmap != null) { ... } else { //绘制边框 paint.setColor(previewBorderColor); paint.setStrokeWidth(previewBorderWidth); paint.setStyle(Paint.Style.STROKE); canvas.drawRect(frame.left, frame.top, frame.right, frame.bottom, paint); paint.setStyle(Paint.Style.FILL); ... } }
-
分别在取景框的四个角上绘制8个小矩形, 修改ViewfinderView的onDraw方法
public void onDraw(Canvas canvas) { ... if (resultBitmap != null) { ... } else { //绘制边框 ... //绘制8个小矩形 paint.setColor(previewBorderColor); Rect leftTopHorizontal = new Rect(frame.left, frame.top, frame.left + rectWidth, frame.top + rectHeight); Rect leftTopVertical = new Rect(frame.left, frame.top, frame.left + rectHeight, frame.top + rectWidth); Rect rightTopHorizontal = new Rect(frame.right - rectWidth, frame.top, frame.right, frame.top + rectHeight); Rect rightTopVertical = new Rect(frame.right - rectHeight, frame.top, frame.right, frame.top + rectWidth); Rect bottomLeftHorizontal = new Rect(frame.left, frame.bottom - rectHeight, frame.left + rectWidth, frame.bottom); Rect bottomLeftVertical = new Rect(frame.left, frame.bottom - rectWidth, frame.left + rectHeight, frame.bottom); Rect bottomRightHorizontal = new Rect(frame.right - rectWidth, frame.bottom - rectHeight, frame.right, frame.bottom); Rect bottomRightVertical = new Rect(frame.right - rectHeight, frame.bottom - rectWidth, frame.right, frame.bottom); canvas.drawRect(leftTopHorizontal, paint); canvas.drawRect(leftTopVertical, paint); canvas.drawRect(rightTopHorizontal, paint); canvas.drawRect(rightTopVertical, paint); canvas.drawRect(bottomLeftHorizontal, paint); canvas.drawRect(bottomLeftVertical, paint); canvas.drawRect(bottomRightHorizontal, paint); canvas.drawRect(bottomRightVertical, paint); ... } }
-
绘制上下移动的扫描线
private static final long ANIMATION_DELAY = 10L; private float[]position=new float[]{0f,0.5f,1f}; private int[]colors=new int[]{0x2044a870,0xff44a870,0x2044a870}; private int SPEED = 5; public void onDraw(Canvas canvas) { ... if (resultBitmap != null) { ... } else { //绘制边框 ... //绘制8个小矩形 ... //绘制上下移动的扫描线 slideDistance += SPEED; if(frame.top + slideDistance >= frame.bottom) { slideDistance = 0; } paint.setShader(new LinearGradient(frame.left, frame.top, frame.right, frame.bottom, colors, position, Shader.TileMode.CLAMP)); Rect lineRect = new Rect(frame.left, frame.top + slideDistance, frame.right, frame.top + slideDistance + scanLineHeight); canvas.drawRect(lineRect, paint); paint.setShader(null); ... } }
-
绘制说明文字
private static final long ANIMATION_DELAY = 10L; private float[]position=new float[]{0f,0.5f,1f}; private int[]colors=new int[]{0x2044a870,0xff44a870,0x2044a870}; private int SPEED = 5; public void onDraw(Canvas canvas) { ... if (resultBitmap != null) { ... } else { //绘制边框 ... //绘制8个小矩形 ... //绘制上下移动的扫描线 ... //绘制说明文字 paint.setColor(Color.WHITE); paint.setTextSize(scanTextSize); paint.setAlpha(0x40); paint.setTypeface(Typeface.create("System", Typeface.BOLD)); String text = getResources().getString(R.string.scan_text); float textWidth = paint.measureText(text); Paint.FontMetrics fm = paint.getFontMetrics(); float textHeight = fm.descent - fm.ascent; canvas.drawText( text, (width - textWidth) / 2, (float) (frame.bottom + scanTextPaddingTop), paint); } }
-
绘制闪光灯控制按钮和选择相册按钮
private static final long ANIMATION_DELAY = 10L; private float[]position=new float[]{0f,0.5f,1f}; private int[]colors=new int[]{0x2044a870,0xff44a870,0x2044a870}; private int SPEED = 5; public void onDraw(Canvas canvas) { ... if (resultBitmap != null) { ... } else { //绘制边框 ... //绘制8个小矩形 ... //绘制上下移动的扫描线 ... //绘制说明文字 ... //绘制闪光灯控制按钮/选相册按钮 float density = getResources().getDisplayMetrics().density; int buttonSize = 50; int buttonMarginTop = 20; paint.setColor(Color.BLACK); paint.setAlpha(185); leftButtonRect = new Rect(frame.left, (int) (frame.bottom + scanTextPaddingTop + textHeight + buttonMarginTop * density), (int) (frame.left + buttonSize * density), (int) (frame.bottom + scanTextPaddingTop + textHeight + buttonMarginTop * density + buttonSize * density)); canvas.drawRoundRect(new RectF(leftButtonRect), buttonSize / 2 * density, buttonSize / 2 * density, paint); canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.s_light))).getBitmap(), null, leftButtonRect, paint); rightButtonRect = new Rect((int) (frame.right - buttonSize * density), (int) (frame.bottom + scanTextPaddingTop + textHeight + buttonMarginTop * density), frame.right, (int) (frame.bottom + scanTextPaddingTop + textHeight + buttonMarginTop * density + buttonSize * density)); canvas.drawRoundRect(new RectF(rightButtonRect), buttonSize / 2 * density, buttonSize / 2 * density, paint); canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.s_img))).getBitmap(), null, rightButtonRect, paint); } }
到此,扫码界面就自定义完了,我们来看下效果,是不是比一开始的好看多了😊
六.闪光灯控制按钮/选择相册按钮点击事件处理
-
重写ViewfinderView的onTouchEvent方法,根据点击的位置坐标判断是否点击了闪光灯控制按钮或者选择相册按钮
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_UP: int x = (int) event.getX(); int y = (int) event.getY(); if(leftButtonRect.contains(x, y)) { //点击了闪关灯控制按钮 } if(rightButtonRect.contains(x, y)) { //点击了选择相册按钮 } break; } return true; }
-
自定义接口,将点击的事件传递给其他View或Activity
public final class ViewfinderView extends View { private OnButtonClickListener onButtonClickListener; @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_UP: int x = (int) event.getX(); int y = (int) event.getY(); if(leftButtonRect.contains(x, y)) { //点击了闪关灯控制按钮 if (onButtonClickListener != null) { onButtonClickListener.onChangeLight(); } } if(rightButtonRect.contains(x, y)) { //点击了选择相册按钮 if (onButtonClickListener != null) { onButtonClickListener.onSelectedAlbum(); } } break; } return true; } public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener) { this.onButtonClickListener = onButtonClickListener; } public interface OnButtonClickListener { void onChangeLight(); void onSelectedAlbum(); } }
七.闪光灯开闭控制
-
在CaptureActivity的onKeyDown方法中有这样一段代码:
@Override public boolean onKeyDown(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_VOLUME_DOWN: cameraManager.setTorch(false); return true; case KeyEvent.KEYCODE_VOLUME_UP: cameraManager.setTorch(true); return true; } return super.onKeyDown(keyCode, event); }
-
不难看出
cameraManager.setTorch(true);
表示开启闪光灯
cameraManager.setTorch(false);
表示关闭闪光灯 -
直接上代码:
public final class CaptureActivity extends Activity implements SurfaceHolder.Callback, ViewfinderView.OnButtonClickListener { private boolean mLighten; protected void onResume() { super.onResume(); ... viewfinderView = (ViewfinderView) findViewById(R.id.viewfinder_view); viewfinderView.setCameraManager(cameraManager); viewfinderView.setOnButtonClickListener(this); } @Override public void onChangeLight() { mLighten = !mLighten; cameraManager.setTorch(mLighten); } @Override public void onSelectedAlbum() { } }
-
这里就不关灯搞事情了,大家可以自己去试下😊
八.从相册选择二维码识别
-
在onSelectedAlbum回调方法中编写选择相册的逻辑,这了使用PictureSelector
@Override public void onSelectedAlbum() { PictureSelector.create(this) .openGallery(PictureMimeType.ofImage()) .imageSpanCount(4)// 每行显示个数 int .selectionMode(PictureConfig.SINGLE)// 多选 or 单选 PictureConfig.MULTIPLE or PictureConfig.SINGLE .previewImage(true)// 是否可预览图片 true or false .isCamera(false)// 是否显示拍照按钮 true or false .isZoomAnim(true)// 图片列表点击 缩放效果 默认true .enableCrop(false)// 是否裁剪 true or false .compress(true)// 是否压缩 true or false .isGif(false)// 是否显示gif图片 true or false .freeStyleCropEnabled(true)// 裁剪框是否可拖拽 .showCropFrame(true)// 是否显示裁剪矩形边框 圆形裁剪时建议设为false .showCropGrid(true)// 是否显示裁剪矩形网格 圆形裁剪时建议设为false .circleDimmedLayer(false)// 是否圆形裁剪 true or false) .withAspectRatio(0,0)// int 裁剪比例 如16:9 3:2 3:4 1:1 可自定义 .cropCompressQuality(90)// 裁剪压缩质量 默认90 int .minimumCompressSize(300)// 小于300kb的图片不压缩 .synOrAsy(false)//同步true或异步false 压缩 默认同步 .forResult(PictureConfig.CHOOSE_REQUEST); }
-
处理相册回调
@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); switch (requestCode) { case PictureConfig.CHOOSE_REQUEST: if (resultCode == RESULT_OK) { List<LocalMedia> codeImages = PictureSelector.obtainMultipleResult(data); if(codeImages==null || codeImages.size()==0){ return; } LocalMedia localMedia=codeImages.get(0); String codeImagePath=""; if(localMedia.isCompressed()){ codeImagePath=localMedia.getCompressPath(); }else if(localMedia.isCut()){ codeImagePath=localMedia.getCutPath(); }else{ codeImagePath=localMedia.getPath(); } Bitmap qrCodeBitmap = QrCodeImageUtils.fileToBitmap(codeImagePath); Result result = QrCodeImageUtils.decodeFromPhoto(qrCodeBitmap); String text = result.getText(); Intent intent = new Intent(); intent.putExtra("scanResult", text); setResult(RESULT_OK, intent); finish(); } break; } }
public class QrCodeImageUtils { private static int MAX_WIDTH = 480; private static int MAX_HEIGHT = 800; /** * 将图片文件转为bitmap */ public static Bitmap fileToBitmap(String filePath) { Bitmap bitmap = null; final BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; bitmap = BitmapFactory.decodeFile(filePath, options); final int height = options.outHeight; final int width = options.outWidth; int inSampleSize = 1; if (height > MAX_HEIGHT || width > MAX_WIDTH) { final int heightRatio = Math.round((float) height/ (float) MAX_HEIGHT); final int widthRatio = Math.round((float) width / (float) MAX_WIDTH); inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio; } options.inSampleSize = inSampleSize; options.inJustDecodeBounds = false; bitmap = BitmapFactory.decodeFile(filePath, options); return bitmap; } /** * 解析图片中的 二维码 或者 条形码 * * @param photo 待解析的图片 * @return Result 解析结果,解析识别时返回NULL */ public static Result decodeFromPhoto(Bitmap photo) { Result rawResult = null; if (photo != null) { Bitmap smallBitmap = zoomBitmap(photo, photo.getWidth() / 2, photo.getHeight() / 2);// 为防止原始图片过大导致内存溢出,这里先缩小原图显示,然后释放原始Bitmap占用的内存 photo.recycle(); // 释放原始图片占用的内存,防止out of memory异常发生 MultiFormatReader multiFormatReader = new MultiFormatReader(); // 解码的参数 Hashtable<DecodeHintType, Object> hints = new Hashtable<>(2); // 可以解析的编码类型 Vector<BarcodeFormat> decodeFormats = new Vector<>(); if (decodeFormats.isEmpty()) { decodeFormats = new Vector<>(); Vector<BarcodeFormat> PRODUCT_FORMATS = new Vector<>(5); PRODUCT_FORMATS.add(BarcodeFormat.UPC_A); PRODUCT_FORMATS.add(BarcodeFormat.UPC_E); PRODUCT_FORMATS.add(BarcodeFormat.EAN_13); PRODUCT_FORMATS.add(BarcodeFormat.EAN_8); // PRODUCT_FORMATS.add(BarcodeFormat.RSS14); Vector<BarcodeFormat> ONE_D_FORMATS = new Vector<>(PRODUCT_FORMATS.size() + 4); ONE_D_FORMATS.addAll(PRODUCT_FORMATS); ONE_D_FORMATS.add(BarcodeFormat.CODE_39); ONE_D_FORMATS.add(BarcodeFormat.CODE_93); ONE_D_FORMATS.add(BarcodeFormat.CODE_128); ONE_D_FORMATS.add(BarcodeFormat.ITF); Vector<BarcodeFormat> QR_CODE_FORMATS = new Vector<>(1); QR_CODE_FORMATS.add(BarcodeFormat.QR_CODE); Vector<BarcodeFormat> DATA_MATRIX_FORMATS = new Vector<>(1); DATA_MATRIX_FORMATS.add(BarcodeFormat.DATA_MATRIX); // 这里设置可扫描的类型,我这里选择了都支持 decodeFormats.addAll(ONE_D_FORMATS); decodeFormats.addAll(QR_CODE_FORMATS); decodeFormats.addAll(DATA_MATRIX_FORMATS); } hints.put(DecodeHintType.POSSIBLE_FORMATS, decodeFormats); // 设置继续的字符编码格式为UTF8 // hints.put(DecodeHintType.CHARACTER_SET, "UTF8"); // 设置解析配置参数 multiFormatReader.setHints(hints); // 开始对图像资源解码 try { rawResult = multiFormatReader.decodeWithState(new BinaryBitmap(new HybridBinarizer(new BitmapLuminanceSource(smallBitmap)))); } catch (Exception e) { e.printStackTrace(); } } return rawResult; } /** * Resize the bitmap * * @param bitmap 图片引用 * @param width 宽度 * @param height 高度 * @return 缩放之后的图片引用 */ private static Bitmap zoomBitmap(Bitmap bitmap, int width, int height) { int w = bitmap.getWidth(); int h = bitmap.getHeight(); Matrix matrix = new Matrix(); float scaleWidth = ((float) width / w); float scaleHeight = ((float) height / h); matrix.postScale(scaleWidth, scaleHeight); return Bitmap.createBitmap(bitmap, 0, 0, w, h, matrix, true); } }
public class BitmapLuminanceSource extends LuminanceSource { private byte bitmapPixels[]; public BitmapLuminanceSource(Bitmap bitmap) { super(bitmap.getWidth(), bitmap.getHeight()); // 首先,要取得该图片的像素数组内容 int[] data = new int[bitmap.getWidth() * bitmap.getHeight()]; this.bitmapPixels = new byte[bitmap.getWidth() * bitmap.getHeight()]; bitmap.getPixels(data, 0, getWidth(), 0, 0, getWidth(), getHeight()); // 将int数组转换为byte数组,也就是取像素值中蓝色值部分作为辨析内容 for (int i = 0; i < data.length; i++) { this.bitmapPixels[i] = (byte) data[i]; } } @Override public byte[] getMatrix() { // 返回我们生成好的像素数据 return bitmapPixels; } @Override public byte[] getRow(int y, byte[] row) { // 这里要得到指定行的像素数据 System.arraycopy(bitmapPixels, y * getWidth(), row, 0, getWidth()); return row; } }
-
到此为止,一个完整的二维码扫描的功能就完成了