PHONE APPLI Engineer blog

エンジニアブログ

AndroidでQRコード読み取りアプリをライブラリを使用して作ってみた

 こんにちは、株式会社Phone Appliプロダクト本部プロダクトデベロップメント部スマホチーム所属のAndroidエンジニアである田松知将(たまつかずまさ)と申します。今回はQRコードを読み取るアプリを実装する機会があったので、ライブラリを使用しての簡単な実装及びカスタマイズ方法をメモ書き程度に執筆しておこうと思います。

 

目次

1. ライブラリの導入

2. QRコード読み取り画面の実装

3. レイアウトのカスタマイズ

4. まとめ

 

1. ライブラリの導入

 今回はjourneyappsが提供しているオープンソースライブラリであるZXing Android Embedded(以下ZXingと略します)を使用して実装を進めていきたいと思います。(Android Studioでプロジェクトを作成するところは今回割愛させて頂きます)
プロジェクトを作成したら、まず以下の記述をアプリ側のbuild.gradleのdependenciesに記述します。
gradle.png
また4.1.0はライブラリの中でJava8のラムダ式を使用しているので、以下もアプリ側のbuild.gradleのandroid内に記述しておきます。この記述に関してライブラリ側の使用例に記載されていないので注意が必要です!実装する際にここでハマりました笑
compile.png
build.gradleへの記述が終わり設定を適用したら、次にAndroidManifest.xmlに以下を追加しQRコード読み取りカメラを起動する準備をします。
application.png
qr_activity.png
hardwareAcceleratedはGPUを用いて画面描写高速にするもので、use-permissionはカメラとフラッシュの使用を許可するために必要な記述です。Activityに関してはZXingがデフォルトで提供しているActivityを起動するのに必要になります。ただ、後述するカスタムレイアウトを使用した別Activityでカメラを起動する場合は用意したActivityを使用することになるので、不要となります。
ここまででQR読み取りを実装する準備が整いました!次に実装に参りましょう。

2. QRコード読み取り画面の実装

ここからは実際にQRコード読み取り画面の実装をしていきたいと思います。今回はデフォルトで用意されているものをボタンを押すことで起動するような形で作成していきましょう!
まずはアプリを起動した際に初期表示されるMainActivityを以下のレイアウトにします。とても簡素で実際にこんな画面になることは無いと思いますが、簡単に実装していくことが目的なので今回トップ画面はこのような形になりました。
main_activity_layout.pngQRトップ画面.png
次にボタンを押した際にQRカメラを起動するようにするため、clickListenerと読み取った結果をトーストで表示する実装をしていきます。
QR画面実装.png
コード上でコメントを記載した通り、たった数行記述するだけで簡単に実装することができます。以下がカメラを起動した際の画面と読み取った後の画面になります。
Screenshot_20200930-111908.png読み取り結果.png
このようにライブラリを使用するととても簡単に実装することが出来ます!またデフォルトの読み取り画面もコード上で多少のカスタマイズを以下のように行えます。以下に記載した以外にもカスタマイズオプションがあるので実装する際には色々試してみると良いと思います。
読み取り画面オプション.png

3. レイアウトのカスタマイズ

 ここまででデフォルトで用意されているActivityを使用してQRコード読み取り画面の実装を行いましたが、読み取り画面のレイアウトを自分好みにカスタマイズした画面の実装方法を紹介して終わりにしたいと思います。カスタムレイアウトを適用するにあたって用意するものは以下になります。ファイル名に関しては適宜変更して問題ありません。
・CustomScannerActivity
 カメラ起動した際の遷移先Activity。

・activity_custom_scanner.xml
 カメラ起動した際のActivityのレイアウトファイル。

・custom_qr_code_scanner.xml
 カメラ画面に適用するレイアウト。レイアウトをカスタムする際にはこのレイアウトファイルを編集して見た目を変更していきます。

今回はカスタムレイアウトでQRコードが読み込める旨を伝えるテキストとフラッシュのON/OFFを切り替えられるようなスイッチを配置したレイアウトを作成したいと思います。

3.1. CustomScannerActivity

 フラッシュを使用する際の制御やカメラ設定等を記述するActivityです。今回はフラッシュのON/OFF制御のみとカメラの起動のみの処理を記述していますが、カメラ画面内で別のことをやりたい場合はここに記述することになると思います。以下がコード内容でそれぞれ処理にコメントを入れています。
読み取り画面Activity.png

3.2. activity_custom_scanner.xml

 読み取り画面のActivityに対応するレイアウトファイルになります。今回はカメラ用のレイアウトを用意し、カスタムレイアウトを読み込むだけなので以下になります。
読み取り画面レイアウト.png

3.3. custom_qr_code_scanner.xml

 実際にレイアウトをカスタムするためのレイアウトファイルになります。BarcodeViewとViewfinderViewはカメラや読み込み可能範囲の表示に必要なもので、デフォルトで提供されているものを使用します。今回はフラッシュを制御するスイッチとQRコードが読み込める旨を記載したテキストを配置しています。
読み取り画面カスタムレイアウト.png
デフォルトで提供されているBarcodeViewやViewfinderViewにもカスタム属性が用意されており、コード上に記載されているzxing_viewfinder_laser_visibilityをfalseにすることで読み取り可能領域の線を消すことができたり、zxing_possible_result_pointsで読み取り可能領域でバーコードを読み取っている最中の色を変更することもできるので、デフォルトで用意されているViewにおいても様々なオプションが設定出来ます。

カスタムレイアウトの用意が出来たら後は、AndroidManifest.xmlとカメラを起動する際のオプションを以下のような記述を追加するだけでカスタムレイアウトが適用された読み取り画面を起動することが出来ます!
カスタムレイアウトAndroidManifest.png
カスタムレイアウト起動.png
起動した画面は以下になります。左上のスイッチでフラッシュのON/OFFが切り替えられ、可能読み取り領域の下に文言が表示されていますね!
カスタムレイアウトカメラ.png

4. まとめ

 今回はライブラリを使用してのQRコード読み取り画面を作成してみました。なるべく簡単めに実装を進めており、読み取り可能領域フレームの見た目を変更するといったことは今回行っていないので、今後はデフォルトで用意されている部分を変更する実装もしてみたいですね。最近では難しい実装をライブラリで簡単に実装できるのでとても便利なので、使用出来るものは積極的に使用していきたいなと思っています。
お読み頂きありがとうございました。