Katalog tarayıcı oluşturma

TV'de çalışan bir medya uygulamasının, kullanıcıların içeriklerine göz atmasına, seçim yapmasına ve içerik oynatmaya başlamasına izin vermesi gerekir. Bu tür uygulamalar için içeriğe göz atma deneyimi basit ve sezgisel, görsel olarak ilgi çekici 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'da sağlanan işlevlerin nasıl kullanılacağı açıklanmaktadı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.

Katalog için composable işlev oluşturma

Bir ekranda görünen her şey, Composer için TV'de composable bir işlev olarak uygulanır. Medya kataloğu tarayıcısı için composable işlevini aşağıdaki snippet gibi tanımlayarak başlayacaksınız:

@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ü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 öğeyi (veya uzunluğu bilinmeyen bir listeyi) gösteren 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 sunan bir TvLazyListScope.() -> Unit bloğu sağlar. Aşağıdaki örnekte her bölüm, bölümler arasında 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 = {},
) {
  TvLazyColumn(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(16.dp)
  ) {
    items(sectionList) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}

Örnekteki Section composable işlevi, bölümlerin nasıl görüntüleneceğini tanımlar. Aşağıdaki işlevde TvLazyRow, TvLazyColumn ürününün bu yatay sürümünün, sağlanan DSL'yi çağırarak TvLazyListScope.() -> Unit bloğuna sahip bir yatay liste tanımlamak için benzer şekilde 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'ında Text bileşeni kullanılır. Materyal Tasarım'da tanımlanan metinler ve diğer bileşenler, tv-malzeme kitaplığında sunulmaktadır . MaterialTheme nesnesine başvuruda bulunarak metinlerin stilini Materyal Tasarım'da tanımlandığı gibi değiştirebilirsiniz. Bu nesne, tv-material kitaplığı tarafından da sağlanır. MovieCard, her bir film verilerinin aşağıdaki snippet olarak tanımlanan katalogda nasıl oluşturulduğunu tanımlar. Card ayrıca 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,
     )
   }
}

Öne çıkan içeriği vurgulama

Daha önce açıklanan örnekte tüm filmler eşit şekilde gösterilir. Aynı alan adına sahiptir ve aralarında görsel bir fark yoktur. Bazılarını Carousel ile vurgulayabilirsiniz.

Bant, bilgileri kayabilen, kaybolabilen veya görüntüye 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, en azından Bant'ın sahip olduğu öğe sayısını ve her bir öğenin nasıl çizileceğini belirtmenizi istiyor. İlki, itemCount ile belirtilebilir. İkincisi, lambda olarak geçirilebilir. Gösterilen öğenin dizin numarası lambdaya 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ç olmayan bir listenin öğesi olabilir. Aşağıdaki snippet, tüm Section composable'ın üzerinde FeaturedCarousel composable'ı göstermektedir.

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