Google zxing實現二維碼掃描完美解決方案

Songlcy發表於2016-06-15

最近因專案需求,需要在App中整合二維碼掃描的功能。網上找了很多資料,最後決定使用Google的zxing來實現。實現的過程遇到了很多的坑,也是因為這些坑在網上沒有具體的解決方案,今天就把我的實現過程分享給大家。

我會分為兩步來和大家分享:

(1)專案中如何整合zxing

(2)如何修改取景框的樣式

(3)總結填坑

1.專案中整合zxing

在專案中整合zxing,網上有很多的教程也說的比較詳細了,zxing中的內容很多,涵蓋了很多的掃碼功能(不僅僅侷限於掃描二維碼...)。步驟很簡單,只需要我們將幾個核心的類包,拷貝到你的專案中,然後新增zxing.jar即可。沒有zxing.jar的童靴點選下載


以上就是幾個我們需要用到的核心類。

<!--scan code -->
<color name="viewfinder_frame">#ff000000</color>
<color name="viewfinder_laser">#ffff0000</color>
<color name="viewfinder_mask">#60000000</color>
<color name="result_view">#b0000000</color>
<color name="possible_result_points">#00000000</color>
然後在color.xml中新增以上顏色值。

<!-- zxing -->
<item type="id" name="auto_focus"/>
<item type="id" name="decode"/>
<item type="id" name="decode_failed"/>
<item type="id" name="decode_succeeded"/>
<item type="id" name="encode_failed"/>
<item type="id" name="encode_succeeded"/>
<item type="id" name="launch_product_query"/>
<item type="id" name="quit"/>
<item type="id" name="restart_preview"/>
<item type="id" name="return_scan_result"/>
<item type="id" name="search_book_contents_failed"/>
<item type="id" name="search_book_contents_succeeded"/>

在ids.xml中新增以上id屬性值。

<!--qrcode-->
<string name="str_scan_title">掃一掃</string>
<string name="str_open_light">開啟閃光燈</string>
<string name="str_close_light">關閉閃光燈</string>
<string name="str_scan_hint">取景框對準二維碼, 即可自動掃描</string>
在string.xml中新增顯示的提示字元。可自己隨意修改。

在zxing中,掃描的介面即Activity已經幫我們寫好了。在activity包下:


所以,我們啟動掃描二維碼的頁面就有了以下程式碼:


很簡單,就是啟動該Activity。細心的童靴此處注意到了我們使用的是startActivityForResult。沒過,因為當我們掃描完畢後需要得到最終的掃描結果,ok。順理成章的我們需要重寫onActivityResult方法來獲取結果。

有童靴看到上面的程式碼可能會有疑問了,你怎麼知道要根據 "result"這個key來取值呢?ok,我們來看CaptureActivity這類,全域性搜尋該類finish的地方,發現如下程式碼:

/**
 * Handler scan result
 * @param result
 * @param barcode
 * 獲取結果
 */
public void handleDecode(Result result, Bitmap barcode) {
   inactivityTimer.onActivity();
   playBeepSoundAndVibrate();
   String resultString = result.getText();
   // FIXME
   if (resultString.equals("")) {
      Toast.makeText(CaptureActivity.this, "掃描失敗!", Toast.LENGTH_SHORT)
            .show();
   } else {

      Intent resultIntent = new Intent();
      Bundle bundle = new Bundle();
      bundle.putString("result", resultString);
      resultIntent.putExtras(bundle);
      this.setResult(RESULT_OK, resultIntent);
   }
   CaptureActivity.this.finish();
}
從上面程式碼中,我們發現,CaptureActivity是在handleDecode的方法中去傳回值並且finish的。相信你已經看到了,沒錯,在put的地方,key就是我們之前所說的result。ok,解決。

此時,編譯啟動,你就可以看到一個簡單的掃描介面了。

2.如何修取景框的樣式

啟動後,你是不是玩的很爽。感慨Google改變了我們的生活,讓任何事情變得可能。哈哈,扯淡兩句 。此時,有些童靴會說,這取景框(掃描框)跟我的App的主題不太符合呀!確實,Google自帶效果肯定沒有那麼多樣式。那麼就需要我們自己來定義,製作出更加精美和符合自己App主題的效果。定義該效果需要用到下面這個類:


