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

分类：Android 高手进阶 2013-08-21 23:48 89096人阅读 评论(274) 收藏 举报 android二维码扫描 Zxing 仿微信二维码效果

转载请注明出处：http://blog.csdn.net/xiaanming/article/details/10163203

了解二维码这个东西还是从微信中，当时微信推出二维码扫描功能，自己感觉挺新颖的，从一张图片中扫一下竟然能直接加好友，不可思议啊，那时候还不了解二维码，呵呵，然后做项目的时候，老板说要加上二维码扫描功能，然后自己的屁颠屁颠的去百度，google啥的，发现很多朋友都有介绍二维码扫描的功能，然后我就跟着人家的介绍自己搞起了二维码扫描功能，跟着人家的帖子，很快我的项目就加入了扫描二维码的功能，然后自己还很开心。

随着微信的到来，二维码越来越火爆，随处能看到二维码，比如商城里面，肯德基，餐厅等等，对于二维码扫描我们使用的是google的开源框架Zxing,我们可以去http://code.google.com/p/zxing/下载源码和Jar包，之前我项目中的二维码扫描功能只实现了扫描功能，其UI真的是其丑无比，一个好的应用软件，其UI界面也要被大众所接纳，不然人家就不会用你的软件啦，所以说应用软件功能和界面一样都很重要，例如微信，相信微信UI被很多应用软件所模仿，我也仿照微信扫描二维码效果进行模仿，虽然没有微信做的那么精致，但是效果还是可以的，所以将自己修改UI的代码和扫描二维码的代码分享给大家，一是自己以后项目遇到同样的功能直接拷贝来用，二是给还没有加入二维码功能的人一个参考，站在巨人的肩膀上,哈哈，我之前也是站在巨人的肩膀上加上此功能，接下来跟着我一步一步来实现此项功能，里面去除了很多不必要的文件

我们先看下项目的结构

• 如果你项目也想加入此功能，你直接将com.mining.app.zxing.camera，com.mining.app.zxing.decoding，com.mining.app.zxing.view这三个包拷贝到你的项目中，然后引入相对应的资源进去，我也是从我的项目中直接引用过来的，包名都没改呢，当然还需要引用Zxing.jar

• com.example.qr_codescan包里面有一个MipcaActivityCapture,也是直接引入我之前项目的代码的，这个Activity主要处理扫描界面的类，比如，扫描成功有声音和振动等等，主要关注里面的handleDecode(Result result, Bitmap barcode)方法，扫描完成之后将扫描到的结果和二维码的bitmap当初参数传递到handleDecode(Result result, Bitmap barcode)里面，我们只需要在里面写出相对应的处理代码即可，其他的地方都不用改得，我这里处理扫描结果和扫描拍的照片

[java] view plain copy

1. /**
2. *处理扫描结果
3. *@paramresult
4. *@parambarcode
5. */
6. publicvoidhandleDecode(Resultresult,Bitmapbarcode){
7. inactivityTimer.onActivity();
8. playBeepSoundAndVibrate();
9. StringresultString=result.getText();
10. if(resultString.equals("")){
11. Toast.makeText(MipcaActivityCapture.this,"Scanfailed!",Toast.LENGTH_SHORT).show();
12. }else{
13. IntentresultIntent=newIntent();
14. Bundlebundle=newBundle();
15. bundle.putString("result",resultString);
16. bundle.putParcelable("bitmap",barcode);
17. resultIntent.putExtras(bundle);
18. this.setResult(RESULT_OK,resultIntent);
19. }
20. MipcaActivityCapture.this.finish();
21. }

• 我对MipcaActivityCapture界面的布局做了自己的改动，先看下效果图，主要是用到FrameLayout,里面嵌套RelativeLayout，里面的图片也是从微信里面拿出来的，平常我看到需要什么图片就去微信里面找，没有美工的公司的程序员就是苦逼

布局代码如下

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent">
6. <RelativeLayout
7. android:layout_width="fill_parent"
8. android:layout_height="fill_parent">
10. <SurfaceView
11. android:id="@+id/preview_view"
12. android:layout_width="fill_parent"
13. android:layout_height="fill_parent"
14. android:layout_gravity="center"/>
16. <com.mining.app.zxing.view.ViewfinderView
17. android:id="@+id/viewfinder_view"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"/>
21. <include
22. android:id="@+id/include1"
23. android:layout_width="fill_parent"
24. android:layout_height="wrap_content"
25. android:layout_alignParentTop="true"
26. layout="@layout/activity_title"/>
27. </RelativeLayout>
29. </FrameLayout>

在里面我将界面上面部分写在另一个布局里面，然后include进来，因为这个activity_title在我项目里面还供其他的Activity使用，我也是直接拷贝出来的

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:background="@drawable/mmtitle_bg_alpha">
7. <Button
8. android:id="@+id/button_back"
9. android:layout_width="75.0dip"
10. android:text="返回"
11. android:background="@drawable/mm_title_back_btn"
12. android:textColor="@android:color/white"
13. android:layout_height="wrap_content"
14. android:layout_centerVertical="true"
15. android:layout_marginLeft="2dip"/>
17. <TextView
18. android:id="@+id/textview_title"
19. android:layout_width="wrap_content"
20. android:layout_height="wrap_content"
21. android:layout_alignBaseline="@+id/button_back"
22. android:layout_alignBottom="@+id/button_back"
23. android:layout_centerHorizontal="true"
24. android:gravity="center_vertical"
25. android:text="二维码扫描"
26. android:textColor="@android:color/white"
27. android:textSize="18sp"/>
29. </RelativeLayout>

• 在我这个demo里面，有一个主界面MainActivity，里面一个Button， 一个ImageView和一个TextView,点击Button进入到二维码扫描界面，当扫描OK的时候，回到主界面，将扫描的结果显示到TextView，将图片显示到ImageView里面，然后你可以不处理图片，我这里随带的加上图片，主界面的布局很简单如下

[html] view plain copy

1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffe1e0de">
7. <Button
8. android:id="@+id/button1"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:layout_alignParentTop="true"
12. android:text="扫描二维码"/>
14. <TextView
15. android:id="@+id/result"
16. android:layout_width="fill_parent"
17. android:layout_height="wrap_content"
18. android:layout_below="@+id/button1"
19. android:lines="2"
20. android:gravity="center_horizontal"
21. android:textColor="@android:color/black"
22. android:textSize="16sp"/>
24. <ImageView
25. android:id="@+id/qrcode_bitmap"
26. android:layout_width="fill_parent"
27. android:layout_height="fill_parent"
28. android:layout_alignParentLeft="true"
29. android:layout_below="@+id/result"/>
30. </RelativeLayout>

• MainActivity里面的代码如下，里面的功能在上面已经说了

[java] view plain copy

1. packagecom.example.qr_codescan;
4. importandroid.app.Activity;
5. importandroid.content.Intent;
6. importandroid.graphics.Bitmap;
7. importandroid.os.Bundle;
8. importandroid.view.View;
9. importandroid.view.View.OnClickListener;
10. importandroid.widget.Button;
11. importandroid.widget.ImageView;
12. importandroid.widget.TextView;
14. publicclassMainActivityextendsActivity{
15. privatefinalstaticintSCANNIN_GREQUEST_CODE=1;
16. /**
17. *显示扫描结果
18. */
19. privateTextViewmTextView;
20. /**
21. *显示扫描拍的图片
22. */
23. privateImageViewmImageView;
26. @Override
27. protectedvoidonCreate(BundlesavedInstanceState){
28. super.onCreate(savedInstanceState);
29. setContentView(R.layout.activity_main);
31. mTextView=(TextView)findViewById(R.id.result);
32. mImageView=(ImageView)findViewById(R.id.qrcode_bitmap);
34. //点击按钮跳转到二维码扫描界面，这里用的是startActivityForResult跳转
35. //扫描完了之后调到该界面
36. ButtonmButton=(Button)findViewById(R.id.button1);
37. mButton.setOnClickListener(newOnClickListener(){
39. @Override
40. publicvoidonClick(Viewv){
41. Intentintent=newIntent();
42. intent.setClass(MainActivity.this,MipcaActivityCapture.class);
43. intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
44. startActivityForResult(intent,SCANNIN_GREQUEST_CODE);
45. }
46. });
47. }
50. @Override
51. protectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){
52. super.onActivityResult(requestCode,resultCode,data);
53. switch(requestCode){
54. caseSCANNIN_GREQUEST_CODE:
55. if(resultCode==RESULT_OK){
56. Bundlebundle=data.getExtras();
57. //显示扫描到的内容
58. mTextView.setText(bundle.getString("result"));
59. //显示
60. mImageView.setImageBitmap((Bitmap)data.getParcelableExtra("bitmap"));
61. }
62. break;
63. }
64. }
66. }

