Zxing二維碼精簡(豎屏、拉伸處理、掃描框大小和掃描線移動)

 

本帖最后由 levil_ad 於 2013-12-30 13:55 編輯

最近沒事做了下二維碼掃描，用的是ZXing的開源代碼，官方源碼地址：http://code.google.com/p/zxing/downloads/list；
我是在ZXing2.2基礎上做的，因此只下載了ZXing-2.2.zip；
此外還需要ZXing的核心Jar包，下載地址：http://repo1.maven.org/maven2/com/google/zxing/core/2.2/，只需下載core-2.2.jar就行；
將下載的ZXing-2.2.zip解壓出來，我們只需要用到android目錄中的示例項目，如圖：
<ignore_js_op> 
將android項目導入eclipse，同時別忘了將core-2.2.jar導入libs，此時該示例項目應該可以運行了，不過該項目很多功能我們不需要，並且其掃描界面為橫向的，因此需對其修改。

接下去我們來將該示例項目簡化：
第一步：拷貝必要的包和類
新建自己的項目並導入core-2.2.jar，將示例項目中的必要代碼全部拷貝到自己的項目中，至於示例項目中各個包和類的功能此處就不做解釋的，有興趣可以自己去研究下；
我自己對包結構做了一點改動，導入完成后會有很多紅叉，大都和包的訪問權限有關，因為示例代碼中很多類是final型的，我們將其public就行；
此外還需要res下一些關聯的文件（values下的color.xml、ids.xml、strings.xml，raw下的beep.ogg）。
初步調整后包結構如下：
<ignore_js_op> 

第二步：PreferencesActivity和CaptureActivity修改
示例項目用到了大量的配置，因此很多地方都用到了PreferencesActivity這個類，其實留着它也無所謂，但別忘了將示例項目中res下一些關聯文件拷貝過來（preferences.xml、arrays.xml）；
不過PreferencesActivity完全是多余的，看着也礙眼，因此我將其去掉，需要將用到PreferencesActivity的類都修改，就是剩余那些報紅叉的類，我們需要將一些配置固定化，多余的設置判斷去掉，此處我就不貼代碼了；
同樣CaptureActivity中也有很多方法是我們不需要的，大都是關於解碼成功后的處理，如果要保留的話則需要額外拷貝很多類，因此將其去掉，此處也不貼代碼了，附件源碼中都有。

第三部：修改為豎屏
經過上面兩步，我們自己的項目應該可以運行了（別忘了加權限），當然此時是橫屏的，因此我們需要修改幾處地方將其修改為豎屏：
1.CameraConfigurationManager類的initFromCameraParameters()方法中將以下代碼注釋掉：
[mw_shl_code=java,true]
if (width < height) {
    Log.i(TAG,"Display reports portrait orientation; assuming this is incorrect");
    int temp = width;
    width = height;
     height = temp;
   }[/mw_shl_code]

2.CameraConfigurationManager類的setDesiredCameraParameters()方法中在camera.setParameters(parameters)之前加入以下代碼：
[mw_shl_code=java,true]camera.setDisplayOrientation(90);[/mw_shl_code]

3.CameraManager類的getFramingRectInPreview()方法中將以下代碼替換：
[mw_shl_code=java,true]
rect.left = rect.left * cameraResolution.x / screenResolution.x;
rect.right = rect.right * cameraResolution.x / screenResolution.x;
rect.top = rect.top * cameraResolution.y / screenResolution.y;
rect.bottom = rect.bottom * cameraResolution.y / screenResolution.y;[/mw_shl_code]
替換為
[mw_shl_code=java,true]
rect.left = rect.left * cameraResolution.y / screenResolution.x;
rect.right = rect.right * cameraResolution.y / screenResolution.x;
rect.top = rect.top * cameraResolution.x / screenResolution.y;
rect.bottom = rect.bottom * cameraResolution.x / screenResolution.y;[/mw_shl_code]

4.DecodeHandler類的decode方法中在activity.getCameraManager().buildLuminanceSource()之前添加以下代碼：
[mw_shl_code=java,true]
byte[] rotatedData = new byte[data.length];
for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++)
        rotatedData[x * height + height - y - 1] = data[x + y * width];
        }
int tmp = width;
width = height;
height = tmp;
data = rotatedData;[/mw_shl_code]

