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.

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 oynatma listeleri, öne çıkan içerik, önerilen kategoriler verilebilir.

Uygulamanızın medya kataloğundaki müziklere veya videolara göz atmak için bir kullanıcı arayüzü uygulamak üzere TV için Compose tarafından sağlanan işlevleri kullanın.

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 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ç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 numarasını arayın. 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. Card, tv-malzeme kitaplığının bir parçasıdır. MovieCard, aşağıdaki snippet olarak tanımlanan her bir film verilerinin katalogda nasıl oluşturulduğunu tanımlar:

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

Öne çıkan içerikleri vurgula

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