เลย์เอาต์ที่กำหนดเอง

ใน Compose องค์ประกอบ UI จะแสดงด้วยฟังก์ชันที่ประกอบกันได้ซึ่งจะแสดง UI บางส่วนเมื่อเรียกใช้ จากนั้นระบบจะเพิ่ม UI ดังกล่าวลงในแผนผัง UI ที่แสดงผลบนหน้าจอ องค์ประกอบ UI แต่ละรายการมีองค์ประกอบหลัก 1 รายการและอาจมีองค์ประกอบย่อยหลายรายการ นอกจากนี้ องค์ประกอบแต่ละรายการยังอยู่ภายในองค์ประกอบหลัก โดยระบุเป็นตำแหน่ง (x, y) และขนาด ซึ่งระบุเป็น width และ height

องค์ประกอบหลักจะกำหนดข้อจำกัดสำหรับองค์ประกอบย่อย ระบบจะขอให้องค์ประกอบกำหนดขนาดภายในข้อจำกัดเหล่านั้น ข้อจำกัดจะจำกัดwidthและheightขั้นต่ำและสูงสุดขององค์ประกอบ หากองค์ประกอบมีองค์ประกอบย่อย องค์ประกอบนั้นอาจวัดองค์ประกอบย่อยแต่ละรายการเพื่อช่วยกำหนดขนาดขององค์ประกอบ เมื่อองค์ประกอบกำหนดและรายงานขนาดของตัวเองแล้ว องค์ประกอบนั้นจะมีโอกาสกำหนดวิธีวางองค์ประกอบย่อยที่สัมพันธ์กับตัวเอง ดังที่อธิบายไว้อย่างละเอียดในการสร้างเลย์เอาต์ที่กำหนดเอง

การจัดวางแต่ละโหนดในแผนผัง UI เป็นกระบวนการ 3 ขั้นตอน โดยแต่ละโหนดต้องมีลักษณะดังนี้

1. วัดรายการย่อยทั้งหมด
2. กำหนดขนาดเอง
3. วางรายการย่อย

การใช้ขอบเขตจะกำหนดเวลาที่คุณสามารถวัดและวางองค์ประกอบย่อยได้ การวัดเลย์เอาต์จะทำได้เฉพาะในระหว่างการส่งผ่านการวัดและเลย์เอาต์เท่านั้น และจะวางองค์ประกอบย่อยได้เฉพาะในระหว่างการส่งผ่านเลย์เอาต์ (และหลังจากวัดแล้วเท่านั้น) เนื่องจากขอบเขตการเขียน เช่น MeasureScope และ PlacementScope ระบบจะบังคับใช้ขอบเขตนี้ในเวลาคอมไพล์

ใช้ตัวแก้ไขเลย์เอาต์

คุณสามารถใช้ตัวแก้ไข layout เพื่อแก้ไขวิธีวัดและจัดวางองค์ประกอบ Layout คือ Lambda โดยพารามิเตอร์ของ Lambda จะรวมองค์ประกอบที่คุณวัดได้ ซึ่งส่งเป็น measurable และข้อจำกัดขาเข้าของ Composable นั้น ซึ่งส่งเป็น constraints ตัวแก้ไขเลย์เอาต์ที่กำหนดเองจะมีลักษณะดังนี้

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

แสดง Text บนหน้าจอและควบคุมระยะห่างจากด้านบนถึงเส้นฐานของบรรทัดแรกของข้อความ ซึ่งเป็นสิ่งที่ตัวแก้ไข paddingFromBaseline ทำ และคุณกำลังใช้ตัวแก้ไขนี้เป็นตัวอย่าง โดยใช้ตัวแก้ไข layout เพื่อวาง Composable บนหน้าจอด้วยตนเอง ลักษณะการทำงานที่ได้เมื่อตั้งค่าระยะห่างจากขอบด้านบนของ Text เป็น 24.dp มีดังนี้

โค้ดสำหรับสร้างระยะห่างดังกล่าวมีดังนี้

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

สิ่งที่เกิดขึ้นในโค้ดดังกล่าวมีดังนี้

