פריסות בהתאמה אישית

ב-Compose, רכיבי ממשק המשתמש מיוצגים על ידי פונקציות שאפשר להוסיף להן פרמטרים, שיוצרות חלק מממשק המשתמש כשמפעילים אותן, ואז הן מתווספות לעץ של ממשק המשתמש שמוצג במסך. לכל רכיב בממשק המשתמש יש הורה אחד, ויכולים להיות לו צאצאים רבים. כל רכיב ממוקם גם בתוך רכיב האב שלו, ומצוין כמיקום (x, y) וכגודל, שמצוין כ-width ו-height.

ההורים מגדירים את האילוצים של רכיבי הילדים. האלמנט מתבקש להגדיר את הגודל שלו במסגרת המגבלות האלה. מגבלות מגבילות את המינימום והמקסימום של width ושל height של רכיב. אם לרכיב יש רכיבי צאצא, יכול להיות שהוא ימדוד כל אחד מהצאצאים כדי לקבוע את הגודל שלו. אחרי שאלמנט קובע את הגודל שלו ומדווח עליו, הוא יכול להגדיר איך למקם את אלמנטי הצאצא שלו ביחס לעצמו, כמו שמתואר בפירוט במאמר בנושא יצירת פריסות בהתאמה אישית.

הפריסה של כל צומת בעץ ממשק המשתמש היא תהליך שכולל שלושה שלבים. כל צומת צריך:

  1. מדידת כל הילדים
  2. הגודל נקבע באופן אוטומטי
  3. מיקום הילדים שלו

שלושת השלבים של פריסת הצמתים: מדידת צמתים צאצאים, קביעת הגודל ומיקום הצמתים הצאצאים

השימוש בהיקפים מגדיר מתי אפשר למדוד את הילדים ולמקם אותם. אפשר למדוד פריסה רק במהלך שלבי המדידה והפריסה, ואפשר למקם רכיב צאצא רק במהלך שלבי הפריסה (ורק אחרי שהוא נמדד). בגלל היקפי יצירה כמו MeasureScope ו-PlacementScope, האכיפה מתבצעת בזמן ההידור.

שימוש במקש לשינוי הפריסה

אפשר להשתמש במאפיין layout כדי לשנות את האופן שבו מודדים ומסדרים רכיב. ‫Layout הוא ביטוי למדא; הפרמטרים שלו כוללים את הרכיב שאפשר למדוד, שמועבר כ-measurable, ואת האילוצים הנכנסים של הרכיב הניתן להרכבה, שמועברים כ-constraints. כך יכול להיראות משנה פריסה מותאם אישית:

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

נציג Text על המסך ונשלוט במרחק מהחלק העליון של המסך עד לקו הבסיס של השורה הראשונה של הטקסט. זה בדיוק מה שעושה התוסף paddingFromBaseline, ואנחנו מטמיעים אותו כאן כדוגמה. כדי לעשות את זה, משתמשים במחרוזת layout כדי למקם את הרכיב הניתן להרכבה במסך באופן ידני. זו ההתנהגות הרצויה שבה הריווח העליון 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 של lambda, מודדים את Text שמיוצג על ידי הפרמטר שניתן למדידה על ידי קריאה ל-measurable.measure(constraints).
  2. כדי לציין את הגודל של הקומפוזבילי, קוראים לשיטה 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 משנה רק את הקומפוזיציה של השיחה. כדי למדוד ולסדר כמה רכיבי קומפוזיציה, משתמשים ברכיב הקומפוזיציה Layout. קומפוזיציה כזו מאפשרת למדוד ולסדר את רכיבי הילדים באופן ידני. כל הפריסות ברמה גבוהה יותר, כמו Column ו-Row, מבוססות על Layout.

.

בואו ניצור גרסה בסיסית מאוד של 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
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

כמה רכיבי טקסט מוערמים אחד מעל השני בעמודה.

כיוון הפריסה

כדי לשנות את כיוון הפריסה של רכיב שאפשר להרכיב, משנים את המקומי של ההרכב LocalLayoutDirection.

אם מציבים רכיבים קומפוזביליים במסך באופן ידני, LayoutDirection הוא חלק מ-LayoutScope של משנה layout או של רכיב קומפוזבילי Layout.

כשמשתמשים ב-layoutDirection, ממקמים את רכיבי ה-Composable באמצעות place. בניגוד לשיטה placeRelative, השיטה place לא משתנה בהתאם לכיוון הפריסה (משמאל לימין או מימין לשמאל).

פריסות בהתאמה אישית בפעולה

מידע נוסף על פריסות ועל שינויים אפשר לקרוא במאמר פריסות בסיסיות בכתיבה. במאמר דוגמאות לכתיבה שיוצרות פריסות בהתאמה אישית אפשר לראות פריסות בהתאמה אישית בפעולה.

מידע נוסף

מידע נוסף על פריסות בהתאמה אישית בכלי הכתיבה זמין במקורות המידע הנוספים הבאים.

סרטונים

הקודם
פריסות של זרימה
הבא
סקירה כללית