Android 十分鐘光速實現二維碼掃描

前言

在專案中要使用到二維碼的相關內容，我們第一時間想到的是使用大名鼎鼎的zxing或者ZBar開源框架：

除了這兩個有名的框架之外，還有@bingoogolapple大神的掃描庫

以及國外@dlazaro66大神的

以上是非常不錯的二維碼掃描庫，基本市場上app中的所有功能都被這些庫涵蓋了，但是個人還是覺得用他們的庫有點麻煩（不可避免的會踩到一些坑，尤其是zxing…有時掃描效率是真的低…），於是花了點時間在@dlazaro66大神的QRCodeReaderView庫做出了修改，

基於zxing的一箇中文的二維碼掃描庫：

Demo示例：

該庫支援功能如下：

· 二維碼解析
· 前/後置攝像頭切換掃描
· 開啟閃光燈
· 開啟/停止二維碼掃描功能
· 自定義掃描介面UI，輕鬆定製自己的掃描框、掃描背景、掃描線相關屬性
· 獲得掃描框的座標Rect(判斷所掃二維碼是否在掃描框內等）

這些功能實現的gif圖都在github的 README 中：

和其他庫相比的優勢（個人覺得）：

1.快速開發

該庫暫時只支援「二維碼掃描相關」和「二維碼介面UI的繪製」功能，因此封裝好供開發者使用的只有「QRCodeScannerView（二維碼掃描和解析）」和「QRCoverView（掃描框、掃描線等）」兩個java類，因此對於不復雜的需求，可以最快速忽略底層的原始碼，實現的二維碼解析功能。

2.自定義UI和功能更簡單

對於一般的需求，可以通過封裝好的方法進行設定，對於相對複雜的需求（比如自定義UI、掃描線等），只需要開啟對應的類，裡面的程式碼都註釋的清清楚楚，擺脫zxing龐大的程式碼量（zxing實在太強大了，但是很多功能也許用不到，學習成本更高），可以更直觀修改並實現需求：

以二維碼UI（掃描線等）介面程式碼為例：

 private final Paint laserPaint = new Paint();   //掃描線Paint
 private boolean showLaser = true;      //是否顯示掃描線
 private float laserStartH = 0
 
f;        //掃描線初始位置
 private int laserChangeBounds = 30;    //漸變線的預設高度，預設30px
 private int laserChangeTime = 40;      //UI重新整理間隔

 private QRHandler handler;

 //掃描框的寬和高
 private float scannerW;
 private float scannerH;
 //掃描框的上邊距和左邊距
 private float top;
 private float left;
 //掃描邊框的長度和厚度
 private float cornerH;
 private float cornerW;
 private Context context;
 //掃描邊框是否包裹掃描框
 private boolean isCornerOutside = false;
 //掃描框的Rect
 private RectF viewFinderRect;

    ...
    ...
    ...

 //繪製背景色
 public void drawScanBackground(canvas, viewFinderRect);
 //繪製掃描邊框
 public void drawScanCorner(canvas, viewFinderRect);
 //繪製掃描線
 public void drawLaserLine(canvas, viewFinderRect);

一、依賴和使用

1.新增到你的 Project Build.gradle:

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

2.新增到你的 Module Build.gradle:

dependencies {
    compile 'com.github.qingmei2:QrCodeScannerView-Android:1.1'
    compile 'com.google.zxing:core:3.2.1'
}

3.直接在你的佈局檔案xml中使用

QRCodeScannerView（二維碼掃描業務層View，主要處理Camera掃描二維碼相關邏輯）

QRCoverView(二維碼掃描UI層View，主要負責對應UI的改變，比如掃描框大小，背景顏色，掃描框邊角大小顏色等等):

 <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.mei_husky.library.view.QRCodeScannerView
            android:id="@+id/scanner_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.mei_husky.library.view.QRCoverView
            android:id="@+id/cover_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</FrameLayout>

4.在對應的Activity中的onCreate()中初始化配置：

//自動聚焦間隔2s
mScannerView.setAutofocusInterval(2000L);
//閃光燈
mScannerView.setTorchEnabled(true);
//掃描結果監聽處理
mScannerView.setOnQRCodeReadListener(new QRCodeScannerView.OnQRCodeScannerListener() {
    @Override
    public void onDecodeFinish(String text, PointF[] points) {
        Log.d("tag", "掃描結果 ： " + text); 
    }
});
//相機許可權監聽
mScannerView.setOnCheckCameraPermissionListener(new QRCodeScannerView.OnCheckCameraPermissionListener() {
    @Override
    public boolean onCheckCameraPermission() {
        if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA)
                == PackageManager.PERMISSION_GRANTED) {
            return true;
        } else {
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.CAMERA}, PERMISSION_REQUEST_CAMERA);
            return false;
        }
    }
});
//開啟後置攝像頭
mScannerView.setBackCamera();

