Özel düzenler

Compose'da kullanıcı arayüzü öğeleri çağrıldığında oluşturulan kullanıcı arayüzü parçasıdır. Bu parça, daha sonra ekranda görebilirsiniz. Her kullanıcı arayüzü öğesinin bir üst öğesi ve muhtemelen çok sayıda alt öğesi vardır. Her öğe, ebeveyninde de bulunur. Bu öğelerin konumu (x, y) olarak, boyutu ise width ve height olarak belirtilir.

Ebeveynler, alt öğelerinin kısıtlamalarını tanımlar. Bir öğeden ve boyutu bu kısıtlamalar dahilinde tanımlamalıdır. Kısıtlamalar, bir öğenin minimum ve maksimum width ve height değerlerini kısıtlar. Bir öğenin alt öğeleri varsa boyutunu belirlemeye yardımcı olması için her çocuk için bir ölçüm yapabilir. Bir öğe kendi boyutunu belirledikten ve bildirdikten sonra, Özel düzenler oluşturma bölümünde ayrıntılı olarak açıklandığı gibi, alt öğelerinin kendisine göre nasıl yerleştirileceğini tanımlayabilir.

Kullanıcı arayüzü ağacındaki her düğümü düzenlemek üç adımdan oluşan bir işlemdir. Her bir düğüm:

1. Alt öğeleri ölçün
2. Kendi boyutuna karar verme
3. Alt öğelerini yerleştir

Not: Oluşturma kullanıcı arayüzü, çok geçişli ölçüme izin vermez. Bunun anlamı, kullanıcının düzen öğesinin bu iki boyutu birbirine bağlamak üzere farklı ölçüm yapılandırmaları deneyin.

Kapsamların kullanımı, alt öğeleri ne zaman ölçebileceğinizi ve yerleştirebileceğinizi tanımlar. Düzen ölçümü, yalnızca ölçüm ve düzen geçişleri sırasında yapılabilir. Alt öğeler yalnızca düzen kartlarına (ve yalnızca ölçülmüştür). Örneğin, MeasureScope, ve PlacementScope, bu, derleme sırasında uygulanır.

Düzen değiştiriciyi kullanma

Bir öğenin ölçülme ve yerleştirilme şeklini değiştirmek için layout değiştiricisini kullanabilirsiniz çıkar. Layout bir lambdadır; parametreleri, ölçebileceğiniz öğeyi, measurable olarak iletildi ve bu composable'ın gelen kısıtlamaları constraints. Özel bir düzen değiştirici şöyle görünebilir:

fun Modifier.customLayoutModifier() =
    layout { measurable, constraints ->
        // ...
    }
CustomLayoutSnippets.kt

Ekranda bir Text gösterelim ve üst ile üst arasındaki mesafeyi kontrol edelim. metnin ilk satırının temel çizgisini belirler. paddingFromBaseline değiştirici tam olarak bunu yapar. Burada örnek olarak uyguladık. Bunun için layout değiştiricisini kullanarak composable'ı tıklayın. Text üst dolgusunun 24.dp olarak ayarlandığı istenen davranış aşağıdaki gibidir:

Bu boşluğu oluşturacak kod aşağıda verilmiştir:

fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = layout { measurable, constraints ->
    // Measure the composable
    val placeable = measurable.measure(constraints)

    // Check the composable has a first baseline
    check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
    val firstBaseline = placeable[FirstBaseline]

    // Height of the composable with padding - first baseline
    val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
    val height = placeable.height + placeableY
    layout(placeable.width, height) {
        // Where the composable gets placed
        placeable.placeRelative(0, placeableY)
    }
}
CustomLayoutSnippets.kt

Bu kodda neler olduğu şöyledir:

