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.
![](https://developer.android.google.cn/static/training/tv/images/compose-catalogbrowser-example.png?authuser=8&hl=tr)
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
emin olun. İş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 işlevde, 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,
)
}
}
Ö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)
}
}
}