QRCodeDemo
新手快速集成ZXing的掃描二維碼馋劈，同時(shí)自定義封裝實(shí)現(xiàn)
目錄
- 基本概述（項(xiàng)目資源地址）
- 優(yōu)點(diǎn)
- 缺點(diǎn)
- 界面展示
- 二維碼模塊開發(fā)過程
- ZXing集成
- 導(dǎo)入ZXing.jar包
- 拷貝資源文件到工程中
- 拷貝掃碼核心類到工程中
- 主要包類簡述
- 自定義掃碼頁面布局文件
- 自定義功能代碼
- ZXing集成
基本概述
優(yōu)勢
- Google的開源框架，高度的可定制性
- 除了二維碼還可以識(shí)別其他碼，如條形碼
- 不依賴第三方错蝴，使用簡單
缺點(diǎn)
- 相對(duì)Gradle依賴，ZXing的集成更為繁瑣
- 高度的可定制性也表示這更高的學(xué)習(xí)成本
開發(fā)過程
ZXing集成
導(dǎo)入ZXing.jar包
[圖片上傳失敗...(image-58147a-1522833930690)]
- 導(dǎo)入以后記得右鍵add as library
拷貝資源文件到工程中
將下面資源拷貝到自己工程下
-
layout包：
-
activity_qrcode_capture_layout.xml：主要掃碼界面的布局颓芭，自定義布局的核心文件
-
-
raw包：（沒有就新建）
-
beep.ogg:這個(gè)就是掃碼成功的提示音效顷锰，也可以用自己的音效，不過名字要一樣
-
-
values包：
- 在
colors.xml中添加如下的資源：
- 在
<!-- QR_Code -->
<color name="viewfinder_mask">#60000000</color>
<color name="result_view">#b0000000</color>
<color name="possible_result_points">#c0ffff00</color>
<color name="result_image_border">#ffffffff</color>
<color name="result_minor_text">#ffc0c0c0</color>
<color name="result_points">#c000ff00</color>
<color name="system_bar_color">#fed952</color>
- 在
ids.xml下添加如下資源：（沒有就新建）
<!-- QR_Code -->
<item name="auto_focus" type="id"/>
<item name="decode" type="id"/>
<item name="decode_failed" type="id"/>
<item name="decode_succeeded" type="id"/>
<item name="encode_failed" type="id"/>
<item name="encode_succeeded" type="id"/>
<item name="launch_product_query" type="id"/>
<item name="quit" type="id"/>
<item name="restart_preview" type="id"/>
<item name="return_scan_result" type="id"/>
<item name="search_book_contents_failed" type="id"/>
<item name="search_book_contents_succeeded" type="id"/>
<item name="gridview" type="id"/>
<item name="webview" type="id"/>
<item name="about_version_code" type="id">false</item>
<item name="split" type="id">false</item>
-
strings.xml資源添加一下字符串資源：
<!-- QR_Code -->
<string name="button_ok">OK</string>
<string name="msg_camera_framework_bug">Sorry, the Android camera encountered a problem. You may need to restart the
device.
</string>
<string name="msg_bulk_mode_scanned">Bulk mode: barcode scanned and saved</string>
<string name="scan_text">放入框中即可進(jìn)行二維碼掃描</string>
<string name="contents_contact">Contact info</string>
<string name="contents_email">Email address</string>
<string name="contents_location">Geographic coordinates</string>
<string name="contents_phone">Phone number</string>
<string name="contents_sms">SMS address</string>
<string name="contents_text">Plain text</string>
<string name="preferences_vibrate">preferences_vibrate</string>
<string name="preferences_play_beep">preferences_play_beep</string>
<string name="preferences_actions_title">When a barcode is found\u2026</string>
<string name="preferences_copy_to_clipboard_title">Copy to clipboard</string>
<string name="preferences_decode_1D_title">1D barcodes</string>
<string name="preferences_decode_Data_Matrix_title">Data Matrix</string>
<string name="preferences_decode_QR_title">QR Codes</string>
<string name="preferences_play_beep_title">Beep</string>
<string name="preferences_remember_duplicates_summary">Store multiple scans of the same barcode in History</string>
<string name="preferences_remember_duplicates_title">Remember duplicates</string>
<string name="preferences_scanning_title">When scanning for barcodes, decode\u2026</string>
<string name="preferences_supplemental_summary">Try to retrieve more information about the barcode contents</string>
<string name="preferences_supplemental_title">Retrieve more info</string>
<string name="preferences_vibrate_title">Vibrate</string>
<string name="preview_msg"> preview pages available,click Download for more.</string>
- xml包： 新建 xml包
- 添加：
preferences.xml
- 添加：
拷貝掃碼核心類到工程中
這個(gè)過程很簡單亡问，直接將ZXing的Java核心類文件夾拷貝到你的工程包名目錄下就可以了
[圖片上傳失敗...(image-bbd546-1522833930690)]
主要包類簡述
對(duì)核心功能類的了解官紫，就是我們自定義掃碼功能的基礎(chǔ)
CaptureActivity：整個(gè)掃碼的界面活動(dòng)類PreferencesActivity： 掃碼功能的配置類，不會(huì)對(duì)其作出修改-
CameraManager：- 掃碼的預(yù)覽閃光燈等一系列功能州藕，主要提供給我們調(diào)用束世，也不會(huì)對(duì)它作出修改
- Camera類中暴露其他Manager的實(shí)現(xiàn)接口而已
DecodeThread： 解碼的線程DecodeHandler: 中轉(zhuǎn)類，將線程的消息轉(zhuǎn)發(fā)到 下面的CaptureActivityHandlerCaptureActivityHandler： 異步回傳消息真正的邏輯處理實(shí)現(xiàn)類Util：獲取屏幕寬高和IMEIViewfinderView掃碼自定義框最主要的類床玻，自定義掃碼框主要在這里完成
自定義掃碼頁面布局文件
主要在activity_qrcode_capture_layout.xml中操作：
本來的文件布局：
只有一個(gè)簡單的攝像頭預(yù)覽的SurfaceView和掃碼框ViewfinderView
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SurfaceView
android:id="@+id/preview_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" />
<com.rayhahah.qrcodedemo.zxing.view.ViewfinderView
android:id="@+id/viewfinder_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:background="@color/transparent"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_50">
<ImageView
android:visibility="visible"
android:layout_alignParentLeft="true"
android:id="@+id/iv_qrcode_back"
android:layout_marginLeft="@dimen/dp_10"
android:src="@drawable/ic_svg_arrow_left_color_primary_24"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<TextView
android:layout_centerInParent="true"
android:textSize="@dimen/sp_20"
android:gravity="center"
android:text="@string/decode_qrcode"
android:textColor="?attr/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<include
android:id="@+id/include2"
layout="@layout/layout_qrcode_bottom_feature"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_60" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
然后加入我們自己的元素：
- 底部功能欄：相冊(cè)毁涉、閃光的、生成二維碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_60"
android:background="@color/transparent"
android:orientation="horizontal"
android:padding="@dimen/dp_5">
<TextView
android:id="@+id/qrcode_btn_photo"
style="@style/text_middle_center"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawableTop="@drawable/selector_ic_photo"
android:text="@string/photo_album"
android:textColor="?attr/colorPrimary"
android:textSize="@dimen/sp_16"/>
<TextView
android:id="@+id/qrcode_btn_flash"
style="@style/text_middle_center"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawableTop="@drawable/selector_ic_flash"
android:text="@string/flash_light"
android:textColor="?attr/colorPrimary"
android:textSize="@dimen/sp_16"/>
<TextView
android:id="@+id/qrcode_btn_encode"
style="@style/text_middle_center"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawableTop="@drawable/selector_ic_qrcode"
android:text="@string/qrcode"
android:textColor="?attr/colorPrimary"
android:textSize="@dimen/sp_16"/>
</LinearLayout>
掃碼框的自定義實(shí)現(xiàn)主要在ViewfinderView.java中onDraw動(dòng)態(tài)繪制：
主要原理就是獲取他本來的掃碼框大小锈死，然后在他的四個(gè)角分別繪制兩個(gè)長方形來包裹贫堰，同時(shí)在中間實(shí)現(xiàn)一個(gè)不斷移動(dòng)的掃碼條
@Override
public void onDraw(Canvas canvas) {
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();
// Draw the exterior (i.e. outside the framing rect) darkened
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, null, frame, paint);
} else {
//畫出8個(gè)正方形，組成括住掃碼框
paint.setColor(scanColor);
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);
/**
* 一直在移動(dòng)的掃描條
*/
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;
canvas.drawBitmap(((BitmapDrawable) (getResources()
.getDrawable(R.drawable.blue_line))).getBitmap(), null, lineRect,
paint);
paint.setColor(Color.WHITE);
paint.setTextSize(TEXT_SIZE * density);
paint.setAlpha(0x40);
paint.setTypeface(Typeface.create("System", Typeface.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);
//自定義部分結(jié)束
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);
}
}
自定義功能代碼
在CaptureActivity.Java中完成：
- 首先找到我們的控件：
btnBack = ((ImageView) findViewById(R.id.iv_qrcode_back));
btnPhoto = ((TextView) findViewById(R.id.qrcode_btn_photo));
btnFlash = ((TextView) findViewById(R.id.qrcode_btn_flash));
btnEncode = ((TextView) findViewById(R.id.qrcode_btn_encode));
btnBack.setOnClickListener(this);
btnPhoto.setOnClickListener(this);
btnFlash.setOnClickListener(this);
btnEncode.setOnClickListener(this);
- 監(jiān)聽實(shí)現(xiàn)：
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.iv_qrcode_back:
finish();
break;
case R.id.qrcode_btn_photo:
//跳轉(zhuǎn)到系統(tǒng)相冊(cè)選擇圖片
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.setType("image/*");
Intent wrapperIntent = Intent.createChooser(intent, "選擇二維碼圖片");
startActivityForResult(wrapperIntent, REQUEST_CODE);
break;
case R.id.qrcode_btn_flash:
if (isFlash) {
//關(guān)閉閃光燈
CameraManager.get().turnLightOff();
isFlash=false;
} else {
//開啟閃光燈
CameraManager.get().turnLightOn();
isFlash=true;
}
break;
case R.id.qrcode_btn_encode:
// 跳轉(zhuǎn)到生成二維碼頁面
Bitmap b = createQRCode();
Intent intentEncode = getIntent();
intentEncode.putExtra(EXTRA_DATA, b);
// intentEncode.putExtra("QR_CODE", b);
setResult(RESULT_CODE_ENCODE, intentEncode);
finish();
break;
default:
break;
}
}
- 在
CaptureActivity中獲取相冊(cè)中選擇的圖片來掃碼：
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
//返回選擇的需要掃描二維碼的圖片
if (resultCode == RESULT_OK) {
//被選擇的二維碼圖片的uri
uri = data.getData();
new Thread(new Runnable() {
@Override
public void run() {
//掃描
Result result = scanningImage(uri);
if (result == null) {
Looper.prepare();
Toast.makeText(getApplicationContext(), "圖片格式有誤", Toast.LENGTH_SHORT).show();
Looper.loop();
} else {
// 數(shù)據(jù)返回待牵，在這里去處理掃碼結(jié)果
String recode = (result.toString());
Intent data = new Intent();
data.putExtra(EXTRA_DATA, recode);
setResult(RESULT_CODE_DECODE, data);
finish();
}
}
}).start();
}
}
- 最后只要在我們啟動(dòng)的Activity中的獲取二維碼掃描后的內(nèi)容并做自己的處理就可以了其屏，MainActivity中的使用
private static final int REQUEST_QRCODE = 0x01;
public void onQRCodeClick(View view) {
//啟動(dòng)二維碼掃描的頁面功能
Intent intent = new Intent(this, CaptureActivity.class);
startActivityForResult(intent, REQUEST_QRCODE);
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == REQUEST_QRCODE) {
switch (resultCode) {
case CaptureActivity.RESULT_CODE_DECODE:
case Activity.RESULT_OK:
String codeData = data.getStringExtra(CaptureActivity.EXTRA_DATA);
Toast.makeText(this, codeData, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}
