LoginSignup
7
7

More than 5 years have passed since last update.

初心者がKotlinでQRコードを表示させてみた

Last updated at Posted at 2018-12-02

Zxing

アンドロイドアプリでQRコードをごにょごにょしたい場合はZxingというライブラリが用意されているのでそれを使えばいいらしい(なんて読むの?)

導入

①プロジェクトを作成
https://qiita.com/Natsuki_on_Rails/items/d49c36d685de6dea56f7
これ参考にしてもらえるとうれしい

②build.gradle(Module:app)にライブラリを追加
↓Moduleのほうね
スクリーンショット 2018-12-02 19.12.14.png

dependencies{}の中に↓って追加(バージョンは適宜変更してください)
implementation 'com.journeyapps:zxing-android-embedded:3.6.0'

スクリーンショット 2018-12-02 19.12.32.png

③ビルド
成功したらおっけ
スクリーンショット 2018-12-02 19.17.35.png

サンプル

こんなかんじにしよかな
テキストに何か入れてボタンを押したらQRコードが生成される
IMG_20181202_211217.jpg

つくってみた

画面レイアウト

TextView = "文字を入れてね"
EditText = ここに入れた文字がQRコードになる
Button = ボタンを押すとQRコードが生成される
ImageView = 生成したQRコードを表示する
(設定値は適当です<(_ _)>)

スクリーンショット 2018-12-02 22.52.22.png

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="text|textPersonName"
            android:ems="10"
            android:id="@+id/editText"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp" android:autofillHints="" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textView"/>
    <Button
            android:text="@string/qr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button" android:layout_marginStart="24dp"
            app:layout_constraintStart_toEndOf="@+id/editText"
            android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/textView"/>
    <TextView
            android:text="@string/label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp" android:labelFor="@+id/editText"/>
    <ImageView
            android:layout_width="276dp"
            android:layout_height="248dp" app:srcCompat="@mipmap/ic_launcher"
            android:id="@+id/imageView"
            app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="51dp"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="57dp" android:layout_marginTop="64dp"
            app:layout_constraintTop_toBottomOf="@+id/button" android:contentDescription="@string/image"/>
</android.support.constraint.ConstraintLayout>

処理

ボタンとエディットテキストを変数に入れる

setOnClickListener{}でボタンの押下を察知

bitmapをつくって画像を表示

MainActivity.kt
package com.example.natsuki.qr

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.util.AndroidRuntimeException
import com.google.zxing.WriterException
import com.google.zxing.BarcodeFormat
import com.journeyapps.barcodescanner.BarcodeEncoder
import android.widget.ImageView
import android.view.View
import android.widget.Button
import android.widget.EditText


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 {

            //QRコード化する文字列
            val data = editText.text.toString()
            //QRコード画像の大きさを指定(pixel)
            val size = 500


            try {
                val barcodeEncoder = BarcodeEncoder()
                //QRコードをBitmapで作成
                val bitmap = barcodeEncoder.encodeBitmap(data, BarcodeFormat.QR_CODE, size, size)

                //作成したQRコードを画面上に配置
                val imageViewQrCode = findViewById<View>(R.id.imageView) as ImageView
                imageViewQrCode.setImageBitmap(bitmap)

            } catch (e: WriterException) {
                throw AndroidRuntimeException("Barcode Error.", e)
            }
        }

    }
}

できた!
スクリーンショット 2018-12-02 22.51.53.png
スクリーンショット 2018-12-02 22.51.34.png

読み取れた!
※他のQRコード読み取りアプリです
Screenshot_20181202-225118.png

これで色々できそう
次は読み取り機能かな

7
7
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
7
7