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 uygulamalar için içeriğe göz atma deneyimi basit, sezgisel ve görsel açıdan hoş ve ilgi çekici olmalıdır.

Bu bölümde, uygulamanızın medya kataloğundaki müziklere veya videolara göz atmak için kullanıcı arayüzünü uygulamak amacıyla TV için Compose tarafından sağlanan işlevlerin nasıl kullanılacağı açıklanmaktadır.

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

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

Katalog için composable işlev oluşturma

Ekranda görünen her şey, TV için Oluştur'da composable bir işlev olarak uygulanır. Medya kataloğu tarayıcısı için composable işlevi tanımlamakla 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çerik listesi.
  • Bölüm 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 uzunlukta bir liste) görüntüleyen bir bileşen olan geç listeler sunar. Bölümleri dikey olarak yerleştirmek için TvLazyColumn yöntemini çağıracaksınız. TvLazyColumn, öğe içeriklerini tanımlamak için bir DSL seçeneği sunan bir TvLazyListScope.() -> Unit engellemesi sağlar. Aşağıdaki örnekte her bölüm, bölümler arasında 16 dp'lik boşlukla dikey bir listeye yerleştirilmiş.

@Composable
fun CatalogBrowser(
   featuredContentList: List<Movie>,
   sectionList: List<Section>,
   modifier: Modifier = Modifier,
   onItemSelected: (Movie) -> Unit = {},
) {
  TvLazyColumn(
    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 TvLazyRow, TvLazyColumn öğesinin bu yatay sürümünün benzer şekilde, sağlanan DSL'yi çağırarak TvLazyListScope.() -> 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,
  )
  TvLazyRow(
     modifier = modifier,
     horizontalArrangement = Arrangement.spacedBy(8.dp)
  ) {
    items(section.movieList){ movie ->
    MovieCard(
         movie = movie,
         onClick = { onItemSelected(movie) }
       )
    }
  }
}

Section composable'da Text bileşeni kullanılır. Materyal Tasarım'da tanımlanan metin ve diğer bileşenler, tv-malzeme kitaplığında sunulur . Metinlerin stilini, Materyal Tasarım'da tanımlandığı gibi MaterialTheme nesnesine bakarak değiştirebilirsiniz. Bu nesne, tv-material kitaplığı tarafından da sağlanır. MovieCard, her bir film verilerinin katalogda nasıl oluşturulduğunu aşağıdaki snippet olarak tanımlar. Card da tv-malzeme kitaplığının bir parçasıdır.

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

Daha önce açıklanan örnekte tüm filmler eşit şekilde görüntülenir. Aynı alan kullanılır, aralarında görsel bir fark yoktur. Bunlardan bazılarını Carousel ile vurgulayabilirsiniz.

Bant, bilgileri kayabilen, şeffaflaştırabilen veya görünüme taşıyabilen bir öğe grubunda görüntüler. Bileşeni, yeni çıkan filmler veya TV programlarının yeni bölümleri gibi öne çıkan içerikleri vurgulamak için kullanırsınız.

Carousel, Bant'ın en azından sahip olduğu öğe sayısını ve her bir öğenin nasıl çizileceğini belirtmenizi bekler. İlki, itemCount ile belirtilebilir. İkincisi, lambda olarak iletilebilir. Görüntülenen öğ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 geçitsel liste öğ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)
    }
  }
}