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

תצוגה מקצה לקצה מאפשרת לאפליקציה לצייר את ממשק המשתמש שלה מאחורי סרגלי המערכת – שורת הסטטוס, סרגל הכתוביות וסרגל הניווט – כדי ליצור חוויית משתמש סוחפת יותר. אם אתם מטרגטים מכשירים עם 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. טיפול בחפיפות באמצעות שוליים פנימיים

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

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

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

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

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

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

מצב עשיר

חלק מהתוכן, כמו סרטונים או מפות, נהנה מחוויה עשירה שבה סרגלי המערכת מוסתרים. אפשר להסתיר את סרגלי המערכת באמצעות 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) }
    }
    ...
}