הצגת התוכן מקצה לקצה בתצוגות

כדאי לנסות את הכתיבה

‫Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ל-Android. איך עובדים עם תצוגה מקצה לקצה במצב כתיבה

תצוגה מקצה לקצה ב-Compose ‏→

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

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

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

איור 1. סרגלי המערכת בפריסה מקצה לקצה.

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

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

איור 2. דוגמה לתמונות שמוצגות מאחורי שורת הסטטוס.

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

הפעלת תצוגה מקצה לקצה

אם האפליקציה מטרגטת ל-SDK בגרסה 35 ואילך, התכונה 'מקצה לקצה' מופעלת אוטומטית במכשירי Android 15 ומעלה.

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

Kotlin

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

Java

 @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowCompat.enableEdgeToEdge(getWindow());
        ...
      }

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

כדי להפעיל תצוגה מקצה לקצה באפליקציה בלי להשתמש בפונקציה enableEdgeToEdge(), אפשר לעיין במאמר בנושא הגדרה ידנית של תצוגה מקצה לקצה.

שימוש בתמונות ממוזערות כדי לטפל בחפיפות

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

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

סוגי השוליים הפנימיים שרלוונטיים לתצוגה מקצה לקצה של האפליקציה:

• שוליים פנימיים של סרגלי המערכת: הכי מתאים לתצוגות שאפשר להקיש עליהן ושסרגלי המערכת לא יכולים להסתיר אותן.

• Display cutout insets: for areas where there may be a screen cutout due to the shape of the device.

• שוליים פנימיים של תנועות במערכת: לאזורים של תנועות לניווט שמשמשים את המערכת וקודמים לאפליקציה שלכם.

שוליים פנימיים של סרגלי המערכת

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

לדוגמה, כפתור הפעולה הצף (FAB) באיור 3 מוסתר באופן חלקי על ידי סרגל הניווט:

איור 3. סרגל ניווט שחופף ל-FAB בפריסה מקצה לקצה.

כדי להימנע מחפיפה ויזואלית כזו במצב תנועות או במצב לחצנים, אפשר להגדיל את השוליים של התצוגה באמצעות getInsets(int) עם WindowInsetsCompat.Type.systemBars().

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

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left
      bottomMargin = insets.bottom
      rightMargin = insets.right
  }

  // Return CONSUMED if you don't want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

אם מיישמים את הפתרון הזה על הדוגמה שמוצגת באיור 3, לא נוצר חפיפה ויזואלית במצב לחצן, כמו שמוצג באיור 4:

איור 4. פתרון בעיה של חפיפה ויזואלית במצב כפתור.

אותו עיקרון חל על מצב ניווט באמצעות תנועות, כפי שמוצג באיור 5:

איור 5. פתרון בעיה של חפיפה חזותית במצב ניווט באמצעות תנועות.

שוליים פנימיים של מגרעת במסך

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

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

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

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

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

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

שוליים פנימיים של תנועות מובנות במערכת

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

איור 6. שוליים פנימיים של תנועות מובנות במערכת.

בדומה ל-insets של סרגל המערכת, אפשר למנוע חפיפה של ה-insets של תנועות המערכת באמצעות getInsets(int) עם WindowInsetsCompat.Type.systemGestures().

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

ב-Android מגרסה 10 ואילך, אזורי ה-inset של תנועות המערכת כוללים inset תחתון לתנועת הבית, ו-inset שמאלי וימני לתנועות החזרה:

איור 7. מידות של שוליים פנימיים של תנועות מובנות במערכת.

בדוגמת הקוד הבאה אפשר לראות איך מטמיעים את המאפיין systemGestureInsets:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

רכיבי Material

רכיבי Material רבים מבוססי-תצוגות ב-Android (com.google.android.material) מטפלים באופן אוטומטי בתוספות, כולל BottomAppBar,‏ BottomNavigationView,‏ NavigationRailView ו-NavigationView.

עם זאת, AppBarLayout לא מטפל אוטומטית בתוספות. מוסיפים android:fitsSystemWindows="true" כדי לטפל בתוספות העליונות.

כאן אפשר לקרוא איך מטפלים ב-insets באמצעות Material Components ב-Compose.

שליחת חריצים שתואמים לדורות קודמים

כדי למנוע את שליחת המרווחים הפנימיים לתצוגות של ילדים ולמנוע ריווח יתר, אפשר להשתמש בקבוע WindowInsetsCompat.CONSUMED כדי להשתמש במרווחים הפנימיים. עם זאת, במכשירים שמופעלת בהם Android 10 (API ברמה 29 ומטה), לא מתבצעת שליחה של שוליים לאחים אחרי קריאה ל-WindowInsetsCompat.CONSUMED, מה שיכול לגרום לחפיפה ויזואלית לא מכוונת.

