카탈로그 브라우저 만들기

TV에서 실행되는 미디어 앱은 사용자가 콘텐츠를 둘러볼 수 있도록 해야 함 항목을 선택하고 콘텐츠를 재생하기 시작합니다. 콘텐츠 탐색 사용자 경험은 단순하고 직관적이며 시각적으로 이루어져야 합니다. 몰입도를 높일 수 있습니다.

미디어 카탈로그 브라우저는 여러 섹션으로 구성되는 경향이 있으며 각 섹션은 미디어 콘텐츠 목록이 있습니다. 미디어 카탈로그 섹션의 예는 다음과 같습니다. 재생목록, 추천 콘텐츠, 추천 카테고리입니다.

그림 1. 일반적인 카탈로그 화면 사용자가 동영상 카탈로그 데이터를 둘러볼 수 있습니다.

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 프로그램의 신작 에피소드나 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)
    }
  }
}
이전
개요
다음
세부정보 화면 빌드