在 Android 上自訂 Zxing 掃描框樣式與大小位置

前言

Zxing 是知名的條碼辨識函式庫，可以整合在 Android、iOS......等平台的 App 上。
網路上已經搜尋的到許多使用教學，不過在深度客製化（如自訂 layout）上，多半都是用修改原始碼的方式去實現。直接修改原始碼固然方便快速，但缺點就是當有兩種以上客製需求時，必須撰寫額外的判斷式去處理。以模組化的概念來看，這樣的作法不是很漂亮。
因此，本篇文章著重在運用繼承和撰寫 layout XML 檔的方式實作客製化。

自訂掃描介面佈局

Zxing 最簡單的使用方式是利用 IntentIntegrator 物件去呼叫掃描器並接收回傳的掃描結果，而缺點也顯而易見的是無法客製化整個介面佈局。
基本的客製化方式是自行在 res/layout 目錄下建立 XML 檔，然後加入 <com.journeyapps.barcodescanner.DecoratedBarcodeView> 元件。如此就可以讓掃描畫面呈現在 App 畫面的某個區塊，而不用佔滿整個畫面。

其中有些屬性可以再進一步客製化 DecoratedBarcodeView 本身的外觀樣式，常用的有：

• app:zxing_framing_rect_width=掃描框的寬度
• app:zxing_framing_rect_height=掃描框的高度
• app:zxing_scanner_layout=套用自訂的 layout

而 app:zxing_scanner_layout 套用的 layout 中必須要包含繼承自 BarcodePreview 和 ViewfinderView 的兩個元件才能構成一個完整的掃描器。

客製化掃描框樣式

ViewfinderView 負責描繪掃描畫面中的掃描框，我們可以繼承並覆寫它的 onDraw() 方法。
下面範例的頂端幾個變數和 onDraw() 方法中的 [Custom start/end] 之間的程式碼是我所增加的部份，其他是直接從原始碼複製過來的。

下圖是客製化的結果，在掃描框四個角落加上了橘色邊邊。

客製化掃描框位置

BarcodePreview 負責顯示相機拍到的畫面以及定義解析區域在畫面上的範圍大小（前面提到的 ViewfinderView 只是像濾鏡一樣覆蓋在 BarcodePreview 之上，所謂的掃描框也只是剛好跟這邊定義的解析區域重疊而已）。我們可以繼承並覆寫它的 calculateFramingRect() 方法。
下面範例示範如何修改掃描框位置，一般預設是正中間。

其他

研究中......敬請期待！
看官如有任何想法也歡迎討論～