Help us understand the problem. What is going on with this article?

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

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away