Ö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 birçok alt öğesi vardır. Her biri öğesi aynı zamanda üst öğesinin içinde, (x, y) konumu olarak belirtilir ve width ve height olarak belirtilen bir boyut.

Üst öğeler, alt öğeleri için kısıtlamaları tanımlar. Bir öğeden ve boyutu bu kısıtlamalar dahilinde tanımlamalıdır. Kısıtlamalar, bir öğenin maksimum width ve height. Bir öğenin alt öğeleri varsa boyutunu belirlemeye yardımcı olması için her çocuk için bir ölçüm yapabilir. Bir öğe, ve kendi boyutunu raporladığında, alt öğeyi nasıl yerleştireceğini tanımlama Özel oluşturma düzenler.

Kullanıcı arayüzü ağacındaki her bir düğümü düzenlemek üç adımlı bir süreçtir. Her bir düğüm:

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

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. Google Ads'deki paddingFromBaseline değiştiricisi kullanıyor. Bunu bir örnek olarak uygulayacağız. 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şturmak için gereken kodu aşağıda görebilirsiniz:

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. Sarmalanmış öğeleri ekrana şu şekilde konumlandırabilirsiniz: placeable.place(x, y) Sarmalanmış öğeler yerleştirilmezse görünür. y konumu, üst dolguya, yani metnin ilk temel çizgisi.

Bunun beklendiği gibi çalıştığını doğrulamak için bu değiştiriciyi 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 composable çocukları manuel olarak ölçüp yerleştirmenizi sağlar. Tüm üst düzey düzenler gibi Column ve Row Layout composable ile oluşturuldu.

Column öğesinin çok temel bir sürümünü oluşturalım. Çoğu özel düzen bunu kullanır desen:

@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, bunların ölçülmesi gerekir ve constraints üst kaynaklı 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 composable'ın kullanım şekli şöyledir:

@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 yerel beste.

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 ile composable'ı 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üzenlerin işleyiş şekli

Düzenler ve değiştiriciler hakkında daha fazla bilgi edinmek için: Compose'daki temel düzenler ve özel düzenlerin nasıl çalıştığını Özel düzenler oluşturan örnekler oluşturma.

Daha fazla bilgi

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

Videolar

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

ziyaret edin.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Oluşturma düzenlerinde doğal ölçümler
• Compose'daki grafikler
• Oluşturma değiştiricileri

ziyaret edin.