4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

KotlinでQRコードを表示するAndroidアプリを作る

Last updated at Posted at 2018-04-15

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

build.gradle
...
dependencies {
    ...
    implementation 'com.journeyapps:zxing-android-embedded:3.6.0'
}

#レイアウト
今回使用したのはImageView,EditText,Buttonの3種類です.
自分の好みで配置してください.

activity_main.xml
   ...
    <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>

#本文

MainActivity.kt
...
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)
    }
}

#完成品

こんな感じのものが出来上がります.

スクリーンショット 2018-04-15 17.14.41.png

EditTextandroid:inputTypeを変更すると文字入力にも対応することが出来ます.

#おまけ

表示内容を以下のようにすればNanoWalletで読み込めます.

MainActivity.kt
    ...
    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)
        ...
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?