絕大多數android開發者都是使用google Zxing來實現二維碼、條形碼掃描，但官方和網上很多demo的掃描介面讓人不忍直視，今天我也做了一個，介面和執行效都是高仿微信最新版的掃描效果，執行效果圖如下：

主要是修改了ViewfindView類，我就不多解釋了，程式碼裡有詳細的註釋，相信大家很容易看懂的。

/*
 * Copyright (C) 2008 ZXing authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.zxing.view;

import java.util.Collection;
import java.util.HashSet;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.View;

import com.google.zxing.ResultPoint;
import com.qrcode.R;
import com.zxing.camera.CameraManager;

/**
 * This view is overlaid on top of the camera preview. It adds the viewfinder
 * rectangle and partial transparency outside it, as well as the laser scanner
 * animation and result points.
 */
public final class ViewfinderView extends View {
    private static final String TAG = "log";
    /**
     * 重新整理介面的時間
     */
    private static final long ANIMATION_DELAY = 10L;
    private static final int OPAQUE = 0xFF;

    /**
     * 四個綠色邊角對應的長度
     */
    private int ScreenRate;

    /**
     * 四個綠色邊角對應的寬度
     */
    private static final int CORNER_WIDTH = 10;
    /**
     * 掃描框中的中間線的寬度
     */
    private static final int MIDDLE_LINE_WIDTH = 6;

    /**
     * 掃描框中的中間線的與掃描框左右的間隙
     */
    private static final int MIDDLE_LINE_PADDING = 5;

    /**
     * 中間那條線每次重新整理移動的距離
     */
    private static final int SPEEN_DISTANCE = 5;

    /**
     * 手機的螢幕密度
     */
    private static float density;
    /**
     * 字型大小
     */
    private static final int TEXT_SIZE = 16;
    /**
     * 字型距離掃描框下面的距離
     */
    private static final int TEXT_PADDING_TOP = 30;

    /**
     * 畫筆物件的引用
     */
    private Paint paint;

    /**
     * 中間滑動線的最頂端位置
     */
    private int slideTop;

    /**
     * 中間滑動線的最底端位置
     */
    private int slideBottom;

    /**
     * 將掃描的二維碼拍下來，這裡沒有這個功能，暫時不考慮
     */
    private Bitmap resultBitmap;
    private final int maskColor;
    private final int resultColor;

    private final int resultPointColor;
    private Collection<ResultPoint> possibleResultPoints;
    private Collection<ResultPoint> lastPossibleResultPoints;

    boolean isFirst;

    public ViewfinderView(Context context, AttributeSet attrs) {
        super(context, attrs);

        density = context.getResources().getDisplayMetrics().density;
        //將畫素轉換成dp
        ScreenRate = (int) (20 * density);

        paint = new Paint();
        Resources resources = getResources();
        maskColor = resources.getColor(R.color.viewfinder_mask);
        resultColor = resources.getColor(R.color.result_view);

        resultPointColor = resources.getColor(R.color.possible_result_points);
        possibleResultPoints = new HashSet<ResultPoint>(5);
    }

    @Override
    public void onDraw(Canvas canvas) {
        //中間的掃描框，你要修改掃描框的大小，去CameraManager裡面修改
        Rect frame = CameraManager.get().getFramingRect();
        if (frame == null) {
            return;
        }

        //初始化中間線滑動的最上邊和最下邊
        if (!isFirst) {
            isFirst = true;
            slideTop = frame.top;
            slideBottom = frame.bottom;
        }

        //獲取螢幕的寬和高
        int width = canvas.getWidth();
        int height = canvas.getHeight();

        paint.setColor(resultBitmap != null ? resultColor : maskColor);

        //畫出掃描框外面的陰影部分，共四個部分，掃描框的上面到螢幕上面，掃描框的下面到螢幕下面
        //掃描框的左邊面到螢幕左邊，掃描框的右邊到螢幕右邊
        canvas.drawRect(0, 0, width, frame.top, paint);
        canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);
        canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
        canvas.drawRect(0, frame.bottom + 1, width, height, paint);


