《打造极致二维码扫描系列》 -- ZXing开发详解

什么是ZXing？

在Android平台做过二维码相关模块的肯定都熟知ZXing开源项目，ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码。目标是能够对QR编码、Data Matrix、UPC的1D条形码进行解码。 其提供了多种平台下的客户端包括：J2ME、J2SE和Android。其GitHub地址是：传送门

ZXing项目里面代码很多，实现的功能也很多，我们的应用只需要剥离其中的扫描模块即可，再多一点也就是生成二维码的功能；接下来我们就一起来精简ZXing项目，最终形成一个小的Demo案例，当然江湖上已经有过N多种版本的ZXing精简项目，什么横屏改竖屏，绘制扫描界面，开启闪光灯等等，并且许多都是基于ZXing2.3.0来做精简的，后续有许多更新的版本，包括自动对焦，Camera管理，bug修复等等新功能；笔者使用的是ZXing3.1.0版本，这里需要说明的就是我的这版Demo绝对是江湖上面还没有出现的，也算是一点点小小的创新把，那就是去除ZXing项目中恼人的ViewFinderView的绘制，使用XML布局扫描界面，添加扫描动画，精确计算扫描区域，怎么样？是不是很心动，很想继续往下看呢？那就跟我一起做起来把！！！

克隆ZXing项目到本地

打开Git Base，敲入命令： git clone https://github.com/zxing/zxing.git

如下图所示：

当然你也可以直接点击Download ZIP

整理ZXing代码

打开ZXing项目的文件夹，可以看到如下文件：

其中我们主要关注2个文件夹里的内容： 

1. core ： ZXing项目的核心代码，可以新建一个Java工程，然后export成jar来调用。如下图所示：

免打包即可获得的zxing-3.1.0.jar  猛戳下载 

2. android ： Android示例工程代码，成功运行之后就是一个专业的扫码应用了。如下图所示：

免引入免整理的zxing原始工程 ZXingRawProject  猛戳下载

这么为你着想，还不感谢我么？？！！

但是这样就让你满足了，那怎么可以说是极致二维码扫描呢，有木有感觉ZXing的扫描框的绘制很不爽啊？自定义的View绘制的很丑，多屏幕适配的时候还经常不兼容，原始项目还是横屏模式的，目前大家都习惯竖屏扫描呢。怎么办？别怕，我来告诉你，我要将ViewFinderView砍掉，使用xml界面布局，添加扫描动画，最终一样准确无误的扫描到二维码数据，只需要对准，是的，毫厘不差的对准就可以了。

精简ZXing代码，打造极致扫描

1. 去掉ZXing中一些和扫描无关的代码，最终留下的代码结构如下图所示，最关键的是你看不到ViewFinderView 了。爽了把，笑了吧，乐了吧。

2. 布局扫描界面，xml代码如下：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@android:color/transparent"  
6.     android:orientation="vertical" >  
7.   
8.     <SurfaceView  
9.         android:id="@+id/capture_preview"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="match_parent" />  
12.   
13.     <RelativeLayout  
14.         android:id="@+id/capture_container"  
15.         android:layout_width="match_parent"  
16.         android:layout_height="match_parent" >  
17.   
18.         <ImageView  
19.             android:id="@+id/capture_mask_top"  
20.             android:layout_width="match_parent"  
21.             android:layout_height="120dp"  
22.             android:layout_alignParentTop="true"  
23.             android:background="@drawable/shadow" />  
24.   
25.         <RelativeLayout  
26.             android:id="@+id/capture_crop_view"  
27.             android:layout_width="200dp"  
28.             android:layout_height="200dp"  
29.             android:layout_below="@id/capture_mask_top"  
30.             android:layout_centerHorizontal="true"  
31.             android:background="@drawable/qr_code_bg" >  
32.   
33.             <ImageView  
34.                 android:id="@+id/capture_scan_line"  
35.                 android:layout_width="match_parent"  
36.                 android:layout_height="wrap_content"  
37.                 android:layout_alignParentTop="true"  
38.                 android:layout_marginBottom="5dp"  
39.                 android:layout_marginTop="5dp"  
40.                 android:src="@drawable/scan_line" />  
41.         </RelativeLayout>  
42.   
43.         <ImageView  
44.             android:id="@+id/capture_mask_bottom"  
45.             android:layout_width="match_parent"  
46.             android:layout_height="wrap_content"  
47.             android:layout_alignParentBottom="true"  
48.             android:layout_below="@id/capture_crop_view"  
49.             android:background="@drawable/shadow" />  
50.   
51.         <ImageView  
52.             android:id="@+id/capture_mask_left"  
53.             android:layout_width="wrap_content"  
54.             android:layout_height="match_parent"  
55.             android:layout_above="@id/capture_mask_bottom"  
56.             android:layout_alignParentLeft="true"  
57.             android:layout_below="@id/capture_mask_top"  
58.             android:layout_toLeftOf="@id/capture_crop_view"  
59.             android:background="@drawable/shadow" />  
60.   
61.         <ImageView  
62.             android:id="@+id/capture_mask_right"  
63.             android:layout_width="wrap_content"  
64.             android:layout_height="match_parent"  
65.             android:layout_above="@id/capture_mask_bottom"  
66.             android:layout_alignParentRight="true"  
67.             android:layout_below="@id/capture_mask_top"  
68.             android:layout_toRightOf="@id/capture_crop_view"  
69.             android:background="@drawable/shadow" />  
70.     </RelativeLayout>  
71.   
72. </RelativeLayout>  

3. 计算截取区域（我认为你已经看了我的贴心注解内容了，否则。。。我不白啰嗦了么？）

贴心注解： 如果你没有看上一篇ZBar扫描中关于扫描区域计算的解释，那赶紧回去，咱不能急，看完再来接上，否则你会不理解的！传送门

[java]  view plain copy

1. private void initCrop() {  
2.     int cameraWidth = cameraManager.getCameraResolution().y;  
3.     int cameraHeight = cameraManager.getCameraResolution().x;  
4.   
5.     /** 获取布局中扫描框的位置信息 */  
6.     int[] location = new int[2];  
7.     scanCropView.getLocationInWindow(location);  
8.   
9.     int cropLeft = location[0];  
10.     int cropTop = location[1] - getStatusBarHeight();  
11.   
12.     int cropWidth = scanCropView.getWidth();  
13.     int cropHeight = scanCropView.getHeight();  
14.   
15.     /** 获取布局容器的宽高 */  
16.     int containerWidth = scanContainer.getWidth();  
17.     int containerHeight = scanContainer.getHeight();  
18.   
19.     /** 计算最终截取的矩形的左上角顶点x坐标 */  
20.     int x = cropLeft * cameraWidth / containerWidth;  
21.     /** 计算最终截取的矩形的左上角顶点y坐标 */  
22.     int y = cropTop * cameraHeight / containerHeight;  
23.   
24.     /** 计算最终截取的矩形的宽度 */  
25.     int width = cropWidth * cameraWidth / containerWidth;  
26.     /** 计算最终截取的矩形的高度 */  
27.     int height = cropHeight * cameraHeight / containerHeight;  
28.   
29.     /** 生成最终的截取的矩形 */  
30.     mCropRect = new Rect(x, y, width + x, height + y);  
31. }  

4. 打完收工，验收效果

5. 完整项目代码： 猛戳下载

下一篇将介绍开篇博客中所说的一个完整的二维码一维码扫描的简单的APP