PetnowAndroid SDK
UI 커스터마이징
CameraView의 가이드 UI와 트래킹 표시를 커스터마이징하는 방법.
이 가이드를 시작하기 전에 기본 사용법을 완료하세요.
개요
CameraView는 프리뷰와 기본 트래킹 UI를 그립니다. 그 위에 다음을 커스터마이징할 수 있습니다:
- 주변 UI 직접 구성 — 상태/진행률 텍스트, 버튼 등은
CameraView바깥에 일반 View/Compose로 배치하고 리스너·state프로퍼티로 구동 - 플로팅 가이드 — 트래커를 따라 움직이는 가이드 뷰 주입 (
setFloatingGuide) - 트래킹 표시 토글 — 기본 코 트래킹 UI 표시 여부 (
isDogNoseTrackingUiEnabled)
기본 트래킹 UI 위에 커스텀 오버레이 레이아웃을 주입하는 방식(provideCustomOverlayLayout 등)은 PetnowCameraFragment 전용입니다. 해당 방식은 Fragment 방식(레거시)을 참고하세요. 트래킹 UI까지 100% 직접 그리려면 완전 커스텀 UI를 사용하세요.
주변 UI 직접 구성
CameraView는 프리뷰 영역만 담당하므로, 상태 텍스트·진행률 바·버튼 등은 그 위/주변에 일반 레이아웃으로 배치하고 탐지 콜백으로 갱신하면 됩니다.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<io.petnow.ui.CameraView
android:id="@+id/camera_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- CameraView 위에 얹는 커스텀 UI -->
<TextView
android:id="@+id/status_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="48dp"
android:textColor="#FFFFFF" />
<ProgressBar
android:id="@+id/detection_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="bottom" />
</FrameLayout>controller.setDetectionListenerV2(object : PetnowCameraDetectionListenerV2 {
override fun onDetectionStatus(primaryDetectionStatus: DetectionStatus) {
binding.statusText.text = when (primaryDetectionStatus) {
DetectionStatus.NoObject -> "Align your pet's face in the frame"
DetectionStatus.Detected -> "Nose print scans are coming through!"
is DetectionStatus.Failed -> when (primaryDetectionStatus.reason) {
DetectionFailureReason.TooClose -> "It's too close! Move back a bit."
DetectionFailureReason.TooFarAway -> "It's too far! Move closer."
DetectionFailureReason.TooDark -> "It's too dark! Try a brighter place."
else -> "Adjust your pet's pose"
}
else -> ""
}
}
override fun onDetectionProgress(progress: Int) {
binding.detectionProgress.progress = progress
}
override fun onDetectionFinished(result: CameraResult) { /* ... */ }
})플로팅 가이드 (트래커를 따라가는 가이드)
트래킹 영역을 따라 움직이는 가이드 뷰를 setFloatingGuide()로 주입합니다. 좌표·위치 계산은 CameraView가 자동으로 처리합니다.
val guide = layoutInflater.inflate(R.layout.layout_floating_guide, cameraView, false)
cameraView.setFloatingGuide(guide)
// 표시/숨김이나 텍스트는 탐지 상태에 맞춰 직접 제어
val message = guide.findViewById<TextView>(R.id.text_guide_message)
message.text = "코를 정면으로 비춰주세요"가이드 뷰는 기본적으로 WRAP_CONTENT로 배치됩니다. 표시 여부나 내용은 탐지 상태(onDetectionStatus 또는 state 프로퍼티)에 맞춰 앱에서 직접 갱신하세요. 제거하려면 setFloatingGuide(null)을 호출합니다.
트래킹 UI 표시 토글
기본 코 트래킹 표시를 끄려면 isDogNoseTrackingUiEnabled를 false로 설정합니다(직접 트래킹 UI를 그릴 때 유용).
cameraView.isDogNoseTrackingUiEnabled = false다음 단계
UI 커스터마이징 방법을 익혔다면 다음 문서를 참고하세요:
- 완전 커스텀 UI - 트래킹 UI까지 100% 직접 구현
- 사운드 가이드 - 사운드 재생 설정
- Fragment 방식 (레거시) - Fragment 오버레이 레이아웃 주입 방식