1. measurable lambda parametresinde, Text measurable.measure(constraints) yöntemini çağırarak ölçülebilir parametreyi değiştirebilirsiniz.
2. composable'ın boyutunu, layout(width, height) yöntemini kullanarak sarmalanmış öğeleri yerleştirmek için kullanılan bir lambda değeri de elde edersiniz. İçinde bu örnekte, son referans değer ile eklenen üst dolgu arasındaki yüksekliktir.
3. placeable.place(x, y) işlevini çağırarak sarmalanmış öğeleri ekranda konumlandırırsınız. Sarmalanmış öğeler yerleştirilmezse görünmez. ykonumu, üst dolguya (metnin ilk yatay çizgisinin konumu) karşılık gelir.

Bunun beklendiği gibi çalıştığını doğrulamak için bu değiştiriciyi bir Text üzerinde kullanın:

@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
    }
}

@Preview
@Composable
fun TextWithNormalPaddingPreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.padding(top = 32.dp))
    }
}
CustomLayoutSnippets.kt

Özel düzenler oluşturun

layout değiştiricisi yalnızca çağrı composable'ı değiştirir. Ölçmek ve düzenlemek için birden fazla composable kullanmak yerine Layout composable'ı kullanın. Bu bileşen, çocukları manuel olarak ölçmenize ve yerleştirmenize olanak tanır. Column ve Row gibi tüm üst düzey düzenler, Layout bileşeni ile oluşturulur.

Not: Görünüm sisteminde özel bir düzen oluşturmak için ViewGroup'i genişletmek ve ölçüm ile düzen işlevlerini uygulamak gerekiyordu. Oluşturma'da, Layout composable öğesini kullanarak bir işlev yazmanız yeterlidir.

Column işlevinin çok basit bir sürümünü oluşturalım. Özel düzenler genellikle şu kalıbı izler:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // measure and position children given constraints logic here
        // ...
    }
}
CustomLayoutSnippets.kt

layout değiştiricisine benzer şekilde, measurables ölçülmesi gereken alt öğelerin listesi, constraints ise üst öğeden gelen kısıtlamalardır. Öncekiyle aynı mantığa göre MyBasicColumn aşağıdaki gibi uygulanabilir: bu:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // Don't constrain child views further, measure them with given constraints
        // List of measured children
        val placeables = measurables.map { measurable ->
            // Measure each children
            measurable.measure(constraints)
        }

        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Track the y co-ord we have placed children up to
            var yPosition = 0

            // Place children in the parent layout
            placeables.forEach { placeable ->
                // Position item on the screen
                placeable.placeRelative(x = 0, y = yPosition)

                // Record the y co-ord placed up to
                yPosition += placeable.height
            }
        }
    }
}
CustomLayoutSnippets.kt

Alt composable'lar Layout kısıtlamalarıyla kısıtlanır ( minHeight kısıtlaması) ve bu kısıtlamalar, son gösterimin yPosition önceki composable'ı seçin.

Bu özel kompozisyonun nasıl kullanılacağı aşağıda açıklanmıştır:

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
    MyBasicColumn(modifier.padding(8.dp)) {
        Text("MyBasicColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}
CustomLayoutSnippets.kt

Düzen yönü

LocalLayoutDirection bileşimini yerel olarak değiştirerek bir bileşimin düzen yönünü değiştirin.

Bir composable'ı ekrana manuel olarak yerleştiriyorsanız LayoutDirection layout değiştiricisinin LayoutScope veya Layout composable'ının bir bölümü.

layoutDirection kullanırken place kullanarak bileşenleri yerleştirin. Şunlardan farklı olarak: placeRelative yönteminde place, düzen yönüne göre değişmez (soldan sağa veya sağdan sola).

Özel düzenler kullanımda

Oluşturma bölümündeki temel düzenler başlıklı makalede düzenler ve değiştiriciler hakkında daha fazla bilgi edinin. Özel düzenler oluşturan Oluşturma örnekleri başlıklı makalede ise özel düzenleri kullanımda görebilirsiniz.

Daha fazla bilgi

Oluştur'daki özel düzenler hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara göz atın.

Videolar

• Jetpack Compose Layout'ları hakkında ayrıntılı bilgi