איור 8. דוגמה לשיבוץ שבור של שליחת בקשות. השוליים הפנימיים לא מועברים לתצוגות מקבילות אחרי ש-ViewGroup 1 צורך שוליים פנימיים ב-Android 10 (רמת API‏ 29) ובגרסאות קודמות, ולכן TextView 2 חופף לסרגל הניווט של המערכת. עם זאת, ב-Android 11 (רמת API‏ 30) ומעלה, השוליים הפנימיים מועברים לתצוגות אחיות כמו שצריך.

כדי לוודא שהשוליים הפנימיים נשלחים לרכיבים באותה רמה בכל גרסאות Android הנתמכות, צריך להשתמש ב-ViewGroupCompat#installCompatInsetsDispatch לפני שמשתמשים בשוליים הפנימיים. האפשרות הזו זמינה ב-AndroidX Core וב-Core-ktx 1.16.0-alpha01 ומעלה.

Kotlin

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

Java

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);

איור 9. תוקן באג שקשור לשליחת חריגות (inset) אחרי קריאה ל-ViewGroupCompat#installCompatInsetsDispatch.

מצב עשיר

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

Kotlin

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

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

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

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

סמלים בסרגל המידע

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

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

Kotlin

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Java

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

הגנה על סרגל המידע

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

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

יצירת סרגלי מערכת שקופים

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

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

יצירת סרגלי מערכת שקופים

כדי ליצור סרגל סטטוס שקוף למחצה:

1. צריך לעדכן את התלות ב-androidx-core לגרסה 1.16.0-beta01 ואילך
2. עוטפים את פריסת ה-XML בתגי androidx.core.view.insets.ProtectionLayout ומקצים מזהה.
3. גישה ל-ProtectionLayout באופן פרוגרמטי כדי להגדיר הגנות, תוך ציון הצד וGradientProtection לשורת הסטטוס.

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>
system_bar_protection.xml

findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                paneBackgroundColor
            )
        )
    )
SystemBarProtectionSnippet.kt

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

איור 1. הגנה הדרגתית של צבעים שונים.

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

• אם כבר יש לכם פריסה שמוקפת בתג ProtectionView, אתם יכולים להעביר תג ColorProtection או GradientProtection נוסף לשיטה setProtections. לפני שמבצעים את הפעולה הזו, חשוב לוודא שwindow.isNavigationBarContrastEnforced = false.
• אחרת, מגדירים את window.isNavigationBarContrastEnforced = true. אם האפליקציה שלכם מתקשרת enableEdgeToEdge, window.isNavigationBarContrastEnforced = true היא ברירת המחדל.

טיפים נוספים

טיפים נוספים לטיפול בתוספות.

הצגת תוכן בגלילה מקצה לקצה

כדי לוודא שהפריט האחרון ברשימה לא מוסתר על ידי סרגלי המערכת ב-RecyclerView או ב-NestedScrollView, צריך לטפל ב-insets ולהגדיר את clipToPadding ל-false.

בסרטון הבא מוצג RecyclerView עם תצוגה מקצה לקצה כשהיא מושבתת (מימין) ומופעלת (משמאל):

אפשר לראות דוגמה לקוד בקטע יצירת רשימות דינמיות באמצעות RecyclerView.

הצגת תיבות דו-שיח במסך מלא מקצה לקצה

כדי להציג את תיבת הדו-שיח במסך מלא מקצה לקצה, קוראים ל-enableEdgeToEdge ב-Dialog.

Kotlin

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

Java

public class MyAlertDialogFragment extends DialogFragment {
    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            Window window = dialog.getWindow();
            if (window != null) {
                WindowCompat.enableEdgeToEdge(window);
            }
        }
    }
    ...
}

מקורות מידע נוספים

מידע נוסף על מעבר מתצוגה רגילה לתצוגה מקצה לקצה

בלוגים

• טיפים לטיפול ב-Insets באכיפה מקצה לקצה ב-Android 15
• ‫WindowInsets — listeners to layouts

עיצוב

• סרגלי המערכת ב-Android
• עיצוב מקצה לקצה

מסמכי תיעוד אחרים

• מדריך להעברה של Chrome ב-Android מקצה לקצה

סרטונים

• בנייה לעתיד של Android
• ניווט באמצעות תנועות: שוליים פנימיים