1. ในพารามิเตอร์แลมบ์ดา measurable คุณจะวัด Text ที่แสดงโดยพารามิเตอร์ที่วัดได้โดยเรียกใช้ measurable.measure(constraints)
2. คุณระบุขนาดของ Composable ได้โดยเรียกใช้เมธอด layout(width, height) ซึ่งจะให้ Lambda ที่ใช้สำหรับวางองค์ประกอบที่รวมไว้ด้วย ในกรณีนี้คือความสูงระหว่างเส้นฐานสุดท้ายกับระยะห่างจากขอบด้านบนที่เพิ่มเข้ามา
3. คุณวางตำแหน่งองค์ประกอบที่รวมไว้บนหน้าจอโดยเรียกใช้ placeable.place(x, y) หากไม่ได้วางองค์ประกอบที่รวมไว้ องค์ประกอบเหล่านั้นจะไม่ปรากฏ ตำแหน่ง y จะสอดคล้องกับระยะห่างจากขอบด้านบน ซึ่งก็คือตำแหน่งของเส้นฐานแรกของข้อความ

หากต้องการยืนยันว่าฟีเจอร์นี้ทำงานตามที่คาดไว้ ให้ใช้ตัวแก้ไขนี้ใน Text ดังนี้

@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

สร้างเลย์เอาต์ที่กำหนดเอง

ตัวแก้ไข layout จะเปลี่ยนเฉพาะ Composable ที่เรียกใช้เท่านั้น หากต้องการวัดและจัดเลย์เอาต์ Composable หลายรายการ ให้ใช้ Composable Layout แทน ซึ่ง Composable นี้ช่วยให้คุณวัดและจัดวางองค์ประกอบย่อยด้วยตนเองได้ เลย์เอาต์ระดับสูงทั้งหมด เช่น Column และ Row สร้างขึ้นด้วย Layout Composable

ตัวอย่างนี้จะสร้าง Column เวอร์ชันพื้นฐานมากๆ เลย์เอาต์ที่กำหนดเองส่วนใหญ่จะเป็นไปตามรูปแบบต่อไปนี้

@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 measurables คือรายการขององค์ประกอบย่อยที่ต้องวัด และ constraints คือข้อจำกัดจากองค์ประกอบหลัก เมื่อใช้ตรรกะเดียวกันกับก่อนหน้านี้ คุณจะใช้ MyBasicColumn ได้ดังนี้

@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

คอมโพสิเบิลย่อยจะถูกจำกัดโดยข้อจำกัด Layout (ไม่มีข้อจำกัด minHeight) และจะวางตาม yPosition ของคอมโพสิเบิลก่อนหน้า

วิธีใช้ Composable ที่กำหนดเองมีดังนี้

@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

ทิศทางของเลย์เอาต์

เปลี่ยนทิศทางเลย์เอาต์ของ Composable โดยเปลี่ยน LocalLayoutDirection Composition Local

หากคุณวาง Composable บนหน้าจอด้วยตนเอง LayoutDirection จะเป็นส่วนหนึ่งของ LayoutScope ของตัวแก้ไข layout หรือ Composable Layout

เมื่อใช้ layoutDirection ให้วาง Composable โดยใช้ place place จะไม่เปลี่ยนแปลงตามทิศทางของเลย์เอาต์ (จากซ้ายไปขวาเทียบกับจากขวาไปซ้าย) ซึ่งต่างจากเมธอด placeRelative

การใช้งานเลย์เอาต์ที่กำหนดเอง

ดูข้อมูลเพิ่มเติมเกี่ยวกับเลย์เอาต์และตัวแก้ไขในเลย์เอาต์พื้นฐานใน Compose และดูการทำงานของเลย์เอาต์ที่กำหนดเองในตัวอย่าง Compose ที่สร้างเลย์เอาต์ที่กำหนดเอง

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับเลย์เอาต์ที่กำหนดเองใน Compose ได้ที่แหล่งข้อมูลเพิ่มเติมต่อไปนี้

วิดีโอ

• ข้อมูลเจาะลึกเกี่ยวกับเลย์เอาต์ใน Jetpack Compose