TV için kaydırılabilir düzenler oluşturma

TV uygulamalarında gezinme deneyimi, verimli odaklanmaya dayalı gezinmeye dayanır. Standart Compose Foundation geç yüklenen düzenleri kullanarak, etkin öğeleri görünürde tutmak için odaklanmaya dayalı kaydırmayı otomatik olarak işleyen performanslı dikey ve yatay listeler oluşturabilirsiniz.

TV için optimize edilmiş varsayılan kaydırma davranışı

Compose Foundation 1.7.0'dan itibaren standart geç listeler (LazyRow ve LazyColumn gibi), odak konumlandırma özellikleri için yerleşik destek içerir. Bu, TV uygulamaları için katalog oluşturmanın önerilen yoludur. Bu yöntem, odaklanılan öğelerin görünür kalmasına ve kullanıcı için sezgisel olarak konumlandırılmasına yardımcı olur.

Temel bir kaydırılabilir liste uygulamak için standart geç yüklenen bileşenleri kullanın. Bu bileşenler, d-pad ile gezinmeyi otomatik olarak yönetir ve odaklanılan öğeyi görünür hale getirir.

import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items

@Composable
fun MovieCatalog(movies: List<Movie>) {
    LazyRow {
        items(movies) { movie ->
            MovieCard(
                movie = movie,
                onClick = { /* Handle click */ }
            )
        }
    }
}
Lists.kt

BringIntoViewSpec ile kaydırma davranışını özelleştirme

Tasarımınız belirli bir "pivot" noktası gerektiriyorsa (örneğin, odaklanılan öğeyi sol kenardan tam olarak% 30 uzakta tutmak) BringIntoViewSpec kullanarak kaydırma davranışını özelleştirebilirsiniz. Bu, odaklanılan bir öğeyi barındırmak için görüntü alanının tam olarak nasıl kaydırılması gerektiğini tanımlamanıza olanak tanıyarak eski pivotOffsets işlevinin yerini alır.

1. Özel bir BringIntoViewSpec tanımlama

Aşağıdaki yardımcı composable, üst ve alt kesirlere göre bir "pivot" tanımlamanıza olanak tanır. parentFraction, öğenin kapsayıcıda nereye yerleştirileceğini belirler. childFraction ise öğenin hangi kısmının bu noktayla hizalanacağını belirler.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PositionFocusedItemInLazyLayout(
    parentFraction: Float = 0.3f,
    childFraction: Float = 0f,
    content: @Composable () -> Unit,
) {
    val bringIntoViewSpec = remember(parentFraction, childFraction) {
        object : BringIntoViewSpec {
            override fun calculateScrollDistance(
                offset: Float,       // Item's initial position
                size: Float,         // Item's size
                containerSize: Float // Container's size
            ): Float {
                // Calculate the offset position of the item's leading edge.
                val initialTargetForLeadingEdge =
                    parentFraction * containerSize - (childFraction * size)
                // If the item fits in the container, and scrolling would cause
                // its trailing edge to be clipped, adjust targetForLeadingEdge
                // to prevent over-scrolling near the end of list.
                val targetForLeadingEdge = if (size <= containerSize &&
                    (containerSize - initialTargetForLeadingEdge) < size) {
                    // If clipped, align the item's trailing edge with the
                    // container's trailing edge.
                    containerSize - size
                } else {
                    initialTargetForLeadingEdge
                }
                // Return scroll distance relative to initial item position.
                return offset - targetForLeadingEdge
            }
        }
    }

    // Apply the spec to all scrollables in the hierarchy
    CompositionLocalProvider(
        LocalBringIntoViewSpec provides bringIntoViewSpec,
        content = content,
    )
}
Lists.kt

2. Özel spesifikasyonu uygulama

Konumlandırmayı uygulamak için düzenlerinizi yardımcıyla sarmalayın. Bu, kataloğunuzun farklı satırlarında "tutarlı bir odak çizgisi" oluşturmak için kullanışlıdır.

PositionFocusedItemInLazyLayout(
    parentFraction = 0.3f, // Pivot 30% from the edge
    childFraction = 0.5f   // Center of the item aligns with the pivot
) {
    LazyColumn {
        items(sectionList) { section ->
            // This row and its items will respect the 30% pivot
            LazyRow { /* ... */ }
        }
    }
}
Lists.kt

3. Belirli iç içe yerleşimler için kapsam dışında kalmayı seçme

Özel pivotunuz yerine standart kaydırma davranışını kullanması gereken belirli bir iç içe yerleştirilmiş düzeniniz varsa DefaultBringIntoViewSpec değerini sağlayın:

private val DefaultBringIntoViewSpec = object : BringIntoViewSpec {}

PositionFocusedItemInLazyLayout {
    LazyColumn {
        item {
            // This row will ignore the custom pivot and use default behavior
            CompositionLocalProvider(LocalBringIntoViewSpec provides DefaultBringIntoViewSpec) {
                LazyRow { /* ... */ }
            }
        }
    }
}
Lists.kt

Boş bir BringIntoViewSpec iletildiğinde çerçevenin varsayılan davranışı devreye girer.

TV Foundation'dan Compose Foundation'a geçiş

androidx.tv.foundation içindeki TV'ye özel geç yüklenen düzenler, standart Compose Foundation düzenleri lehine kullanımdan kaldırıldı.

Bağımlılık güncellemeleri

build.gradle uygulamanızın aşağıdaki bileşenler için 1.7.0 veya daha yeni bir sürümü kullandığını doğrulayın:

• androidx.compose.foundation
• androidx.compose.runtime

Bileşen eşleme

Geçiş yapmak için içe aktarmalarınızı güncelleyin ve bileşenlerinizden Tv ön ekini kaldırın:

Desteği sonlandırılan TV bileşeni	Compose Foundation'ın yerini alan kitaplık
TvLazyRow	LazyRow
TvLazyColumn	LazyColumn
TvLazyHorizontalGrid	LazyHorizontalGrid
TvLazyVerticalGrid	LazyVerticalGrid
pivotOffsets	BringIntoViewSpec (LocalBringIntoViewSpec aracılığıyla)