QRコードを表示することができれば金銭のやり取りとかが簡単にできる何かが作れるんじゃないか?
と思い最近色々と探っている日々です.
今回はAndroidでQRコードを表示するアプリを作りたいと思います.
開発環境は以下のとおりです
OS:macOS HighSierra
AndroidStudio:v3.1.1
Android OS:Opera v8.0.0
Language:Kotlin
仕様としては数字
を入力しButton
を押せばそれに応じたQRコードを生成するというものです.
#ライブラリ
QRコードを作成するためにZxing
というライブラリを使用するので
build.gradle
に追加します.
AndroidStudioのversionによってライブラリの呼び出し方が違うらしいので自分の環境に応じて変えてください.
v3.0以降 -> implementation
それ以前 -> compile
...
dependencies {
...
implementation 'com.journeyapps:zxing-android-embedded:3.6.0'
}
#レイアウト
今回使用したのはImageView,EditText,Buttonの3種類です.
自分の好みで配置してください.
...
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginBottom="91dp"
android:layout_marginEnd="44dp"
android:layout_marginStart="5dp"
android:layout_marginTop="60dp"
android:text="TAP"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/editText"
app:layout_constraintTop_toBottomOf="@+id/imageView" />
<ImageView
android:id="@+id/imageView"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginBottom="60dp"
android:layout_marginEnd="44dp"
android:layout_marginStart="40dp"
android:layout_marginTop="40dp"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher_round" />
<EditText
android:id="@+id/editText"
android:layout_width="200dp"
android:layout_height="60dp"
android:layout_marginBottom="51dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="47dp"
android:layout_marginTop="93dp"
android:ems="10"
android:inputType="number"
android:text="100"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView" />
</android.support.constraint.ConstraintLayout>
#本文
...
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val button = findViewById<Button>(R.id.button)
val editText = findViewById<EditText>(R.id.editText)
button.setOnClickListener(){
generateQR(editText.getText().toString())
}
}
private fun generateQR(text: String){
val format = BarcodeFormat.QR_CODE
val width = 1000
val height = width
val hint = HashMap<EncodeHintType, Any>()
hint.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M)
hint.put(EncodeHintType.MARGIN, 0)
val barcode = BarcodeEncoder()
val bitmap = barcode.encodeBitmap(text, format, width, height, hint)
val imageViewQRCode = findViewById<ImageView>(R.id.imageView)
imageViewQRCode.setImageBitmap(bitmap)
}
}
#完成品
こんな感じのものが出来上がります.
EditText
のandroid:inputType
を変更すると文字入力にも対応することが出来ます.
#おまけ
表示内容を以下のようにすればNanoWalletで読み込めます.
...
private fun generateQR(text: String){
...
val address = "wallet address"
val value = 1000000 * text.toInt()
val message = "message"
val wallet_name = "wallet_name"
var data = "{\"v\":2,\"type\":2,\"data\":{" +
"\"addr\":\"" + address+
"\",\"amount\":" + value.toString() +
",\"msg\":\""+ message +
"\",\"name\":\"" + wallet_name + "\"}}"
...
val bitmap = barcode.encodeBitmap(text, format, width, height, hint)
...