Jetpack Compose'da hizalama çizgileri

Oluştur düzen modeli, üst düzenler tarafından alt öğelerini hizalamak ve konumlandırmak için kullanılabilecek özel hizalama çizgileri oluşturmak üzere AlignmentLine aracını kullanmanıza olanak tanır. Örneğin Row, alt öğeleri hizalamak için özel hizalama çizgilerini kullanabilir.

Bir düzen belirli bir AlignmentLine için değer sağladığında düzenin üst öğeleri ölçümden sonra ilgili Placeable örneğinde Placeable.get operatörünü kullanarak bu değeri okuyabilir. AlignmentLine öğesinin konumuna göre, üst çocukların konumuna karar verebilirler.

Oluştur'daki bazı kompozisyonlar zaten hizalama çizgileriyle gelir. Örneğin, BasicText kompozisyonu FirstBaseline ve LastBaseline hizalama çizgilerini ortaya çıkarır.

Aşağıdaki örnekte firstBaselineToTop adlı özel bir LayoutModifier, Text öğesine ilk temel değerinden itibaren dolgu eklemek için FirstBaseline değerini okur.

1. Şekil. Bir öğeye normal dolgu ekleme ile Metin öğesinin tabanına dolgu uygulama arasındaki farkı gösterir.

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)
    }
}

@Preview
@Composable
private fun TextWithPaddingToBaseline() {
    MaterialTheme {
        Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
    }
}
AlignmentLinesSnippets.kt

Örnekteki FirstBaseline öğesini okumak için ölçüm aşamasında placeable [FirstBaseline] kullanılmıştır.

Özel hizalama çizgileri oluşturun

Özel Layout bestesi veya LayoutModifier oluştururken özel hizalama çizgileri sağlayabilirsiniz. Böylece diğer üst oluşturma öğeleri, alt öğelerini uygun şekilde hizalamak ve konumlandırmak için bu çizgileri kullanabilir.

Aşağıdaki örnekte, diğer oluşturma öğelerinin grafiğin maksimum ve minimum veri değerine hizalanabilmesi için MaxChartValue ve MinChartValue olmak üzere iki hizalama çizgisini ortaya çıkaran özel bir BarChart oluşturma öğesi gösterilmektedir. Maks ve Min olmak üzere iki metin öğesi, özel hizalama çizgilerinin ortasına hizalandı.

2. Şekil. Maksimum ve minimum veri değerine hizalanan Metin ile BarChart birleştirilebilir.

Özel hizalama çizgileri, projenizdeki üst düzey değişkenler olarak tanımlanır.

/**
 * AlignmentLine defined by the maximum data value in a [BarChart]
 */
private val MaxChartValue = HorizontalAlignmentLine(merger = { old, new ->
    min(old, new)
})

/**
 * AlignmentLine defined by the minimum data value in a [BarChart]
 */
private val MinChartValue = HorizontalAlignmentLine(merger = { old, new ->
    max(old, new)
})
AlignmentLinesSnippets.kt

Örneğimizi oluşturmak için kullanılan özel hizalama çizgileri, alt öğeleri dikey olarak hizalamak için kullanıldığından HorizontalAlignmentLine türündedir. Birden fazla düzenin bu hizalama satırları için değer sağlaması durumunda bir birleştirme politikası parametre olarak aktarılır. Compose düzen sistem koordinatları ve Canvas koordinatları [0, 0] değerini temsil ettiğinden sol üst köşe ile x ve y ekseni aşağı yönde pozitiftir. Bu nedenle MaxChartValue değeri her zaman MinChartValue değerinden küçük olur. Bu nedenle, birleşme politikası maksimum grafik veri değeri temel çizgisi için min ve minimum grafik veri değeri referans değeri için max şeklindedir.

Özel Layout veya LayoutModifier oluştururken, alignmentLines: Map<AlignmentLine, Int> parametresini alan MeasureScope.layout yönteminde özel hizalama çizgileri belirtin.

@Composable
private fun BarChart(
    dataPoints: List<Int>,
    modifier: Modifier = Modifier,
) {
    val maxValue: Float = remember(dataPoints) { dataPoints.maxOrNull()!! * 1.2f }

    BoxWithConstraints(modifier = modifier) {
        val density = LocalDensity.current
        with(density) {
            // ...
            // Calculate baselines
            val maxYBaseline = // ...
            val minYBaseline = // ...
            Layout(
                content = {},
                modifier = Modifier.drawBehind {
                    // ...
                }
            ) { _, constraints ->
                with(constraints) {
                    layout(
                        width = if (hasBoundedWidth) maxWidth else minWidth,
                        height = if (hasBoundedHeight) maxHeight else minHeight,
                        // Custom AlignmentLines are set here. These are propagated
                        // to direct and indirect parent composables.
                        alignmentLines = mapOf(
                            MinChartValue to minYBaseline.roundToInt(),
                            MaxChartValue to maxYBaseline.roundToInt()
                        )
                    ) {}
                }
            }
        }
    }
}
AlignmentLinesSnippets.kt

Bu kompozitin doğrudan ve dolaylı üst öğeleri eşleşme çizgilerini tüketebilir. Aşağıdaki kompozisyon, parametre olarak iki Text slotu ve veri noktası alan ve iki metni maksimum ve minimum grafik veri değerleriyle hizalayan özel bir düzen oluşturur. Bu bestenin önizlemesi Şekil 2'de gösterilmiştir.

@Composable
private fun BarChartMinMax(
    dataPoints: List<Int>,
    maxText: @Composable () -> Unit,
    minText: @Composable () -> Unit,
    modifier: Modifier = Modifier,
) {
    Layout(
        content = {
            maxText()
            minText()
            // Set a fixed size to make the example easier to follow
            BarChart(dataPoints, Modifier.size(200.dp))
        },
        modifier = modifier
    ) { measurables, constraints ->
        check(measurables.size == 3)
        val placeables = measurables.map {
            it.measure(constraints.copy(minWidth = 0, minHeight = 0))
        }

        val maxTextPlaceable = placeables[0]
        val minTextPlaceable = placeables[1]
        val barChartPlaceable = placeables[2]

        // Obtain the alignment lines from BarChart to position the Text
        val minValueBaseline = barChartPlaceable[MinChartValue]
        val maxValueBaseline = barChartPlaceable[MaxChartValue]
        layout(constraints.maxWidth, constraints.maxHeight) {
            maxTextPlaceable.placeRelative(
                x = 0,
                y = maxValueBaseline - (maxTextPlaceable.height / 2)
            )
            minTextPlaceable.placeRelative(
                x = 0,
                y = minValueBaseline - (minTextPlaceable.height / 2)
            )
            barChartPlaceable.placeRelative(
                x = max(maxTextPlaceable.width, minTextPlaceable.width) + 20,
                y = 0
            )
        }
    }
}
@Preview
@Composable
private fun ChartDataPreview() {
    MaterialTheme {
        BarChartMinMax(
            dataPoints = listOf(4, 24, 15),
            maxText = { Text("Max") },
            minText = { Text("Min") },
            modifier = Modifier.padding(24.dp)
        )
    }
}
AlignmentLinesSnippets.kt