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 olanak tanıması gerekir. Bu tür uygulamalarda içeriklere göz atma deneyimi sezgisel, görsel açıdan hoş ve ilgi çekici olmalıdır.

Katalog tarayıcıları genellikle birkaç bölümden oluşur ve her bölümde medya içeriklerinin listesi bulunur. Medya kataloğundaki bölümlere örnek olarak oynatma listeleri, öne çıkan içerikler ve önerilen kategoriler verilebilir.

Şekil 1. Tipik katalog ekranı. Kullanıcılar video kataloğu verilerine göz atabilir.

Uygulamanızın medya kataloğundaki müzik veya videolara göz atmak için 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 Compose'da composable işlev olarak uygulanır. Medya kataloğu tarayıcısı için 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
}
TvMoviesActivity.kt

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 nesnesi.
• Ekran geçişini tetikleyen bir geri çağırma işlevi.

Kullanıcı arayüzü öğelerini ayarlama

TV için Compose, çok sayıda öğeyi (veya uzunluğu bilinmeyen bir listeyi) görüntülemek için kullanılan bir bileşen olan geç 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 bloğu sağlar. Aşağıdaki örnekte her bölüm, bölümler arasında 16 dp boşluk olacak şekilde 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt

Örnekte, SectionRow composable işlevi bölümlerin nasıl gösterileceğini tanımlar. Aşağıdaki işlevde LazyRow, LazyColumn öğesinin bu yatay sürümünün, sağlanan DSL'yi çağırarak LazyListScope.() -> Unit bloğuyla yatay bir liste tanımlamak için benzer şekilde nasıl kullanıldığını gösterir:

@Composable
fun SectionRow(
    section: Section,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    Text(
        text = section.title,
        style = MaterialTheme.typography.headlineSmall,
    )
    MovieCatalog(
        section.movieList,
        onClick = { movie -> onItemSelected(movie) },
        modifier
    )
}
TvMoviesActivity.kt

@Composable
fun MovieCatalog(
    movies: List<Movie>,
    onClick: (Movie) -> Unit,
    modifier: Modifier = Modifier,
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(movies.size) { index ->
            val movie = movies[index]
            MovieCard(
                movie = movie,
                onClick = { onClick(movie) }
            )
        }
    }
}
TvMoviesActivity.kt

SectionRow composable'ında Text bileşeni kullanılır. Materyal Tasarım'da tanımlanan metin ve diğer bileşenler tv-material kitaplığında sunulur . MaterialTheme nesnesine başvurarak metinlerin stilini Materyal Tasarım'da tanımlandığı şekilde 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 bir film verisinin katalogda nasıl oluşturulacağını tanımlar. Bu katalog, aşağıdaki snippet olarak tanımlanır:

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

Not: AsyncImage, internetten resim yükleyen bir composable'dır. Ayrıntılar için Görselleri Yükleme bölümüne bakın.

Öne çıkan içerikleri vurgulama

Yukarıda açıklanan örnekte tüm filmler eşit şekilde gösterilir. Aynı alana sahipler, aralarında görsel bir fark yok. Carousel simgesini kullanarak bazılarını öne çıkarabilirsiniz.

Rulo, bilgileri kaydırılabilen, soldurulabilen veya görünüme taşınabilen bir öğe grubunda gösterir. Bu bileşeni, yeni yayınlanan 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 Carousel'in sahip olduğu öğe sayısını ve her bir öğenin nasıl çizileceğini belirtmenizi bekler. İlk parametre itemCount ile belirtilebilir. İkincisi lambda olarak iletilebilir. Görüntülenen öğenin dizin numarası lambda'ya verilir. Gösterilen öğeyi, verilen dizin değeriyle belirleyebilirsiniz:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}
TvMoviesActivity.kt

Carousel, LazyColumn gibi bir lazy list öğesi olabilir. Aşağıdaki snippet'te, tüm SectionRow composable'ların üzerinde FeaturedCarousel composable gösterilmektedir:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt