Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android基於google Zxing實現仿微信二維碼條形碼掃描

Android基於google Zxing實現仿微信二維碼條形碼掃描

編輯：Android開發實例

隨著微信的到來，二維碼越來越火爆，隨處能看到二維碼，比如商城裡面，肯德基，餐廳等等，對於二維碼掃描我們使用的是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)裡面，我們只需要在裡面寫出相對應的處理代碼即可，其他的地方都不用改得，我這裡處理掃描結果和掃描拍的照片
 

  1. /**   
  2.  * 處理掃描結果   
  3.  * @param result   
  4.  * @param barcode   
  5.  */    
  6. public void handleDecode(Result result, Bitmap barcode) {    
  7.     inactivityTimer.onActivity();    
  8.     playBeepSoundAndVibrate();    
  9.     String resultString = result.getText();    
  10.     if (resultString.equals("")) {    
  11.         Toast.makeText(MipcaActivityCapture.this, "Scan failed!", Toast.LENGTH_SHORT).show();    
  12.     }else {    
  13.         Intent resultIntent = new Intent();    
  14.         Bundle bundle = new Bundle();    
  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，裡面的圖片也是從微信裡面拿出來的，平常我看到需要什麼圖片就去微信裡面找，沒有美工的公司的程序員就是苦逼

布局代碼如下

  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:layout_width="fill_parent"    
  4.         android:layout_height="fill_parent" >    
  5.     
  6.     <RelativeLayout    
  7.         android:layout_width="fill_parent"    
  8.         android:layout_height="fill_parent" >    
  9.     
  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" />    
  15.     
  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" />    
  20.     
  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>    
  28.     
  29. </FrameLayout>   

 

在裡面我將界面上面部分寫在另一個布局裡面，然後include進來，因為這個activity_title在我項目裡面還供其他的Activity使用，我也是直接拷貝出來的
 

  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <RelativeLayout xmlns: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" >    
  6.     
  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" />    
  16.     
  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" />    
  28.     
  29. </RelativeLayout>   

在我這個demo裡面，有一個主界面MainActivity，裡面一個Button， 一個ImageView和一個TextView,點擊Button進入到二維碼掃描界面，當掃描OK的時候，回到主界面，將掃描的結果顯示到TextView，將圖片顯示到ImageView裡面，然後你可以不處理圖片，我這裡隨帶的加上圖片，主界面的布局很簡單如下
 

  1. <RelativeLayout xmlns: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" >    
  6.     
  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="掃描二維碼" />    
  13.     
  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" />    
  23.     
  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裡面的代碼如下，裡面的功能在上面已經說了

  1. package com.example.qr_codescan;    
  2.     
  3.     
  4. import android.app.Activity;    
  5. import android.content.Intent;    
  6. import android.graphics.Bitmap;    
  7. import android.os.Bundle;    
  8. import android.view.View;    
  9. import android.view.View.OnClickListener;    
  10. import android.widget.Button;    
  11. import android.widget.ImageView;    
  12. import android.widget.TextView;    
  13.     
  14. public class MainActivity extends Activity {    
  15.     private final static int SCANNIN_GREQUEST_CODE = 1;    
  16.     /**   
  17.      * 顯示掃描結果   
  18.      */    
  19.     private TextView mTextView ;    
  20.     /**   
  21.      * 顯示掃描拍的圖片   
  22.      */    
  23.     private ImageView mImageView;    
  24.         
  25.     
  26.     @Override    
  27.     protected void onCreate(Bundle savedInstanceState) {    
  28.         super.onCreate(savedInstanceState);    
  29.         setContentView(R.layout.activity_main);    
  30.             
  31.         mTextView = (TextView) findViewById(R.id.result);     
  32.         mImageView = (ImageView) findViewById(R.id.qrcode_bitmap);    
  33.             
  34.         //點擊按鈕跳轉到二維碼掃描界面，這裡用的是startActivityForResult跳轉     
  35.         //掃描完了之後調到該界面     
  36.         Button mButton = (Button) findViewById(R.id.button1);    
  37.         mButton.setOnClickListener(new OnClickListener() {    
  38.                 
  39.             @Override    
  40.             public void onClick(View v) {    
  41.                 Intent intent = new Intent();    
  42.                 intent.setClass(MainActivity.this, MipcaActivityCapture.class);    
  43.                 intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);    
  44.                 startActivityForResult(intent, SCANNIN_GREQUEST_CODE);    
  45.             }    
  46.         });    
  47.     }    
  48.         
  49.         
  50.     @Override    
  51.     protected void onActivityResult(int requestCode, int resultCode, Intent data) {    
  52.         super.onActivityResult(requestCode, resultCode, data);    
  53.         switch (requestCode) {    
  54.         case SCANNIN_GREQUEST_CODE:    
  55.             if(resultCode == RESULT_OK){    
  56.                 Bundle bundle = data.getExtras();    
  57.                 //顯示掃描到的內容     
  58.                 mTextView.setText(bundle.getString("result"));    
  59.                 //顯示     
  60.                 mImageView.setImageBitmap((Bitmap) data.getParcelableExtra("bitmap"));    
  61.             }    
  62.             break;    
  63.         }    
  64.     }       
  65.     
  66. }    

上面的代碼還是比較簡單，但是要想做出像微信那樣只的掃描框，緊緊上面的代碼是沒有那種效果的，我們必須重寫com.mining.app.zxing.view包下面的ViewfinderView類，微信裡面的都是用的圖片，我是自己畫出來的，代碼注釋的比較清楚，大家直接看代碼吧，相信你能理解的，如果你要修改掃描框的大小，去CameraManager類裡面修改
 

  1. /*   
  2.  * Copyright (C) 2008 ZXing authors   
  3.  *   
  4.  * Licensed under the Apache License, Version 2.0 (the "License");   
  5.  * you may not use this file except in compliance with the License.   
  6.  * You may obtain a copy of the License at   
  7.  *   
  8.  *      http://www.apache.org/licenses/LICENSE-2.0   
  9.  *   
  10.  * Unless required by applicable law or agreed to in writing, software   
  11.  * distributed under the License is distributed on an "AS IS" BASIS,   
  12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   
  13.  * See the License for the specific language governing permissions and   
  14.  * limitations under the License.   
  15.  */    
  16.     
  17. package com.mining.app.zxing.view;    
  18.     
  19. import java.util.Collection;    
  20. import java.util.HashSet;    
  21.     
  22. import android.content.Context;    
  23. import android.content.res.Resources;    
  24. import android.graphics.Bitmap;    
  25. import android.graphics.Canvas;    
  26. import android.graphics.Color;    
  27. import android.graphics.Paint;    
  28. import android.graphics.Rect;    
  29. import android.graphics.Typeface;    
  30. import android.util.AttributeSet;    
  31. import android.view.View;    
  32.     
  33. import com.example.qr_codescan.R;    
  34. import com.google.zxing.ResultPoint;    
  35. import com.mining.app.zxing.camera.CameraManager;    
  36.     
  37. /**   
  38.  * This view is overlaid on top of the camera preview. It adds the viewfinder   
  39.  * rectangle and partial transparency outside it, as well as the laser scanner   
  40.  * animation and result points.   
  41.  *    
  42.  */    
  43. public final class ViewfinderView extends View {    
  44.     private static final String TAG = "log";    
  45.     /**   
  46.      * 刷新界面的時間   
  47.      */    
  48.     private static final long ANIMATION_DELAY = 10L;    
  49.     private static final int OPAQUE = 0xFF;    
  50.     
  51.     /**   
  52.      * 四個綠色邊角對應的長度   
  53.      */    
  54.     private int ScreenRate;    
  55.         
  56.     /**   
  57.      * 四個綠色邊角對應的寬度   
  58.      */    
  59.     private static final int CORNER_WIDTH = 10;    
  60.     /**   
  61.      * 掃描框中的中間線的寬度   
  62.      */    
  63.     private static final int MIDDLE_LINE_WIDTH = 6;    
  64.         
  65.     /**   
  66.      * 掃描框中的中間線的與掃描框左右的間隙   
  67.      */    
  68.     private static final int MIDDLE_LINE_PADDING = 5;    
  69.         
  70.     /**   
  71.      * 中間那條線每次刷新移動的距離   
  72.      */    
  73.     private static final int SPEEN_DISTANCE = 5;    
  74.         
  75.     /**   
  76.      * 手機的屏幕密度   
  77.      */    
  78.     private static float density;    
  79.     /**   
  80.      * 字體大小   
  81.      */    
  82.     private static final int TEXT_SIZE = 16;    
  83.     /**   
  84.      * 字體距離掃描框下面的距離   
  85.      */    
  86.     private static final int TEXT_PADDING_TOP = 30;    
  87.         
  88.     /**   
  89.      * 畫筆對象的引用   
  90.      */    
  91.     private Paint paint;    
  92.         
  93.     /**   
  94.      * 中間滑動線的最頂端位置   
  95.      */    
  96.     private int slideTop;    
  97.         
  98.     /**   
  99.      * 中間滑動線的最底端位置   
  100.      */    
  101.     private int slideBottom;    
  102.         
  103.     private Bitmap resultBitmap;    
  104.     private final int maskColor;    
  105.     private final int resultColor;    
  106.         
  107.     private final int resultPointColor;    
  108.     private Collection<ResultPoint> possibleResultPoints;    
  109.     private Collection<ResultPoint> lastPossibleResultPoints;    
  110.     
  111.     boolean isFirst;    
  112.         
  113.     public ViewfinderView(Context context, AttributeSet attrs) {    
  114.         super(context, attrs);    
  115.             
  116.         density = context.getResources().getDisplayMetrics().density;    
  117.         //將像素轉換成dp     
  118.         ScreenRate = (int)(20 * density);    
  119.     
  120.         paint = new Paint();    
  121.         Resources resources = getResources();    
  122.         maskColor = resources.getColor(R.color.viewfinder_mask);    
  123.         resultColor = resources.getColor(R.color.result_view);    
  124.     
  125.         resultPointColor = resources.getColor(R.color.possible_result_points);    
  126.         possibleResultPoints = new HashSet<ResultPoint>(5);    
  127.     }    
  128.     
  129.     @Override    
  130.     public void onDraw(Canvas canvas) {    
  131.         //中間的掃描框，你要修改掃描框的大小，去CameraManager裡面修改     
  132.         Rect frame = CameraManager.get().getFramingRect();    
  133.         if (frame == null) {    
  134.             return;    
  135.         }    
  136.             
  137.         //初始化中間線滑動的最上邊和最下邊     
  138.         if(!isFirst){    
  139.             isFirst = true;    
  140.             slideTop = frame.top;    
  141.             slideBottom = frame.bottom;    
  142.         }    
  143.             
  144.         //獲取屏幕的寬和高     
  145.         int width = canvas.getWidth();    
  146.         int height = canvas.getHeight();    
  147.     
  148.         paint.setColor(resultBitmap != null ? resultColor : maskColor);    
  149.             
  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);    
  157.             
  158.             
  159.     
  160.         if (resultBitmap != null) {    
  161.             // Draw the opaque result bitmap over the scanning rectangle     
  162.             paint.setAlpha(OPAQUE);    
  163.             canvas.drawBitmap(resultBitmap, frame.left, frame.top, paint);    
  164.         } else {    
  165.     
  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);    
  184.     
  185.                 
  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);    
  192.                 
  193.                 
  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);    
  200.                 
  201.                 
  202.     
  203.             Collection<ResultPoint> currentPossible = possibleResultPoints;    
  204.             Collection<ResultPoint> currentLast = lastPossibleResultPoints;    
  205.             if (currentPossible.isEmpty()) {    
  206.                 lastPossibleResultPoints = null;    
  207.             } else {    
  208.                 possibleResultPoints = new HashSet<ResultPoint>(5);    
  209.                 lastPossibleResultPoints = currentPossible;    
  210.                 paint.setAlpha(OPAQUE);    
  211.                 paint.setColor(resultPointColor);    
  212.                 for (ResultPoint point : 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 (ResultPoint point : currentLast) {    
  221.                     canvas.drawCircle(frame.left + point.getX(), frame.top    
  222.                             + point.getY(), 3.0f, paint);    
  223.                 }    
  224.             }    
  225.     
  226.                 
  227.             //只刷新掃描框的內容，其他地方不刷新     
  228.             postInvalidateDelayed(ANIMATION_DELAY, frame.left, frame.top,    
  229.                     frame.right, frame.bottom);    
  230.                 
  231.         }    
  232.     }    
  233.     
  234.     public void drawViewfinder() {    
  235.         resultBitmap = null;    
  236.         invalidate();    
  237.     }    
  238.     
  239.     /**   
  240.      * Draw a bitmap with the result points highlighted instead of the live   
  241.      * scanning display.   
  242.      *    
  243.      * @param barcode   
  244.      *            An image of the decoded barcode.   
  245.      */    
  246.     public void drawResultBitmap(Bitmap barcode) {    
  247.         resultBitmap = barcode;    
  248.         invalidate();    
  249.     }    
  250.     
  251.     public void addPossibleResultPoint(ResultPoint point) {    
  252.         possibleResultPoints.add(point);    
  253.     }    
  254.     
  255. }    

上面的代碼中，中間那根線微信是用的圖片，我這裡是畫的，如果你想更加仿真點就將下面的代碼

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

改成

  1. Rect lineRect = new Rect();    
  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,然後解壓就行了

畫掃描框下面字體的代碼需要修改下，這樣子能根據字體自動排列在中間，如果字太長我沒有處理，那個要自動換行，你可以自行處理

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

運行界面截圖，其中中間的那根綠色的線會上下移動，跟微信的效果差不多，當然運行你還需要相對應的權限問題，有興趣的朋友可以去下載demo

 

   

源碼下載

 

轉自：http://blog .c sdn.net/ xiaan ming/article/details/10163203

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android中隱藏標題欄和狀態欄的方法 Android AsyncTask使用及分析 Android應用開發完全退出程序的通用方法 Android各個版本之間的區別圖示 Android手機衛士（七）：簽名文件說明&包名說明 Android 布局控件之LinearLayout詳細介紹
Android 利用方向傳感器實現指南針具體步驟

step1:新建一個項目Compass,並將一張指南針圖片導入到
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android最佳實踐

有一些做法可以遵循，在開發Android應用程序。這些建議由Androi
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
閱讀排行版
Copyright © Android教程網 All Rights Reserved