מוודאים שממשק המשתמש פועל עם חלונות מוטמעים

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

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

לדוגמה, זוהי השיטה הבסיסית ביותר להוספת התמונות הקטנות לתוכן של האפליקציה כולה:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    enableEdgeToEdge()

    setContent {
        Box(Modifier.safeDrawingPadding()) {
            // the rest of the app
        }
    }
}
InsetsSnippets.kt

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

כל סוגי התצוגה הממוזערת האלה מונפשים באופן אוטומטי באמצעות אנימציות של IME שהועברו לאחור ל-API 21. כתוצאה מכך, כל הפריסות שמשתמשות בהטמעות האלה יתעדכנו באופן אוטומטי כשערכו של ההטמעה ישתנה.

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

משתני Padding

Modifier.windowInsetsPadding(windowInsets: WindowInsets) מחילה את ה-insets של החלון הנתון כמילוי, בדיוק כמו Modifier.padding. לדוגמה, Modifier.windowInsetsPadding(WindowInsets.safeDrawing) מחילה את הקטעים הפנימיים של הציור הבטוח כמילוי לכל 4 הצדדים.

יש גם כמה שיטות כלי מובנות לסוגי התצוגה הנפוצים ביותר. Modifier.safeDrawingPadding() הוא אחד מה-methods האלה, והוא שווה ערך ל-Modifier.windowInsetsPadding(WindowInsets.safeDrawing). יש משתני אופן פעולה דומים לסוגים האחרים של התצוגה הממוזערת.

משתני גודל של תמונות מוטמעות

המשתנים הבאים מחילים כמות של חלונות מוטמעים על ידי הגדרת הגודל של הרכיב לגודל של החלונות המוטמעים:

המשתנים האלה שימושיים במיוחד לקביעת הגודל של Spacer שיתפוס את המרחב של התמונות הממוזערות:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}
InsetsSnippets.kt

צריכת מודעות מוטמעות

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

בנוסף, מודификаторי גודל של תצוגות מוטמעות מונעים שימוש באותו קטע של תצוגות מוטמעות יותר מפעם אחת, אם כבר נוצלו תצוגות מוטמעות. עם זאת, מכיוון שהן משנות את הגודל שלהן ישירות, הן לא צורכות רכיבי inset בעצמן.

כתוצאה מכך, משתני padding בתוך עץ משנים באופן אוטומטי את כמות ה-padding שחלה על כל רכיב.

בדוגמה של LazyColumn מקודמת, הגודל של LazyColumn משתנה באמצעות המאפיין המשנה imePadding. בתוך LazyColumn, הפריט האחרון מוגדר לגובה של החלק התחתון של סרחי המערכת:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}
InsetsSnippets.kt

כשה-IME סגור, המאפיין imePadding() לא מחיל שום ריפוד, כי ל-IME אין גובה. מאחר שמגביל imePadding() לא מחיל שוליים, לא נעשה שימוש בקטעי הטקסט הפנימיים והגובה של Spacer יהיה זהה לגובה החלק התחתון של שורות המערכת.

כשה-IME נפתח, האנימציה של הרכיבים הפנימיים של ה-IME משתנה בהתאם לגודל של ה-IME, והמַגְדִּיל imePadding() מתחיל להחיל תוספת מרווח בתחתית המסך כדי לשנות את הגודל של LazyColumn בזמן פתיחת ה-IME. כשהמשתנה המשנה imePadding() מתחיל להחיל את המילוי התחתון, הוא מתחיל גם לצרוך את כמות ההכנסות הזו. לכן, הגובה של Spacer מתחיל לרדת, כי חלק מהרווח בין פסי המערכת כבר הוחל על ידי המשתנה imePadding(). אחרי שהמודיפיר imePadding() מחיל כמות של ריפוד בחלק התחתון שגדולה מהעמודות של המערכת, הגובה של Spacer הוא אפס.

כשה-IME נסגר, השינויים מתרחשים בכיוון ההפוך: Spacer מתחיל להתרחב מגובה אפס ברגע ש-imePadding() חל על פחות מהצד התחתון של סרחי המערכת, עד ש-Spacer תואם לגובה של הצד התחתון של סרחי המערכת ברגע שהאנימציה של ה-IME מסתיימת.

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

גם Modifier.consumeWindowInsets(insets: WindowInsets) צורך רכיבי inset באותו אופן כמו Modifier.windowInsetsPadding, אבל הוא לא מחיל את רכיבי ה-inset שנצרכו כמילוי. אפשר להשתמש באפשרות הזו בשילוב עם המשתנים לשינוי גודל ההכנסה, כדי לציין לשכנים של הרכיב שכבר נצרכו כמה הכנסות:

Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars))

    Column(
        Modifier.consumeWindowInsets(
            WindowInsets.systemBars.only(WindowInsetsSides.Vertical)
        )
    ) {
        // content
        Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
    }

    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars))
}
InsetsSnippets.kt

התנהגות הפונקציה Modifier.consumeWindowInsets(paddingValues: PaddingValues) דומה מאוד לזו של הגרסה עם הארגומנט WindowInsets, אבל היא מקבלת לצריכה ערך PaddingValues שרירותי. הדבר שימושי כדי להודיע לצאצאים מתי הרווח או המילוי מסופקים על ידי מנגנון אחר מלבד המשתנים של המילוי הפנימי, כמו Modifier.padding רגיל או רווחים בגובה קבוע:

Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) {
    // content
    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
}
InsetsSnippets.kt

במקרים שבהם צריך את הנתונים הגולמיים של חלון ההכנסה ללא צריכה, משתמשים ישירות בערכי WindowInsets, או משתמשים ב-WindowInsets.asPaddingValues() כדי להחזיר PaddingValues של הנתונים הגולמיים שלא מושפעים מהצריכה. עם זאת, בגלל האזהרות שבהמשך, מומלץ להשתמש במשתני padding של חלונות מוטמעים ובמשתני הגודל של חלונות מוטמעים בכל הזדמנות אפשרית.

שוליים ושלבי Jetpack פיתוח נייטיב

Compose משתמש בממשקי ה-API הבסיסיים של AndroidX כדי לעדכן את הרכיבים הפנימיים ולספק להם אנימציה, תוך שימוש בממשקי ה-API הבסיסיים של הפלטפורמה לניהול הרכיבים הפנימיים. בגלל התנהגות הפלטפורמה הזו, ל-insets יש קשר מיוחד לשלבים של Jetpack Compose.

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