הגדרה של תצוגה מקצה לקצה

תצוגה מקצה לקצה מאפשרת לאפליקציה לצייר את ממשק המשתמש שלה מאחורי סרגלי המערכת – שורת הסטטוס, סרגל הכתוביות וסרגל הניווט – כדי ליצור חוויית משתמש סוחפת יותר. אם אתם מטרגטים מכשירים עם Android 15 (רמת API 35) ומעלה, התצוגה מקצה לקצה נאכפת כברירת מחדל.

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

‫1. הפעלת תצוגה מקצה לקצה

כדי להפעיל את התכונה 'מקצה לקצה' בגרסאות קודמות של Android, צריך להפעיל את enableEdgeToEdge() בשיטה Activity.onCreate():

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

כברירת מחדל, enableEdgeToEdge() הופך את סרגלי המערכת לשקופים, למעט במצב ניווט ב-3 כפתורים, שבו הוא משתמש בשכבת מסך שקופה למחצה בסרגל הניווט כדי לשפר את הניגודיות. הצבע של סמלי המערכת והמסך החצי שקוף מותאם לעיצוב הבהיר או הכהה של המערכת.

2. הגדרת windowSoftInputMode

מגדירים את android:windowSoftInputMode="adjustResize" ברשומה AndroidManifest.xml של הפעילות. ההגדרה הזו מאפשרת לאפליקציה לקבל שוליים פנימיים של IME, וכך להתאים את הפריסה עם ריפוד כשהמקלדת הווירטואלית מופיעה או נעלמת.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. איך מטפלים בחפיפות באמצעות תמונות ממוזערות

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

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

• שוליים פנימיים של סרגלי המערכת: מייצגים אזורים שבהם מוצגים סרגלי המערכת. כדאי להשתמש בהן כדי למנוע מצב שבו סרגלי המערכת מסתירים את ממשק המשתמש.
• שוליים פנימיים של מגרעת במסך: מייצגים אזורים שבהם יש מגרעת פיזית (כמו מגרעת של מצלמה) במסך המכשיר.

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

נושאים מתקדמים

כדאי להביא בחשבון את הדברים הבאים בתרחישי שימוש מתקדמים יותר מקצה לקצה.

מצב עשיר

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

val windowInsetsController =
    WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,

הצבעים והסמלים של סרגל המערכת

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

כדי לשנות את הסמלים בסרגל הסטטוס לבהירים או לכהים, משתמשים בWindowInsetsControllerCompat:

// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

הגנה על סרגל המערכת

‫enableEdgeToEdge() מספקת ברירת מחדל של סרגלי מערכת שקופים או שקופים למחצה, אבל יכול להיות שתצטרכו להתאים אותם אישית. כדי להחליט מתי להשתמש בסרגלים שקופים ומתי בסרגלים שקופים למחצה, כדאי לעיין בהנחיות לעיצוב סרגלי מערכת ב-Android ובהנחיות לעיצוב מקצה לקצה.

כדי להפוך את ניווט ב-3 כפתורים לשקוף לחלוטין במקום שקוף למחצה, אפשר להשבית את האכיפה של הניגודיות:

window.isNavigationBarContrastEnforced = false

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

תיבות דו-שיח

כדי להציג תיבות דו-שיח במסך מלא מקצה לקצה, קוראים ל-WindowCompat.enableEdgeToEdge בשיטת onStart() של תיבת הדו-שיח:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}