簡介

本篇我們對掃碼介面進行優化，並對ZXing近距離無法識別的問題做出優化。

個性化定製

每個APP都有自己的表現形式，實現個性化掃碼介面定製，主要有兩個地方：

1. activity_scanner.xml介面檔案
2. com.google.zxing.view.ViewfinderView掃碼控制元件

下面分別來說明。

介面檔案

activity_scanner.xml原始碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 

    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar_scanner" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height
 
="match_parent">

        <SurfaceView
            android:id="@+id/scanner_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <com.google.zxing.view.ViewfinderView
            android:id
 
="@+id/viewfinder_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:corner_color="@color/corner_color"
            app:frame_color="@color/viewfinder_frame"
            app:label_text="二維碼/條形碼掃描"
            app:label_text_color="@color/colorAccent"
            app:laser_color="@color/laser_color"
            app:mask_color="@color/viewfinder_mask"
            app:result_color="@color/result_view"
            app:result_point_color="@color/result_point_color" />

    </FrameLayout>

</LinearLayout>

介面分析：

• 頂層採用LinearLayout實現自上至下的方向，基本不用修改；
• <include layout="@layout/toolbar_scanner" />引用toolbar佈局檔案，稍後給出，這裡可以加入選單專案、返回鍵等；
• FrameLayout佈局將相機可掃描視窗疊加在一起；
• SurfaceView裝載相機內容，即相機拍攝到的畫面；
• com.google.zxing.view.ViewfinderView掃碼自定義View，主要由遮罩層、四個角的邊框、掃描線等組成。

toolbar_scanner.xml，比較簡單

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetStart="0dip">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="40dip"
            android:layout_height="40dip"
            android:background="?attr/selectableItemBackground"
            android:padding="10dip"
            android:scaleType="centerCrop"
            android:src="@drawable/btn_back" />

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="掃描二維碼"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

    </RelativeLayout>
</android.support.v7.widget.Toolbar>

可根據需求調整toolbar內容，這裡我們就不多說。

掃碼控制元件定製

現行使用的ViewfinderView已經是經過前輩修改過的版本，他們加入了邊框和掃描線，基於這個版本我們再做一些調整。

1、提示文字的位置

現有的提示文字是在掃描框上面的

我們需要把它放置到掃描框下面，需要將原始碼中drawTextInfo方法調整一下：

//繪製文字
  private void drawTextInfo(Canvas canvas, Rect frame) {
    ...
    canvas.drawText(labelText, frame.left + frame.width() / 2, frame.top - CORNER_RECT_HEIGHT, paint);
  }

調整為：

//繪製文字
  private void drawTextInfo(Canvas canvas, Rect frame) {
    ...
    canvas.drawText(labelText, frame.left + frame.width() / 2, frame.bottom + CORNER_RECT_HEIGHT * 1.5f, paint);
  }

此處通過修改drawText的y座標引數調整了文字位置，可以根據需要自行調整。

2、掃碼框的位置

目前的掃碼框整體位置偏下，不夠美觀，打算將位置往上調整一些。
修改com.google.zxing.camera.CameraManager類中的getFramingRect()方法，由

public Rect getFramingRect() {
        ...
        int leftOffset = (screenResolution.x - width) / 2;
        int topOffset = (screenResolution.y - height) / 2;
        ...

        return framingRect;
}

修改為

public Rect getFramingRect() {
        ...
        int leftOffset = (screenResolution.x - width) / 2;
        int topOffset = (screenResolution.y - height) / 3;
        ...

        return framingRect;
}

即topOffset有了減小，預覽後如：

3、掃碼框大小
由2我們可以看到getFramingRect()方法構造的矩形中有寬、高參數，通過修改這兩個引數，可以完成掃碼框大小變更。例如：

public Rect getFramingRect() {
        ...
        int width = screenResolution.x * 8 / 10;
        int height = screenResolution.y * 8 / 10;
        ...

        return framingRect;
}

則比原來的程式碼中放大了1/10，預覽圖（可對比2中圖）：

掃碼識別優化

這裡主要說一下近距離掃碼識別不了的問題，關於掃碼演算法的改進涉獵不多，文尾給大家一篇文章參考。

ZXing在遇到二維碼撐滿掃碼框的情況下識別不出結果，等多久、再聚焦都不可以，有朋友說擴大掃碼框的大小可以解決這個問題，擴大後近距離掃碼結果還是一致的，很難識別出來。

原因是原演算法對攝像頭採集的影象畫素進行了裁剪，真正返回給識別演算法的影象可能沒有掃碼框那麼完整。

參考網路大神的帖子，我們將com.google.zxing.camera.CameraManager類中的buildLuminanceSource方法做了調整，不再返回剪裁後的影象。原始碼：

public PlanarYUVLuminanceSource buildLuminanceSource(byte[] data, int width, int height) {
        Rect rect = getFramingRectInPreview();
        int previewFormat = configManager.getPreviewFormat();
        String previewFormatString = configManager.getPreviewFormatString();
        switch (previewFormat) {
            // This is the standard Android format which all devices are REQUIRED to support.
            // In theory, it's the only one we should ever care about.
            case PixelFormat.YCbCr_420_SP:
                // This format has never been seen in the wild, but is compatible as we only care
                // about the Y channel, so allow it.
            case PixelFormat.YCbCr_422_SP:
                return new PlanarYUVLuminanceSource(data, width, height, rect.left, rect.top,
                        rect.width(), rect.height());
            default:
                // The Samsung Moment incorrectly uses this variant instead of the 'sp' version.
                // Fortunately, it too has all the Y data up front, so we can read it.
                if ("yuv420p".equals(previewFormatString)) {
                    return new PlanarYUVLuminanceSource(data, width, height, rect.left, rect.top,
                            rect.width(), rect.height());
                }
        }
        throw new IllegalArgumentException("Unsupported picture format: " +
                previewFormat + '/' + previewFormatString);
    }

修改為：

public PlanarYUVLuminanceSource buildLuminanceSource(byte[] data, int width, int height) {
        Rect rect = getFramingRectInPreview();
        int previewFormat = configManager.getPreviewFormat();
        String previewFormatString = configManager.getPreviewFormatString();
        switch (previewFormat) {
            // This is the standard Android format which all devices are REQUIRED to support.
            // In theory, it's the only one we should ever care about.
            case PixelFormat.YCbCr_420_SP:
                // This format has never been seen in the wild, but is compatible as we only care
                // about the Y channel, so allow it.
            case PixelFormat.YCbCr_422_SP:
                return new PlanarYUVLuminanceSource(data, width, height, 0, 0, width, height);
            default:
                // The Samsung Moment incorrectly uses this variant instead of the 'sp' version.
                // Fortunately, it too has all the Y data up front, so we can read it.
                if ("yuv420p".equals(previewFormatString)) {
                    return new PlanarYUVLuminanceSource(data, width, height, 0, 0, width, height);
                }
        }
        throw new IllegalArgumentException("Unsupported picture format: " +
                previewFormat + '/' + previewFormatString);
    }

主要改動的是new PlanarYUVLuminanceSource(data, width, height, 0, 0, width, height); 實際上就是將完整的相機影象內容返回，不做裁剪。

結語

本篇對ZXing掃碼工具介面定製和掃碼識別優化做了講解，解決了ZXing近距離無法識別二維碼的問題。
大家也可以順著這個思路，做更多個性化定製和優化，完善掃碼功能。

參考資料

原始碼下載