Katalog tarayıcı oluşturma

TV'de çalışan bir medya uygulamasının, kullanıcıların içeriğine göz atmasına izin vermesi gerekir seçim yapabilir ve içeriği oynatmaya başlayabilirsiniz. İçeriğe göz atma bu tür uygulamalardaki deneyim basit, sezgisel ve görsel olarak olmalıdır ve ilgi çekici olmasını sağlayın.

Medya kataloğu tarayıcısı genellikle birkaç bölümden ve her bölüm bir medya içeriği listesine sahiptir. Medya kataloğundaki bölümlere örnekler: oynatma listeleri, öne çıkan içerik, önerilen kategoriler.

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

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

Katalog için composable işlev oluşturma

Bir ekranda görünen her şey TV içeriği oluşturun. Bir composable tanımlayarak başlayın işlevini kullanın:

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

CatalogBrowser, medya kataloğunuzu uygulayan composable işlevdir tarayıcı. İş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 Yazma, tembel listeler sunar. Bu bir bileşen, öğe sayısı (veya uzunluğu bilinmeyen bir liste). Telefonla arama LazyColumn dikey olarak yerleştirin. LazyColumn, LazyListScope.() -> Unit bloku, öğe içeriklerini tanımlamak için bir DSL süreci sunar. Aşağıdaki örnekte, her bölüm, bölümler arasında 16 dp boşlukla dikey bir listeye yerleştirilir:

@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 fonksiyonda, LazyRow bu işlevin LazyColumn yatay sürümü de benzer şekilde çağrı yaparak LazyListScope.() -> Unit bloklu yatay bir liste tanımlayın sağlanan DSL:

@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 composable'da Text bileşeni kullanılır. Metin ve diğer bileşenler TV materyali kitaplığında mevcut . Şunları yapabilirsiniz: kısa mesajları değiştir tasarımında, kalitenin en üst düzeye çıkarılmasına MaterialTheme nesnesini tanımlayın. Bu nesne, tv-material kitaplığı tarafından da sağlanır. Card, tv-malzeme kitaplığının bir parçasıdır. MovieCard, her bir film verilerinin tanımlanan katalogda nasıl oluşturulacağını tanımlar şu snippet'le değiştirin:

@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 görüntü yükleyen bir composable'dır. Ayrıntılar için Resim yükleme bölümüne bakın.

Ö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, kaybolabilen veya kaybolabilen bir öğe grubu halinde gösterir. taşımak anlamına gelir. Bileşeni, öne çıkan içerikleri vurgulamak için kullanırsınız. Örneğin: yeni yayınlanan filmler veya TV programlarının yeni bölümleri

Carousel en azından Bant'ta bulunan öğelerin sayısını ve bu öğelerin ve her öğeyi çizin. İlki, itemCount ile belirtilebilir. İkincisi lambda olarak iletilebilir. Görüntülenen öğenin dizin numarası: lambdalara verilmiş. Görüntülenen öğeyi belirtilen dizin değeri:

@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'in üzerinde FeaturedCarousel composable, Section composable'ın tümü:

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