Compose QR코드 스캐너

이번 포스팅에서는 Compose에서 QRCode Scanner 사용 방법에 대하여 알아보겠습니다.

1) 라이브러리 추가

// Code Scanner - https://github.com/yuriy-budiyev/code-scanner
implementation 'com.github.yuriy-budiyev:code-scanner:2.3.2'

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }
        maven { url 'https://jitpack.io' }
    }
}

추가로 카메라를 사용해야 하므로 카메라 권한을 추가해 줍니다.

<uses-permission android:name="android.permission.CAMERA"/>

2) 카메라 권한 요청

Compose에서 퍼미션 권한 요청을 하는 방법입니다.

val context = LocalContext.current
var hasCameraPermission by remember {
    mutableStateOf(
        ContextCompat.checkSelfPermission(context, Manifest.permission.CAMERA)
                == PackageManager.PERMISSION_GRANTED
    )
}
val launcher = rememberLauncherForActivityResult(
    contract = ActivityResultContracts.RequestPermission(),
    onResult = { granted ->
        hasCameraPermission = granted
    }
)
LaunchedEffect(key1 = true) {
    launcher.launch(Manifest.permission.CAMERA)
}

rememberLauncherForActivityResult를 이용하여 특정 Result를 받아오는 동작을 수행할 수 있습니다.
즉, registerForActivityResult와 동일한 역할을 수행할 수 있습니다.

contract에 어떤 것에 대한 요청을 할 것인지를 넣어줍니다.
이번의 경우 퍼미션 요청을 진행할 것이기 때문에 ActivityResultContracts.RequestPermission()를 넣어줍니다.

그리고 요청에 대한 결과를 받아서 처리할 로직을 넣어줍니다.

그다음 만든 변수에 launch()를 통해 실행을 합니다.

3) QR코드 스캐너 추가

QR 코드 스캐너의 경우 아쉽게도 아직까지는 Compose를 지원하며 정리가 되어 있는 라이브러리는 찾지 못하였습니다.

위에서 추가한 라이브러리 역시 Copose 용은 아니고 기존 xml 방식에서 사용하던 라이브러리입니다.

이러한 경우를 위해서 Compose에는 AndroidView라는 Composable을 제공합니다.

@Composable
@UiComposable
fun <T : View> AndroidView(
    factory: (Context) -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = NoOpUpdate
)

구조는 위와 같으며 기존에 사용했던 View를 Compose에서 사용이 가능하게 해줍니다.

var code by remember {
    mutableStateOf("test")
}
if (hasCameraPermission) {
    AndroidView(
        factory = {
            val scannerView = CodeScannerView(it)
            val scanner = CodeScanner(it, scannerView).apply {
              camera = CodeScanner.CAMERA_BACK
              formats = listOf(BarcodeFormat.QR_CODE)
              autoFocusMode = AutoFocusMode.SAFE
              scanMode = ScanMode.SINGLE
              isAutoFocusEnabled = true
              isFlashEnabled = false
              decodeCallback = DecodeCallback { result ->
                  code = "Scan result: ${result.text}"
              }
              errorCallback = ErrorCallback { e ->
                  code = "Camera initialization error: ${e.message}"
              }
          }

            scanner.startPreview()
            scannerView
        },
        modifier = Modifier
    )
}

AndroidView 위의 구조에서 봤듯이 factory 블록 안에 context가 있고 View를 반환하게 되어있습니다.

이번 예제에서 사용할 View는 CodeScannerView입니다.

CodeScannerView는 CodeScanner로 세팅 및 프리뷰 설정이 가능합니다.

CodeScanner의 세팅은 다음과 같습니다.

• camear : CAMERA_BACK / CAMERA_FRONT 중 선택합니다.
• formats : 스캐너를 통해 인식하고 싶은 포멧을 설정합니다. 이번 예제에서는 QR코드만 필요하여 BarcodeForamt.QR_CODE를 이용하였습니다.
  필요에 따라 리스트를 추가하거나 CodeScanner.ALL_FORMATS를 통해 모든 종류의 스캔을 설정할 수 있습니다.
• autoFocusMode : 자동 포커스 설정으로 SAFE와 CONTINUOUS 중 선택합니다.
• scanMode는 SINGLE / CONTINUOUS / PREVIEW 중 선택합니다.
  • SINGLE : 한번 스캔이 이루어지면 스캐너가 정지됩니다. 다시 동작을 하기 위해선 startPreview를 해주어야 합니다.
  • CONTINUOUS : 스캔이 이루어진 후에도 계속해서 스캐너가 작동됩니다.
  • PREVIEW : 카메라 프리뷰만 표시되고 스캔 작용을 하지 않습니다.
• isAutoFocusEnabled : 자동 포커스 활성화 여부입니다.
• isFlashEnabled : 플래시 활성화 여부입니다.
• decodeCallback : 스캔 결과를 반환합니다.
• errorCallback : 스캔 중 오류 상황을 반환합니다.

마지막으로 AndroidView 역시 Modifier를 적용할 수 있습니다.

결과 화면은 따로 표시하지 않고 위의 QR코드를 찍어서 내용을 확인해보시기 바랍니다

참고로 QR코드 생성은 링크 남겨두겠습니다.

qr 생성기