• 上面的代码还是比较简单，但是要想做出像微信那样只的扫描框，紧紧上面的代码是没有那种效果的，我们必须重写com.mining.app.zxing.view包下面的ViewfinderView类，微信里面的都是用的图片，我是自己画出来的，代码注释的比较清楚，大家直接看代码吧，相信你能理解的，如果你要修改扫描框的大小，去CameraManager类里面修改

[java] view plain copy

1. /*
2. *Copyright(C)2008ZXingauthors
3. *
4. *LicensedundertheApacheLicense,Version2.0(the"License");
5. *youmaynotusethisfileexceptincompliancewiththeLicense.
6. *YoumayobtainacopyoftheLicenseat
7. *
8. *http://www.apache.org/licenses/LICENSE-2.0
9. *
10. *Unlessrequiredbyapplicablelaworagreedtoinwriting,software
11. *distributedundertheLicenseisdistributedonan"ASIS"BASIS,
12. *WITHOUTWARRANTIESORCONDITIONSOFANYKIND,eitherexpressorimplied.
13. *SeetheLicenseforthespecificlanguagegoverningpermissionsand
14. *limitationsundertheLicense.
15. */
17. packagecom.mining.app.zxing.view;
19. importjava.util.Collection;
20. importjava.util.HashSet;
22. importandroid.content.Context;
23. importandroid.content.res.Resources;
24. importandroid.graphics.Bitmap;
25. importandroid.graphics.Canvas;
26. importandroid.graphics.Color;
27. importandroid.graphics.Paint;
28. importandroid.graphics.Rect;
29. importandroid.graphics.Typeface;
30. importandroid.util.AttributeSet;
31. importandroid.view.View;
33. importcom.example.qr_codescan.R;
34. importcom.google.zxing.ResultPoint;
35. importcom.mining.app.zxing.camera.CameraManager;
37. /**
38. *Thisviewisoverlaidontopofthecamerapreview.Itaddstheviewfinder
39. *rectangleandpartialtransparencyoutsideit,aswellasthelaserscanner
40. *animationandresultpoints.
41. *
42. */
43. publicfinalclassViewfinderViewextendsView{
44. privatestaticfinalStringTAG="log";
45. /**
46. *刷新界面的时间
47. */
48. privatestaticfinallongANIMATION_DELAY=10L;
49. privatestaticfinalintOPAQUE=0xFF;
51. /**
52. *四个绿色边角对应的长度
53. */
54. privateintScreenRate;
56. /**
57. *四个绿色边角对应的宽度
58. */
59. privatestaticfinalintCORNER_WIDTH=10;
60. /**
61. *扫描框中的中间线的宽度
62. */
63. privatestaticfinalintMIDDLE_LINE_WIDTH=6;
65. /**
66. *扫描框中的中间线的与扫描框左右的间隙
67. */
68. privatestaticfinalintMIDDLE_LINE_PADDING=5;
70. /**
71. *中间那条线每次刷新移动的距离
72. */
73. privatestaticfinalintSPEEN_DISTANCE=5;
75. /**
76. *手机的屏幕密度
77. */
78. privatestaticfloatdensity;
79. /**
80. *字体大小
81. */
82. privatestaticfinalintTEXT_SIZE=16;
83. /**
84. *字体距离扫描框下面的距离
85. */
86. privatestaticfinalintTEXT_PADDING_TOP=30;
88. /**
89. *画笔对象的引用
90. */
91. privatePaintpaint;
93. /**
94. *中间滑动线的最顶端位置
95. */
96. privateintslideTop;
98. /**
99. *中间滑动线的最底端位置
100. */
101. privateintslideBottom;
103. privateBitmapresultBitmap;
104. privatefinalintmaskColor;
105. privatefinalintresultColor;
107. privatefinalintresultPointColor;
108. privateCollection<ResultPoint>possibleResultPoints;
109. privateCollection<ResultPoint>lastPossibleResultPoints;
111. booleanisFirst;
113. publicViewfinderView(Contextcontext,AttributeSetattrs){
114. super(context,attrs);
116. density=context.getResources().getDisplayMetrics().density;
117. //将像素转换成dp
118. ScreenRate=(int)(20*density);
120. paint=newPaint();
121. Resourcesresources=getResources();
122. maskColor=resources.getColor(R.color.viewfinder_mask);
123. resultColor=resources.getColor(R.color.result_view);
125. resultPointColor=resources.getColor(R.color.possible_result_points);
126. possibleResultPoints=newHashSet<ResultPoint>(5);
127. }
129. @Override
130. publicvoidonDraw(Canvascanvas){
131. //中间的扫描框，你要修改扫描框的大小，去CameraManager里面修改
132. Rectframe=CameraManager.get().getFramingRect();
133. if(frame==null){
134. return;
135. }
137. //初始化中间线滑动的最上边和最下边
138. if(!isFirst){
139. isFirst=true;
140. slideTop=frame.top;
141. slideBottom=frame.bottom;
142. }
144. //获取屏幕的宽和高
145. intwidth=canvas.getWidth();
146. intheight=canvas.getHeight();
148. paint.setColor(resultBitmap!=null?resultColor:maskColor);
150. //画出扫描框外面的阴影部分，共四个部分，扫描框的上面到屏幕上面，扫描框的下面到屏幕下面
151. //扫描框的左边面到屏幕左边，扫描框的右边到屏幕右边
152. canvas.drawRect(0,0,width,frame.top,paint);
153. canvas.drawRect(0,frame.top,frame.left,frame.bottom+1,paint);
154. canvas.drawRect(frame.right+1,frame.top,width,frame.bottom+1,
155. paint);
156. canvas.drawRect(0,frame.bottom+1,width,height,paint);
160. if(resultBitmap!=null){
161. //Drawtheopaqueresultbitmapoverthescanningrectangle
162. paint.setAlpha(OPAQUE);
163. canvas.drawBitmap(resultBitmap,frame.left,frame.top,paint);
164. }else{
166. //画扫描框边上的角，总共8个部分
167. paint.setColor(Color.GREEN);
168. canvas.drawRect(frame.left,frame.top,frame.left+ScreenRate,
169. frame.top+CORNER_WIDTH,paint);
170. canvas.drawRect(frame.left,frame.top,frame.left+CORNER_WIDTH,frame.top
171. +ScreenRate,paint);
172. canvas.drawRect(frame.right-ScreenRate,frame.top,frame.right,
173. frame.top+CORNER_WIDTH,paint);
174. canvas.drawRect(frame.right-CORNER_WIDTH,frame.top,frame.right,frame.top
175. +ScreenRate,paint);
176. canvas.drawRect(frame.left,frame.bottom-CORNER_WIDTH,frame.left
177. +ScreenRate,frame.bottom,paint);
178. canvas.drawRect(frame.left,frame.bottom-ScreenRate,
179. frame.left+CORNER_WIDTH,frame.bottom,paint);
180. canvas.drawRect(frame.right-ScreenRate,frame.bottom-CORNER_WIDTH,
181. frame.right,frame.bottom,paint);
182. canvas.drawRect(frame.right-CORNER_WIDTH,frame.bottom-ScreenRate,
183. frame.right,frame.bottom,paint);
186. //绘制中间的线,每次刷新界面，中间的线往下移动SPEEN_DISTANCE
187. slideTop+=SPEEN_DISTANCE;
188. if(slideTop>=frame.bottom){
189. slideTop=frame.top;
190. }
191. canvas.drawRect(frame.left+MIDDLE_LINE_PADDING,slideTop-MIDDLE_LINE_WIDTH/2,frame.right-MIDDLE_LINE_PADDING,slideTop+MIDDLE_LINE_WIDTH/2,paint);
194. //画扫描框下面的字
195. paint.setColor(Color.WHITE);
196. paint.setTextSize(TEXT_SIZE*density);
197. paint.setAlpha(0x40);
198. paint.setTypeface(Typeface.create("System",Typeface.BOLD));
199. canvas.drawText(getResources().getString(R.string.scan_text),frame.left,(float)(frame.bottom+(float)TEXT_PADDING_TOP*density),paint);
203. Collection<ResultPoint>currentPossible=possibleResultPoints;
204. Collection<ResultPoint>currentLast=lastPossibleResultPoints;
205. if(currentPossible.isEmpty()){
206. lastPossibleResultPoints=null;
207. }else{
208. possibleResultPoints=newHashSet<ResultPoint>(5);
209. lastPossibleResultPoints=currentPossible;
210. paint.setAlpha(OPAQUE);
211. paint.setColor(resultPointColor);
212. for(ResultPointpoint:currentPossible){
213. canvas.drawCircle(frame.left+point.getX(),frame.top
214. +point.getY(),6.0f,paint);
215. }
216. }
217. if(currentLast!=null){
218. paint.setAlpha(OPAQUE/2);
219. paint.setColor(resultPointColor);
220. for(ResultPointpoint:currentLast){
221. canvas.drawCircle(frame.left+point.getX(),frame.top
222. +point.getY(),3.0f,paint);
223. }
224. }
227. //只刷新扫描框的内容，其他地方不刷新
228. postInvalidateDelayed(ANIMATION_DELAY,frame.left,frame.top,
229. frame.right,frame.bottom);
231. }
232. }
234. publicvoiddrawViewfinder(){
235. resultBitmap=null;
236. invalidate();
237. }
239. /**
240. *Drawabitmapwiththeresultpointshighlightedinsteadofthelive
241. *scanningdisplay.
242. *
243. *@parambarcode
244. *Animageofthedecodedbarcode.
245. */
246. publicvoiddrawResultBitmap(Bitmapbarcode){
247. resultBitmap=barcode;
248. invalidate();
249. }
251. publicvoidaddPossibleResultPoint(ResultPointpoint){
252. possibleResultPoints.add(point);
253. }
255. }