二、相關API（詳細使用方法請參照Sample中程式碼）

1、QRCodeScannerView（Camera/二維碼掃描解析相關）

1.開啟二維碼掃描開關，預設開啟

setQRDecodingEnabled(boolean qrDecodingEnabled)

2.設定自動聚焦間隔，預設2s

setAutofocusInterval(long autofocusIntervalInMs);

3.二維碼解析結果回撥【需要開發者實現】

setOnQRCodeReadListener(OnQRCodeScannerListener onQRCodeScannerListener)

4.Camera許可權監聽回撥（用於Android 6.0）【需要開發者實現】

setOnCheckCameraPermissionListener(OnCheckCameraPermissionListener listener)

5.設定Camera預設開啟方向【需要開發者實現】

setFrontCamera（）//前置攝像頭
setBackCamera（） //後置攝像頭

6.開始/停止掃描

startCamera() 建議放在Activity的onResume()方法中
stopCamera()  建議放在Activity的onPause()方法中

7.「可選」切換前置/後置攝像頭

switchCameraFace()

2、QRCoverView（UI相關）

1.設定掃描框背景顏色

setCoverViewOutsideColor(int colorRes) 

2.設定掃描框邊角顏色

ssetCoverViewCornerColor(int colorRes)

3.設定掃描框邊角寬高

 /**
   * 設定掃描邊框寬高
   *
   * @param cornerH 掃描邊框的長度
   * @param cornerW 掃描邊框的厚度
   * @param isDp    若為true則將傳入的引數單位視為dp，false 則單位視為px
   */
  setCoverViewCorner(int cornerH, int cornerW, boolean isDp)

4.設定掃描框邊角的位置

/**
 * 若呼叫該setCoverViewConnerFace(true)，則掃描邊框則會包裹掃描框顯示在介面上；
 * 否則預設掃描邊框內貼在掃描框內（大多數app預設都是該模式）
 *
 * @param isOutside
 */
setCoverViewConnerFace(boolean isOutside)

5.設定掃描框的寬高(dp)

setCoverViewScanner(int width, int height)

6.獲得掃描框的座標Rect(判斷所掃二維碼是否在掃描框內等)

RectF getViewFinderRect()

7.「重要」如果有更多需求，建議閱讀QRCoverView.java的原始碼，裡面註釋很清楚，一般的UI需求簡單改幾個成員變數的屬性就能實現，下為部分原始碼及註釋：

private final Paint laserPaint = new Paint();   //掃描線Paint
private boolean showLaser = true;      //是否顯示掃描線
private float laserStartH = 0f;        //掃描線初始位置
private int laserChangeBounds = 30;    //漸變線的預設高度，預設30px
private int laserChangeTime = 40;      //UI重新整理間隔

private QRHandler handler;

//掃描框的寬和高
private float scannerW;
private float scannerH;
//掃描框的上邊距和左邊距
private float top;
private float left;
//掃描邊框的長度和厚度
private float cornerH;
private float cornerW;
private Context context;
//掃描邊框是否包裹掃描框
private boolean isCornerOutside = false;
//掃描框的Rect
private RectF viewFinderRect;
...
...
...
@Override
protected void onDraw(Canvas canvas) {
    //預設掃描框為180dp
    if (scannerW == 0f || scannerH == 0f) {
        viewFinderRect = new RectF(left, top, left + ScannerDpUtils.dip2px(context, 180), top + ScannerDpUtils.dip2px(context, 180));
    } else {
        viewFinderRect = new RectF(left, top, left + scannerW, top + scannerH);
    }
    //繪製背景色
    drawScanBackground(canvas, viewFinderRect);
    //繪製掃描邊框
    drawScanCorner(canvas, viewFinderRect);
    //繪製掃描線
    drawLaserLine(canvas, viewFinderRect);
}

最後當然還要再開一個傳送門：

如果這個庫對你的開發有所幫助，望請不吝star，如果遇到Bug或者建議，歡迎issue，我會第一時間進行回覆，提前感謝，鞠躬！！！