Katalog tarayıcı oluşturma

TV'de çalışan bir medya uygulamasının, kullanıcıların içerik tekliflerine göz atmasına, seçim yapmasına ve içerik 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 kataloğu verilerine göz atabilir.

Uygulamanızın medya kataloğundaki müziklere veya videolara göz atmaya yönelik 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 derlenebilir 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şlevidir. İşlev aşağıdaki bağımsız değişkenleri alır:

• Öne çıkan içeriklerin listesi.
• Bölümlerin listesi.
• Değiştirici nesnesi.
• 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 birleştirilebilir işlevi bölümlerin nasıl gösterileceğini tanımlar. Aşağıdaki işlevde LazyRow, LazyColumn'in bu yatay sürümünün, sağlanan DSL'yi çağırarak LazyListScope.() -> Unit bloğu içeren yatay bir 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,
  )
  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. Belirtilen dizin değeriyle görüntülenen öğeyi 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'te, tüm Section bileşenlerinin üzerinde FeaturedCarousel bileşeni gösterilmektedir:

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