上面的代码中，中间那根线微信是用的图片，我这里是画的，如果你想更加仿真点就将下面的代码

[java] view plain copy

1. canvas.drawRect(frame.left+MIDDLE_LINE_PADDING,slideTop-MIDDLE_LINE_WIDTH/2,frame.right-MIDDLE_LINE_PADDING,slideTop+MIDDLE_LINE_WIDTH/2,paint);

改成

[java] view plain copy

1. RectlineRect=newRect();
2. lineRect.left=frame.left;
3. lineRect.right=frame.right;
4. lineRect.top=slideTop;
5. lineRect.bottom=slideTop+18;
6. canvas.drawBitmap(((BitmapDrawable)(getResources().getDrawable(R.drawable.qrcode_scan_line))).getBitmap(),null,lineRect,paint);

那条扫描线自己去微信里面找一下，我贴出来的失真了，下载微信apk,将后缀名改成zip,然后解压就行了

画扫描框下面字体的代码需要修改下，这样子能根据字体自动排列在中间，如果字太长我没有处理，那个要自动换行，你可以自行处理

[java] view plain copy

1. paint.setColor(Color.WHITE);
2. paint.setTextSize(TEXT_SIZE*density);
3. paint.setAlpha(0x40);
4. paint.setTypeface(Typeface.DEFAULT_BOLD);
5. Stringtext=getResources().getString(R.string.R.string.scan_text);
6. floattextWidth=paint.measureText(text);
8. canvas.drawText(text,(width-textWidth)/2,(float)(frame.bottom+(float)TEXT_PADDING_TOP*density),paint)