5.很關鍵的一步，解決豎屏后圖像拉伸問題。CameraConfigurationManager類的initFromCameraParameters()方法中：
在Log.i(TAG, "Screen resolution: " + screenResolution);之后添加以下代碼：
[mw_shl_code=java,true]
Point screenResolutionForCamera = new Point();
screenResolutionForCamera.x = screenResolution.x;
screenResolutionForCamera.y = screenResolution.y;
if (screenResolution.x < screenResolution.y) {
    screenResolutionForCamera.x = screenResolution.y;
    screenResolutionForCamera.y = screenResolution.x;
   }[/mw_shl_code]
同時修改下一句為cameraResolution = findBestPreviewSizeValue(parameters,screenResolutionForCamera);

此外manifest中別忘了設置android:screenOrientation="portrait"，至此豎屏修改完畢。

第四步：掃描框位置和大小修改
此時的掃描框是豎直拉伸的矩形，很難看，我們可以將其修改為正方形或扁平型的。
CameraManager類的getFramingRect()方法中替換以下代碼：
[mw_shl_code=java,true]
int width = findDesiredDimensionInRange(screenResolution.x, MIN_FRAME_WIDTH, MAX_FRAME_WIDTH);
int height = findDesiredDimensionInRange(screenResolution.y,MIN_FRAME_HEIGHT, MAX_FRAME_HEIGHT);[/mw_shl_code]
替換為
[mw_shl_code=java,true]
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
int width = (int) (metrics.widthPixels * 0.6);
int height = (int) (width * 0.9);[/mw_shl_code]
此處我們根據屏幕分辨率來定掃描框大小更靈活一點，同時將偏移量topOffset修改為(screenResolution.y - height)/4

第五步：掃描框四個角和掃描線條修改
示例代碼中的線條是居中且不動的，我們可以將其修改為上下移動的掃描線，且可以改變線條的樣式。
在自定義掃描布局ViewfinderView類中的onDraw()方法中繪制四個角，關鍵代碼如下：
[mw_shl_code=java,true]
// 畫出四個角
paint.setColor(getResources().getColor(R.color.green));
// 左上角
canvas.drawRect(frame.left, frame.top, frame.left + 15,frame.top + 5, paint);
canvas.drawRect(frame.left, frame.top, frame.left + 5,frame.top + 15, paint);
// 右上角
canvas.drawRect(frame.right - 15, frame.top, frame.right,frame.top + 5, paint);
canvas.drawRect(frame.right - 5, frame.top, frame.right,frame.top + 15, paint);
// 左下角
canvas.drawRect(frame.left, frame.bottom - 5, frame.left + 15,frame.bottom, paint);
canvas.drawRect(frame.left, frame.bottom - 15, frame.left + 5,frame.bottom, paint);
// 右下角
canvas.drawRect(frame.right - 15, frame.bottom - 5, frame.right,frame.bottom, paint);
canvas.drawRect(frame.right - 5, frame.bottom - 15, frame.right,frame.bottom, paint);[/mw_shl_code]

此外將掃描線條修改為上下掃描的線，關鍵代碼如下：
[mw_shl_code=java,true]
if ((i += 5) < frame.bottom - frame.top) {
        /* 以下為用漸變線條作為掃描線 */
        // 漸變圖為矩形
        // mDrawable.setShape(GradientDrawable.RECTANGLE);
        // 漸變圖為線型
        // mDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
        // 線型矩形的四個圓角半徑
        // // mDrawable
        // // .setCornerRadii(new float[] { 8, 8, 8, 8, 8, 8, 8, 8 });
        // 位置邊界
        // mRect.set(frame.left + 10, frame.top + i, frame.right - 10,
        // frame.top + 1 + i);
        // 設置漸變圖填充邊界
        // mDrawable.setBounds(mRect);
        // 畫出漸變線條
        // mDrawable.draw(canvas);

        /* 以下為圖片作為掃描線 */
        mRect.set(frame.left - 6, frame.top + i - 6, frame.right + 6,frame.top + 6 + i);
        lineDrawable.setBounds(mRect);
        lineDrawable.draw(canvas);

        // 刷新
        invalidate();
       } else {
            i = 0;
       }[/mw_shl_code]
此處采用了兩種線條樣式，一種是漸變線條，還有一種是類似微信的圖片掃描線。
詳細代碼請看附件源碼。

運行截圖如下：
<ignore_js_op> 此為漸變線條            <ignore_js_op> 此為圖片線條，用的是微信的圖片，不過微信掃描用的應該是動畫很平滑，此處用的是多次繪制

另外，掃描成功后的手機震動和提示音在BeepManager中修改，里面我額外放了兩種提示音文件