[안드로이드/Android] QR코드 리더기 만들기

ZXing 라이브러리를 사용하면 손쉽게 QRCode Reader를 구현할 수 있습니다. 이번 포스팅은 기본적인 라이브러리 사용 방법과 뷰 커스텀을 중점적으로 다루겠습니다.

설정

프로젝트의 타겟 버전에 따라 조금 차이가 있습니다.

build.gradle ( App 레벨 ) 설정 - SDK 19+ 

zxing-android-embedded는 QRCode와 관련된 내용들을 사용하기 위해 추가하며, appcompat은 최소 23이상이 필수 입니다.

dependencies {
  
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.journeyapps:zxing-android-embedded:3.6.0'

}

※buildToolsVersion을 사용한다면 27.0.3 이상 버전을 이용해야합니다, 그렇지 않으면 컴파일 에러가 발생할 수 있습니다.

build.gradle ( project 레벨 ) 설정

repositories {
    jcenter()
}

build.gradle ( App 레벨 ) 설정 - SDK 14+ ( 19버전 미만을 타겟으로 하는 앱은 아래와 같은 설정을 해야합니다. )

appcompat는 최소 23이상 버전이 필수 입니다.

dependencies {
    implementation 'com.google.zxing:core:3.3.0'
    implementation ('com.journeyapps:zxing-android-embedded:3.6.0') { transitive = false }
    implementation 'com.android.support:appcompat-v7:27.1.1'
}

※buildToolsVersion을 사용한다면 27.0.3 이상 버전을 이용해야합니다, 그렇지 않으면 컴파일 에러가 발생할 수 있습니다.

build.gradle ( project 레벨 ) 설정

repositories {
    jcenter()
}

AndroidManifest 설정

AndroidManifest.xml에 하드웨어 가속 옵션을 true로 설정합니다. 하드웨어 가속은 텍스처뷰를 사용하기 위해선 추가하는 옵션으로

그래픽 처리를 할때 GPU를 사용하여 그리는 방식입니다.

<application
    .....
    android:hardwareAccelerated="true"

바코드 스캔

가장 간단한 방법으로 바코드를 스캔하는 소스 입니다. onCreate부분이나 버튼 클릭이벤트등의 아래 코드를 넣으면 스캔이 시작됩니다.

IntentIntegrator intentIntegrator = new IntentIntegrator(this);
intentIntegrator.setBeepEnabled(false);//바코드 인식시 소리
intentIntegrator.initiateScan();

setBeepEnabled를 true로 설정할경우 바코드 인식시 '삑' 하는 소리가 납니다.

데이터 추출

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);

if(result != null) {

if(result.getContents() == null) {

Toast.makeText(this, "Cancelled", Toast.LENGTH_LONG).show();

} else {

Toast.makeText(this, "Scanned: " + result.getContents(), Toast.LENGTH_LONG).show();

}

} else {

super.onActivityResult(requestCode, resultCode, data);

}

}

위처럼 간단한 코드로 qr코드를 인식하고, 그 결과값을 추출할 수 있습니다.

결과화면

커스텀

스캐너 커스텀하기

위 결과화면의 스캐너 화면의 크기와 배치를 원하는데로 할 수 있습니다.

xml

스캐너전용(?) 엑티비티 xml 파일에 'DecoratedBarcodeView'를 추가 속성들을 설정합니다. 

<com.journeyapps.barcodescanner.DecoratedBarcodeView
    android:id="@+id/db_qr"
    android:layout_width="300dp"
    android:layout_height="300dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

java

qr코드를 인식하는 뷰가 띄워져 있을때는 디바이스의 라이트를 코드로 직접 조절해야합니다. 

DecorateBarcodeView의 .setTorchOff : 라이트 끄기 , .setTorchOn : 라이트 켜기 

public class QReaderActivity extends AppCompatActivity implements  DecoratedBarcodeView.TorchListener {

