TV에서 실행되는 미디어 앱은 사용자가 콘텐츠를 둘러볼 수 있도록 해야 함 콘텐츠를 재생하기 시작합니다. 콘텐츠 탐색 사용자 경험은 단순하고 직관적이며 시각적으로 이루어져야 합니다. 몰입도를 높일 수 있습니다.
미디어 카탈로그 브라우저는 여러 섹션으로 구성되는 경향이 있으며 각 섹션은 미디어 콘텐츠 목록이 있습니다. 미디어 카탈로그 섹션의 예는 다음과 같습니다. 재생목록, 추천 콘텐츠, 추천 카테고리입니다.
![](https://developer.android.com/static/training/tv/images/compose-catalogbrowser-example.png?authuser=9&hl=ko)
TV용 Compose에서 제공하는 기능을 사용하여 사용자 구현 앱 미디어 카탈로그에서 음악이나 동영상을 탐색하기 위한 인터페이스입니다.
카탈로그용 구성 가능한 함수 만들기
디스플레이에 표시되는 모든 것은 TV용 Compose 먼저 컴포저블 정의 함수를 호출합니다.
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
는 미디어 카탈로그를 구현하는 구성 가능한 함수입니다.
있습니다. 이 함수는 다음 인수를 사용합니다.
- 추천 콘텐츠 목록입니다.
- 섹션 목록입니다.
- 수정자 객체입니다.
- 화면 전환을 트리거하는 콜백 함수.
UI 요소 설정
TV용 Compose는 큰 메시지를 표시하는 구성요소인 지연 목록을 제공합니다.
또는 길이를 알 수 없는 목록). 전화걸기
LazyColumn
드림
섹션을 세로로 배치합니다. LazyColumn
는
LazyListScope.() -> Unit
항목 콘텐츠를 정의하는 DSL을 제공합니다. 다음 예에서
각 섹션은 섹션 사이에 16dp 간격이 있는 세로 목록에 배치됩니다.
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
LazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}
이 예에서 구성 가능한 Section
함수는 섹션 표시 방법을 정의합니다.
다음 함수에서 LazyRow
는 이 함수를
LazyColumn
의 가로 버전은 다음과 유사하게 사용됩니다.
다음을 호출하여 LazyListScope.() -> Unit
블록이 있는 가로 목록을 정의합니다.
제공된 DSL:
@Composable
fun Section(
section: Section,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
Text(
text = section.title,
style = MaterialTheme.typography.headlineSmall,
)
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(section.movieList){ movie ->
MovieCard(
movie = movie,
onClick = { onItemSelected(movie) }
)
}
}
}
Section
컴포저블에서는 Text
구성요소가 사용됩니다.
텍스트 및 기타 구성요소
Material Design에 정의된 모든 항목은 tv-material 라이브러리에서 제공됩니다 . 다음과 같은 작업을 할 수 있습니다.
텍스트 변경 머티리얼 디자인에 정의된 스타일인
MaterialTheme
객체
이 객체는 tv-material 라이브러리에서도 제공됩니다.
Card
는 tv-material 라이브러리의 일부입니다.
MovieCard
는 정의된 카탈로그에서 각 영화 데이터가 렌더링되는 방식을 정의합니다.
다음 스니펫으로 교체합니다.
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
추천 콘텐츠 강조표시
앞에서 설명한 예에서는 모든 영화가 동일하게 표시됩니다.
공간은 동일하며 시각적으로 차이가 없습니다.
Carousel
로 일부를 강조 표시할 수 있습니다.
캐러셀은 항목 모음으로 정보를 표시하며, 항목 모음은 슬라이드하거나 페이드 아웃하거나 볼 수 있습니다. 구성요소를 사용하여 TV 프로그램의 새 에피소드
Carousel
드림
최소한 캐러셀에 있는 항목의 수와
각 항목을 그립니다. 첫 번째는 itemCount
로 지정할 수 있습니다. 두 번째 항목
람다로 전달할 수 있습니다. 표시된 항목의 색인 번호는
람다에 지정됩니다. 표시되는 항목은
주어진 색인 값:
@Composable
function FeaturedCarousel(
featuredContentList: List<Movie>,
modifier: Modifier = Modifier,
) {
Carousel(
itemCount = featuredContentList.size,
modifier = modifier,
) { index ->
val content = featuredContentList[index]
Box {
AsyncImage(
model = content.backgroundImageUrl,
contentDescription = content.description,
placeholder = painterResource(
id = R.drawable.placeholder
),
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
Text(text = content.title)
}
}
}
Carousel
는 TvLazyColumn
와 같은 지연 목록의 항목이 될 수 있습니다.
다음 스니펫은FeaturedCarousel
모든 Section
컴포저블이 포함됩니다.
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
TvLazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
item {
FeaturedCarousel(featuredContentList)
}
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}