Android TV에서 Jetpack Compose 사용

Android TV를 빌드하는 최신 접근 방식인 TV용 Compose 사용자 인터페이스입니다. TV용 Compose는 아름답고 기능적인 앱 UI를 훨씬 더 쉽게 빌드할 수 있습니다. 더 쉽게 만들 수 있습니다

TV용 Compose를 사용할 때 얻을 수 있는 구체적인 이점은 다음과 같습니다.

  • 유연성: Compose를 사용하여 모든 유형의 UI를 만들 수 있습니다. 복잡한 애니메이션에 적용할 수 있습니다. 구성요소는 즉시 사용할 수 있지만 앱의 요구사항에 맞게 맞춤설정하고 스타일을 지정할 수 있습니다
  • 간소화 및 가속화된 개발: Compose는 개발자가 더욱 효율적으로 앱을 빌드할 수 있게 해주는 더 적은 코드로
  • 직관적: Compose는 선언적 문법을 사용하므로 코드를 디버그, 이해, 검토할 수 있게 됩니다.

Jetpack Compose 도구 키트를 사용하는 데 익숙하지 않다면 Compose 개발자 과정을 확인하세요. 여러 항목 모바일 Compose의 개발 원칙이 TV에도 적용됩니다. 자세한 내용은 이유 Compose를 사용하여 추가 기능 사용 선언적 UI 프레임워크의 일반적인 이점에 관한 정보를 제공합니다. 배우기 위해 자세한 내용은 코드 작성을 위한 GitHub의 TV 샘플 저장소

호환성

TV용 Compose는 Android 5.0 (API 수준 21) 이상을 사용하는 Android TV에서 작동합니다. TV용 Compose 버전 1.0을 사용하려면 버전 1.3.0이 필요합니다. androidx.compose 라이브러리 Kotlin 1.7.10을 지원합니다.

설정

Android TV에서 Jetpack Compose를 사용하는 것은 다른 Android 프로젝트에도 적용됩니다. 주요 차이점은 TV용 Compose는 TV에 최적화된 구성요소를 제공하고 만들기 쉽도록 하는 라이브러리를 추가합니다. TV에 맞춤화된 사용자 인터페이스를 제공합니다. 일부 경우 이러한 구성요소는 동일한 이름을 TV 외 광고(예: androidx.tv.material3.Button 드림 및 androidx.compose.material3.Button

Jetpack Compose 도구 키트 종속 항목

TV용 Compose를 사용하려면 Jetpack Compose 도구 키트를 포함하세요. 다음과 같이 앱의 build.gradle 파일에 종속 항목을 추가합니다.

Kotlin

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
   implementation(composeBom)

   // General compose dependencies.
   implementation("androidx.activity:activity-compose:1.9.0")

   implementation("androidx.compose.ui:ui-tooling-preview")
   debugImplementation("androidx.compose.ui:ui-tooling")

   // Compose for TV dependencies.
   implementation("androidx.tv:tv-material:1.0.0-rc01")
}

Groovy

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
   implementation composeBom

   // General compose dependencies.
   implementation 'androidx.activity:activity-compose:1.9.0'

   implementation 'androidx.compose.ui:ui-tooling-preview'
   debugImplementation 'androidx.compose.ui:ui-tooling'

   // Compose for TV dependencies.
   implementation 'androidx.tv:tv-material:1.0.0-rc01'
}

차이점

TV 소재 구성요소는 명확한 초점으로 거실용으로 디자인되었습니다. 표시기 및 원격 친화적인 입력 동작을 참조하세요. 자세히 알아보려면 이러한 특정 구성요소를 사용하려면 TV UI 디자인 가이드를 확인하세요.

그림 1. TV 머티리얼 라이브러리의 샘플 구성요소

가능한 경우 TV 버전의 API를 사용하여 살펴보겠습니다

기술적으로는 Compose Material의 모바일 버전을 사용할 수 있지만 Android TV의 고유한 상호작용 스타일에는 최적화되지 않았습니다. 포함 또한, Compose Material을 TV용 Compose로 인해 예기치 않은 동작이 발생할 수 있습니다. 예를 들어 각 라이브러리에는 자체 MaterialTheme 객체가 있으므로 두 버전을 모두 사용하면 색상, 서체 또는 도형이 일관되지 않습니다.

다음 표에는 TV와 모바일:

TV 종속 항목
(androidx.tv.*) 		비교 모바일 종속 항목
(androidx.compose.*)
androidx.tv:tv-material 오른쪽 대신 androidx.compose.material3:material3

추가 리소스

  • TV 디자인 가이드
    다음을 사용하여 사용자 인터페이스를 빌드하기 위한 전용 TV 구성요소 개요: 관련 개발자 리소스 링크를 참조하세요.

  • TV 머티리얼 카탈로그 샘플
    구현 방법을 보여주는 카탈로그 앱 TV용 Compose를 사용한 Material Design 원칙

  • JetStream 샘플
    TV Compose 사용 방법을 보여주는 미디어 스트리밍 앱 일반적인 머티리얼 앱과 실제 아키텍처에 관해 이야기해 보겠습니다

  • TV용 Compose 소개
    이 Codelab에서는 카탈로그 브라우저를 사용하여 동영상 플레이어 앱을 빌드하는 방법을 단계별로 설명합니다. 세부정보 화면이 있습니다.

추가 자료

이 가이드에서 TV에 최적화된 우수한 환경을 빌드하는 방법을 알아보세요.

다음
카탈로그 브라우저 만들기