關於zxing掃碼界面的優化

關於zxing就不多介紹了，功能強大，高度可訂製，但其原本的界面卻很醜，下面將對其進行一些美化

1.首先就是部分手機在掃描界面會發生變形.

這個只需要將CameraConfigurationManager.Java下的findBestPreviewSizeValue()方法中的一句代碼：

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

替換爲

loat newDiff = Math.abs(screenResolution.x * 1.0f / newY - screenResolution.y * 1.0f / newX);

即可；

2.對掃碼框進行修飾（增加邊框）

在ViewFonderView的onDrow中添加如下代碼：

private static final int CORNER_WIDTH = 15;//設置掃碼框四個角的八個矩形的寬度
private static final int BOEDER_WIDTH = 15;//設置掃碼框四個邊框的寬度
private int slideTop;//掃描線的位置
private static final int SPEEN_DISTANCE = 2;//掃描線的移動速度


 paint.setColor(getResources().getColor(R.color.border));//顏色自己選吧
/**
 *繪製第一個小矩形
 */
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);
/**
 *繪製四條線
 */
paint.setColor(getResources().getColor(R.color.border1));
paint.setStrokeWidth(BOEDER_WIDTH);
canvas.drawLine(frame.left,frame.top+BOEDER_WIDTH/2,frame.right,frame.top+BOEDER_WIDTH/2,paint);
 canvas.drawLine(frame.left,frame.bottom-BOEDER_WIDTH/2,frame.right,frame.bottom-BOEDER_WIDTH/2,paint);
canvas.drawLine(frame.left+BOEDER_WIDTH/2,frame.top,frame.left+BOEDER_WIDTH/2,frame.bottom,paint);
canvas.drawLine(frame.right-BOEDER_WIDTH/2,frame.top,frame.right-BOEDER_WIDTH/2,frame.bottom,paint);

另外再加一條掃描線

slideTop += SPEEN_DISTANCE;//定義好描線每秒的移動速度
if (slideTop >= frame.bottom) {
    slideTop = frame.top;
}
Rect lineRect = new Rect();
lineRect.left = frame.left;
lineRect.right = frame.right;
lineRect.top = slideTop;
lineRect.bottom = slideTop + 18;
//用來繪製Bitmap
canvas.drawBitmap(((BitmapDrawable) (getResources()
.getDrawable(R.drawable.fle))).getBitmap(), null, lineRect, paint);

圖片在網上找一個就行，大概就這個樣子

3.調整一下方框的大小和位置

先到CameraManager類中將zxing定義的掃描框的寬高的最值修改一下

  private static final int MIN_FRAME_WIDTH = 240;
  private static final int MIN_FRAME_HEIGHT = 240;
  private static final int MAX_FRAME_WIDTH = 480*2;
  private static final int MAX_FRAME_HEIGHT = 360*3;

然後再到getFramingRect()方法中修改掃碼框的大小和位置

 public Rect getFramingRect() {
        Point screenResolution = configManager.getScreenResolution();
        if (framingRect == null) {
            if (camera == null) {
                return null;
            }
            /**
             * 在這裏修改掃碼框的大小
             */
            int width = screenResolution.x * 7 / 10;
            if (width < MIN_FRAME_WIDTH) {
                width = MIN_FRAME_WIDTH;
            } else if (width > MAX_FRAME_WIDTH) {
                width = MAX_FRAME_WIDTH;
            }
            int height = screenResolution.x * 7 / 10;
            if (height < MIN_FRAME_HEIGHT) {
                height = MIN_FRAME_HEIGHT;
            } else if (height > MAX_FRAME_HEIGHT) {
                height = MAX_FRAME_HEIGHT;
            }
            /**
             * 這裏繪製掃碼框
             */
            int leftOffset = (screenResolution.x - width) / 2;
            int topOffset = (int) ((screenResolution.y - height) / 2 - screenResolution.y*0.15);
            framingRect = new Rect(leftOffset, topOffset, leftOffset + width,
                    topOffset + height);
            Log.d(TAG, "Calculated framing rect: " + framingRect);
        }
        return framingRect;
    }

最後貼一張效果圖