【ZXing】バーコード読み取り画面をカスタマイズする

2023.02.28

やりたいこと

Androidで、デフォルトのバーコード読み取り画面(全面表示・下にのみメッセージ表示)ではなく、カスタマイズしたい

カスタマイズ方法概要

(1)
画面のxmlには、ベースとなるバーコード読み取り画面の基本部分となる「com.journeyapps.barcodescanner.DecoratedBarcodeView」のみを配置

(2)
画面レイアウトの詳細は、別のxmlを用意し、そこに「com.journeyapps.barcodescanner.BarcodeView」と「com.journeyapps.barcodescanner.ViewfinderView」を配置して、プラスしたい要素を実装したり、大きさ等を指定する

コード

(1)ベースとなる画面

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity2">

<com.journeyapps.barcodescanner.DecoratedBarcodeView
android:id="@+id/decorate_barcode_view"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:zxing_scanner_layout="@layout/custom_qr_code_scanner" />　★ここでレイアウトする先の画面のxmlを指定

</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity2.kt

import android.content.Intent
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import com.github.kittinunf.fuel.httpGet
import com.github.kittinunf.result.Result
import com.google.zxing.BarcodeFormat
import com.google.zxing.ResultPoint
import com.google.zxing.client.android.BeepManager
import com.journeyapps.barcodescanner.BarcodeCallback
import com.journeyapps.barcodescanner.BarcodeResult
import com.journeyapps.barcodescanner.CaptureManager
import com.journeyapps.barcodescanner.DefaultDecoderFactory
import kotlinx.serialization.*
import kotlinx.serialization.json.*


@Serializable
data class CurrentWheather(
@SerialName("temperature") val temperature : Double,
@SerialName("windspeed") val windspeed : Double,
@SerialName("winddirection") val winddirection : Double,
@SerialName("weathercode") val weathercode : Int,
@SerialName("time") val time : String
)

@Serializable
data class Weather(
@SerialName("latitude") val latitude : Double,
@SerialName("longitude") val longitude : Double,
@SerialName("generationtime_ms") val generationtime_ms : Double,
@SerialName("utc_offset_seconds") val utc_offset_seconds : Int,
@SerialName("timezone") val timezone : String,
@SerialName("timezone_abbreviation") val timezone_abbreviation : String,
@SerialName("elevation") val elevation :Double,
@SerialName("current_weather") val current_weather : CurrentWheather
)




class MainActivity2 : AppCompatActivity() {

    private val text = ""

    private val callback: BarcodeCallback = object : BarcodeCallback {
        override fun barcodeResult(result: BarcodeResult) {
            


            if (result != null) {
                Log.e("aaa", result.text) // QR/Barcode result
                finish()
            }
        }

        override fun possibleResultPoints(resultPoints: List<ResultPoint>) {}
    }


    private lateinit var beepManager: BeepManager

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main2)


        var barcodeView = findViewById<com.journeyapps.barcodescanner.DecoratedBarcodeView>(R.id.decorate_barcode_view)

        barcodeView.cameraSettings.requestedCameraId = 1

        val formats = listOf(BarcodeFormat.QR_CODE)
        barcodeView.barcodeView.decoderFactory = DefaultDecoderFactory(formats)

        // コールバック設定
        barcodeView.decodeContinuous(callback)


        beepManager = BeepManager(this).apply {
            isBeepEnabled = false
        }


    }

    override fun onResume() {
        super.onResume()
        var barcodeView = findViewById<com.journeyapps.barcodescanner.DecoratedBarcodeView>(R.id.decorate_barcode_view)
        barcodeView.resume()
    }

    override fun onPause() {
       super.onPause()
       var barcodeView = findViewById<com.journeyapps.barcodescanner.DecoratedBarcodeView>(R.id.decorate_barcode_view)
       barcodeView.pause()
    }

    override fun onDestroy() {
        super.onDestroy()
        var barcodeView = findViewById<com.journeyapps.barcodescanner.DecoratedBarcodeView>(R.id.decorate_barcode_view)
        barcodeView.pause()
    }
}

(2)レイアウト用画面

custom_qr_code_scanner.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

// ★絶対にここの位置にこのまま実装
<com.journeyapps.barcodescanner.BarcodeView
android:id="@+id/zxing_barcode_surface"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

// ★絶対にここの位置にこのまま実装
<com.journeyapps.barcodescanner.ViewfinderView
android:id="@+id/zxing_viewfinder_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:zxing_possible_result_points="@color/zxing_transparent"
app:zxing_viewfinder_laser_visibility="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

<ImageView
android:layout_width="78dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="32dp"
android:scaleType="centerInside"
android:src="@drawable/polygon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:layout_width="78dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="84dp"
android:scaleType="centerInside"
android:src="@drawable/qrimage"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/setQr"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:lineSpacingExtra="5sp"
android:text="@string/setQR"
android:layout_marginTop="600dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

注意点

レイアウト画面(2)では、一番上に
<com.journeyapps.barcodescanner.BarcodeView
android:id="@+id/zxing_barcode_surface"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>>

<com.journeyapps.barcodescanner.ViewfinderView
android:id="@+id/zxing_viewfinder_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:zxing_possible_result_points="@color/zxing_transparent"
app:zxing_viewfinder_laser_visibility="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

をこのまま記載しないとダメ

これより上に書いたパーツや要素はレイアウト画面に反映されない

少しでも変更加えると、読み取り画面でなかったりする

コメント

タイトルとURLをコピーしました