Katalog tarayıcı oluşturma

TV'de çalışan bir medya uygulamasının, kullanıcıların sunduğu içeriklere göz atmasına, seçim yapmasına ve içeriği oynatmaya başlamasına izin vermesi gerekir. Bu tür uygulamalarda içeriklere göz atma deneyimi basit, sezgisel, görsel açıdan hoş ve ilgi çekici olmalıdır.

Medya kataloğu tarayıcısı genellikle birkaç bölümden oluşur ve her bölümde medya içeriği listesi bulunur. Medya kataloğundaki bölümlere örnek olarak şunlar verilebilir: oynatma listeleri, öne çıkarılan içerikler, önerilen kategoriler.

Şekil 1. Tipik bir katalog ekranı. Kullanıcılar video katalog verilerine göz atabilir.

Uygulamanızın medya kataloğundaki müziklere veya videolara göz atabileceğiniz bir kullanıcı arayüzü uygulamak için TV için Oluştur'un sağladığı işlevleri kullanın.

Katalog için composable işlevi oluşturma

Ekranda görünen her şey, TV için Oluştur'da birleştirilebilir işlev olarak uygulanır. Medya kataloğu tarayıcısı için bir composable işlev tanımlayarak başlayın:

@Composable
fun CatalogBrowser(
   featuredContentList: List<Movie>,
   sectionList: List<Section>,
   modifier: Modifier = Modifier,
   onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}

CatalogBrowser, medya kataloğu tarayıcınızı uygulayan composable işlevdir. İşlev aşağıdaki bağımsız değişkenleri alır:

• Öne çıkan içeriklerin listesi.
• Bölümlerin listesi.
• Değiştirici nesne.
• Ekran geçişini tetikleyen bir geri çağırma işlevi.

Kullanıcı arayüzü öğelerini ayarlama

TV için Oluştur, çok sayıda öğe (veya bilinmeyen uzunluktaki bir liste) görüntülemek için kullanılan bir bileşen olan tembel listeler sunar. Bölümleri dikey olarak yerleştirmek için LazyColumn işlevini çağırın. LazyColumn, öğe içeriklerini tanımlamak için DSL sunan bir LazyListScope.() -> Unit bloku sağlar. Aşağıdaki örnekte, her bölüm 16 dp boşluk bırakılarak dikey bir listeye yerleştirilmiştir:

@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)
    }
  }
}

Örnekte, Section composable işlevi bölümlerin nasıl görüntüleneceğini tanımlar. Aşağıdaki işlevde LazyRow, LazyColumn öğesinin bu yatay sürümünün benzer şekilde, sağlanan DSL'yi çağırarak LazyListScope.() -> Unit bloku içeren yatay bir liste tanımlamak için nasıl kullanıldığını gösterir:

@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 bileşeninde Text bileşeni kullanılır. Material Design'da tanımlanan metin ve diğer bileşenler tv-material kitaplığında sunulur . MaterialTheme nesnesine başvurarak metinlerin Materyal Tasarım'da tanımlandığı şekildeki stilini değiştirebilirsiniz. Bu nesne, tv-material kitaplığı tarafından da sağlanır. Card, tv-material kitaplığının bir parçasıdır. MovieCard, her film verisinin katalogda nasıl oluşturulacağını tanımlar. Bu tanımlama aşağıdaki snippet'te açıklanmıştır:

@Composable
fun MovieCard(
   movie: Movie,
   modifier: Modifier = Modifier,
   onClick: () -> Unit = {}
) {
   Card(modifier = modifier, onClick = onClick){
    AsyncImage(
       model = movie.thumbnailUrl,
       contentDescription = movie.title,
     )
   }
}

Not: AsyncImage, internetten resim yükleyen bir bileşendir. Ayrıntılar için Resim Yükleme bölümüne bakın.

Öne çıkan içeriği vurgulama

Daha önce açıklanan örnekte tüm filmler eşit olarak gösterilmektedir. Aynı alana sahiptirler ve aralarında görsel bir fark yoktur. Bunlardan bazılarını Carousel ile vurgulayabilirsiniz.

Bant, bilgileri kaydırılabilir, soluklaştırılabilir veya görüntüye taşınabilir bir öğe grubunda gösterir. Bu bileşeni, yeni yayınlanan filmler veya TV programlarının yeni bölümleri gibi öne çıkarılan içerikleri vurgulamak için kullanırsınız.

Carousel, en azından banttaki öğelerin sayısını ve her öğenin nasıl çizileceğini belirtmenizi bekler. İlki itemCount ile belirtilebilir. İkincisi, lambda olarak iletilebilir. Gösterilen öğenin dizin numarası lambda'ya verilir. Görüntülenen öğeyi verilen dizin değeriyle belirleyebilirsiniz:

@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 gibi bir üşengeç listenin öğesi olabilir. Aşağıdaki snippet tüm Section composable'ın üzerinde FeaturedCarousel composable'ı gösteriyor:

@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)
    }
  }
}