    private CaptureManager manager;
    private boolean isFlashOn = false;// 플래시가 켜져 있는지


    private Button btFlash;
    private DecoratedBarcodeView barcodeView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_qreader);

        barcodeView = findViewById(R.id.db_qr);

        manager = new CaptureManager(this,barcodeView);
        manager.initializeFromIntent(getIntent(),savedInstanceState);
        manager.decode();

        btFlash = findViewById(R.id.bt_flash);
        btFlash.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isFlashOn){
                    barcodeView.setTorchOff();
                }else{
                    barcodeView.setTorchOn();
                }
            }
        });
    }

    @Override
    public void onTorchOn() {

        btFlash.setText("플래시끄기");
        isFlashOn = true;
    }

    @Override
    public void onTorchOff() {
        btFlash.setText("플래시켜기");
        isFlashOn = false;
    }
    @Override
    protected void onResume() {
        super.onResume();
        manager.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        manager.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        manager.onDestroy();
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        manager.onSaveInstanceState(outState);
    }

}

커스텀뷰로 바코드 읽기

아래 코드를 실행시키면 커스텀된 뷰의 qr코드 리더기가 실행됩니다.

IntentIntegrator intentIntegrator = new IntentIntegrator(this);
intentIntegrator.setBeepEnabled(false);//바코드 인식시 소리
intentIntegrator.setCaptureActivity(QReaderActivity.class);
intentIntegrator.initiateScan();

QR코드 리더기 상세 커스텀 

DecorateBarcodeView의 'zxing_scanner_layout' 옵션을 사용하면 상세 커스텀이 가능합니다.

각종 서비스에서 운영중인(네이버, 카카오등) qr코드 리더기처럼 QR코드를 인식하는 부분도 원하는데로 커스텀할 수 있습니다. (바코드 뷰 가운데 빨간색 레이저등의 기본 레이아웃)

xml

view_qrcode.xml을 생성해 아래와 같이 작성합니다. 'BarcodeView'의 rect height, width는 실질적으로 바코드 인식에 사용되는 영역입니다. 'ViewfinderView'는 카메라의 뷰파인더 ( 사진을 찍기 위해 혹은 초점을 맞추기 위해 들여다보는 )와 같은 역할이며 기본적으로 BarcodeView보다 커야합니다.

<?xml version="1.0" encoding="utf-8"?>
<merge 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">

    <com.journeyapps.barcodescanner.BarcodeView
        android:id="@+id/zxing_barcode_surface"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:zxing_framing_rect_height="100dp"
        app:zxing_framing_rect_width="250dp" />

    <com.journeyapps.barcodescanner.ViewfinderView
        android:id="@+id/zxing_viewfinder_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:zxing_possible_result_points="@color/zxing_custom_possible_result_points"
        app:zxing_result_view="@color/white"
        app:zxing_viewfinder_laser="@color/zxing_custom_viewfinder_laser"
        app:zxing_viewfinder_mask="@color/zxing_custom_viewfinder_mask" />

</merge>

카메라의 뷰파인더( 사진을 찍기 위해 혹은 초점을 맞추기 위해 들여다 보는 기구 )와 같은 역할 

zxing_viewfinder_mask : 바코드를 인식하는 부분이 아닌 카메라뷰 부분의 배경색

zxing_viewfinder_laser : 바코드를 인식하는 부분의 가운데 레이저(?) 색

zxing_scanner_layout옵션을 추가합니다.

<com.journeyapps.barcodescanner.DecoratedBarcodeView
    android:id="@+id/db_qr"
    android:layout_width="300dp"
    android:layout_height="300dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:zxing_scanner_layout="@layout/view_qrcode"
    app:layout_constraintTop_toTopOf="parent" />

※이 포스팅은 쿠팡 파트너스 활동의 인활으로, 이에 따른 일정액의 수수료를 제공받고 있습니다.

참조 링크