        if (resultBitmap != null) {
            // Draw the opaque result bitmap over the scanning rectangle
            paint.setAlpha(OPAQUE);
            canvas.drawBitmap(resultBitmap, frame.left, frame.top, paint);
        } else {

            //畫掃描框邊上的角，總共8個部分
//            paint.setColor(Color.GREEN);
//            canvas.drawRect(frame.left, frame.top, frame.left + ScreenRate, frame.top + CORNER_WIDTH, paint);
//            canvas.drawRect(frame.left, frame.top, frame.left + CORNER_WIDTH, frame.top + ScreenRate, paint);
//            canvas.drawRect(frame.right - ScreenRate, frame.top, frame.right, frame.top + CORNER_WIDTH, paint);
//            canvas.drawRect(frame.right - CORNER_WIDTH, frame.top, frame.right, frame.top + ScreenRate, paint);
//            canvas.drawRect(frame.left, frame.bottom - CORNER_WIDTH, frame.left + ScreenRate, frame.bottom, paint);
//            canvas.drawRect(frame.left, frame.bottom - ScreenRate, frame.left + CORNER_WIDTH, frame.bottom, paint);
//            canvas.drawRect(frame.right - ScreenRate, frame.bottom - CORNER_WIDTH, frame.right, frame.bottom, paint);
//            canvas.drawRect(frame.right - CORNER_WIDTH, frame.bottom - ScreenRate, frame.right, frame.bottom, paint);

            //TODO 使用微信圖片繪製
            Rect rect = new Rect();
            rect.left = frame.left;
            rect.top = frame.top;
            rect.right = frame.left + 24;
            rect.bottom = frame.top + 24;
            canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr1))).getBitmap(), null, rect, paint);

            rect.left = frame.right - 24;
            rect.top = frame.top;
            rect.right = frame.right;
            rect.bottom = frame.top + 24;
            canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr2))).getBitmap(), null, rect, paint);

            rect.left = frame.left;
            rect.top = frame.bottom - 24;
            rect.right = frame.left + 24;
            rect.bottom = frame.bottom;
            canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr3))).getBitmap(), null, rect, paint);

            rect.left = frame.right - 24;
            rect.top = frame.bottom - 24;
            rect.right = frame.right;
            rect.bottom = frame.bottom;
            canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.scanqr4))).getBitmap(), null, rect, paint);


            //繪製中間的線,每次重新整理介面，中間的線往下移動SPEEN_DISTANCE
            slideTop += SPEEN_DISTANCE;
            if (slideTop >= frame.bottom) {
                slideTop = frame.top;
            }
            //TODO 使用微信掃描的圖片
            Rect lineRect = new Rect();
            lineRect.left = frame.left;
            lineRect.right = frame.right;
            lineRect.top = slideTop;
            lineRect.bottom = slideTop + 18;
            canvas.drawBitmap(((BitmapDrawable) (getResources().getDrawable(R.drawable.qrcode_scan_line))).getBitmap(), null, lineRect, paint);

            //畫掃描框下面的字
            paint.setColor(Color.WHITE);
            paint.setTextSize(TEXT_SIZE * density);
            paint.setAlpha(0x40);
            paint.setTypeface(Typeface.DEFAULT_BOLD);
            String text = getResources().getString(R.string.scan_text);
            float textWidth = paint.measureText(text);
            canvas.drawText(text, (width - textWidth) / 2, (float) (frame.bottom + (float) TEXT_PADDING_TOP * density), paint);

            Collection<ResultPoint> currentPossible = possibleResultPoints;
            Collection<ResultPoint> currentLast = lastPossibleResultPoints;
            if (currentPossible.isEmpty()) {
                lastPossibleResultPoints = null;
            } else {
                possibleResultPoints = new HashSet<ResultPoint>(5);
                lastPossibleResultPoints = currentPossible;
                paint.setAlpha(OPAQUE);
                paint.setColor(resultPointColor);
                for (ResultPoint point : currentPossible) {
                    canvas.drawCircle(frame.left + point.getX(), frame.top
                            + point.getY(), 6.0f, paint);
                }
            }
            if (currentLast != null) {
                paint.setAlpha(OPAQUE / 2);
                paint.setColor(resultPointColor);
                for (ResultPoint point : currentLast) {
                    canvas.drawCircle(frame.left + point.getX(), frame.top + point.getY(), 3.0f, paint);
                }
            }


            //只重新整理掃描框的內容，其他地方不重新整理
            postInvalidateDelayed(ANIMATION_DELAY, frame.left, frame.top, frame.right, frame.bottom);

        }
    }

    public void drawViewfinder() {
        resultBitmap = null;
        invalidate();
    }

    /**
     * Draw a bitmap with the result points highlighted instead of the live
     * scanning display.
     *
     * @param barcode An image of the decoded barcode.
     */
    public void drawResultBitmap(Bitmap barcode) {
        resultBitmap = barcode;
        invalidate();
    }

    public void addPossibleResultPoint(ResultPoint point) {
        possibleResultPoints.add(point);
    }

}