运行界面截图，其中中间的那根绿色的线会上下移动，跟微信的效果差不多，当然运行你还需要相对应的权限问题，有兴趣的朋友可以去下载demo

从8点多写这篇博客写到现在，看起来这么点字，但实际上还是比较耗时间的，如果你觉得这篇文章对你有帮助，你就顶一下，哈哈，洗澡睡觉去了，上面的项目中还有一些资源文件我没有贴出来，想要看效果可以下载源码

我在Android 基于google Zxing实现对手机中的二维码进行扫描这篇文章中实现了对手机中二维码照片的扫描，并且替换了中间的扫描线，和微信效果更加相似，建议大家去下那文章的项目源码

项目源码，点击下载

更多相关文章

1. Android Animation动画 控制动画的执行效果，速度等
2. Android TextView加上阴影效果
3. android 动态壁纸 3 解决 动态壁纸列表界面icon问题
4. Android 5.0 MaterialDesign Ripple效果水波纹效果
5. 【摘录】从Android界面开发谈起
6. Android用户界面 UI组件--TextView及其子类(一) TextView

随机推荐

1. Android属性动画Property Animation系列
2. Android模拟器无法保存数据
3. Android 使用ActivityOptions实现Activit
4. 【Android】android:padding属性设置对Im
5. Android Studio生成javadoc出错的解决办
6. 关于android中的EditView,TextView的图片
7. Android Studio 配置 OpenCV for Android
8. 【android】与pc机进行UDP通信
9. android 背景图片设置
10. Android 在从全屏切换到非全屏的时候闪动