沒錯,就是ViewfinderView。開啟這個類:

public final class ViewfinderView extends View 
可以看到該類繼承自View。所以,顧名思義,我們繪製肯定是在onDraw方法中了。ok,直接定位到onDraw方法,剩下的就是你自己發揮想象力,去定製啦!(比如:四個角,掃描線,等等。。)

3.填坑

本篇文章在開始的時候,我就說了坑坑坑!所以,單憑以上2個部分是滿足不了大家的,那麼,我們下面來看幾個問題:

(1)你是否遇到了,取景框太小,以至於離二維碼很遠才可以掃到?

(2)取景框對準二維碼,二維碼拉伸變形了,根本掃不出結果來!

好,針對以上問題,我們來逐一解決!

首先來看第一個問題,Google考慮到這個問題,所以zxing中提供了修改取景框大小的地方:


在camera包下的CameraManager類中,開啟該類,我們看到:

private static final int MIN_FRAME_WIDTH = 240;
private static final int MIN_FRAME_HEIGHT = 240;
private static final int MAX_FRAME_WIDTH = 480;
private static final int MAX_FRAME_HEIGHT = 360;
沒錯,這幾個值就是更改取景框大小的常量。

此時,你改變值發現效果也不是很多,那下面這種方案將完美解決你的問題:

找到該類中的getFrameingRect方法:

將原本計算height和width的程式碼註釋,新增以下程式碼:

//        int width = screenResolution.x * 3 / 4;
//       if (width < MIN_FRAME_WIDTH) {
//          width = MIN_FRAME_WIDTH;
//       } else if (width > MAX_FRAME_WIDTH) {
//          width = MAX_FRAME_WIDTH;
//       }
//       int height = screenResolution.y * 3 / 4;
//       if (height < MIN_FRAME_HEIGHT) {
//          height = MIN_FRAME_HEIGHT;
//       } else if (height > MAX_FRAME_HEIGHT) {
//          height = MAX_FRAME_HEIGHT;
//       }

         DisplayMetrics dm = context.getResources().getDisplayMetrics();
         int width = (int)(dm.widthPixels * 0.6);
         int height = (int)(width * 0.9);

         int leftOffset = (screenResolution.x - width) / 2;
         int topOffset = (screenResolution.y - height) / 2;
ok,執行程式,完美解決。並且加快的掃描的速度(掃描速度取決於取景框的大小)!

填了第一個坑,我們來填第二個:

針對於掃描時,二維碼拉伸變形的問題,是因為zxing預設是針對橫屏掃描的,所以,我們只需要改變x,y的計算,即橫縱軸即可。此時,我們需要找到CameraConfigurationManager類:


找到findBestPreviewSizeValue方法:

將newDiff的變數計算程式碼改成如下:

int newDiff=Math.abs(newY - screenResolution.x) + Math.abs(newX - screenResolution.y);

即調換位置即可。

ok,到此為止,關於zxing的整合使用就已經完美解決了。有問題的童靴歡迎給我留言,我將盡快回復!

:最近有朋友說近距離掃描二維碼掃描不出,需要遠一點才可以。那麼解決這個問題的方案如下:

找到CameraConfigurationManager類的setDesiredCameraParameters(Camera camera)方法,將其中的程式碼註釋,然後新增如下程式碼:

Camera.Parameters parameters = camera.getParameters();
List<Camera.Size> supportedPreviewSizes = parameters.getSupportedPreviewSizes();
int position =0;
if(supportedPreviewSizes.size()>2){
  position=supportedPreviewSizes.size()/2+1;//supportedPreviewSizes.get();
}else {
  position=supportedPreviewSizes.size()/2;
}

int width = supportedPreviewSizes.get(position).width;
int height = supportedPreviewSizes.get(position).height;
Log.d(TAG, "Setting preview size: " + cameraResolution);
camera.setDisplayOrientation(90);
cameraResolution.x=width;
cameraResolution.y=height;
parameters.setPreviewSize(width,height);
setFlash(parameters);
setZoom(parameters);
camera.setParameters(parameters);

原始碼地址:點選開啟連結


相關文章