תמיכה בגזירים במסך

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

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

‫Android תומך בחיתוכי מסך במכשירים עם Android מגרסה 9 (רמת API‏ 28) ומעלה. עם זאת, יצרני מכשירים יכולים גם לתמוך בחלקים חסרים במסך במכשירים עם Android מגרסה 8.1 ומטה.

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

תמונה שבה מוצגת דוגמה למגרעת במסך בחלק העליון המרכזי
איור 1. ‫1 מגרעת במסך.

בחירת האופן שבו האפליקציה מטפלת באזורים חתוכים

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

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

  • ‫LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: התוכן מוצג באזור המגרעת כשהמגרעת במסך כלולה בסרגל המערכת. אחרת, החלון לא חופף למגרעת במסך. לדוגמה, יכול להיות שתוכן יוצג בפורמט letterbox כשמציגים אותו בפריסה לרוחב. אם האפליקציה מטרגטת ל-SDK 35, הערך הזה מתפרש כ-ALWAYS לחלונות לא צפים.
  • ‫LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS: התוכן תמיד יכול להתרחב לאזורים של החלק החסר. אם האפליקציה מטרגטת ל-SDK 35 והיא פועלת במכשיר עם Android 15, זהו המצב היחיד שבו מותר להשתמש בחלונות לא צפים כדי להבטיח תצוגה מקצה לקצה.
  • ‫LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: התוכן מוצג באזור החיתוך גם במצב לאורך וגם במצב לרוחב. לא להשתמש באפשרות הזו לחלונות צפים. אם האפליקציה מטרגטת ל-SDK 35, הערך הזה מתפרש כ-ALWAYS לחלונות לא צפים.
  • ‫LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: התוכן אף פעם לא מוצג באזור החיתוך. אם האפליקציה מטרגטת SDK 35, הערך הזה מתפרש כ-ALWAYS עבור חלונות לא צפים.

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

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

בקטעים הבאים מתוארים מצבי החיתוך השונים בפירוט רב יותר.

התנהגות ברירת מחדל

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

אחרת, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT היא ברירת המחדל.

עיבוד תוכן באזורי המגרעת בצד הקצר

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

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

בתמונה הבאה מוצגת דוגמה לLAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES במכשיר במצב אנכי:

תמונה שבה מוצג תוכן שמוצג באזור החיתוך במצב לאורך
איור 2. רינדור התוכן באזור החיתוך במצב תצוגה לאורך.

בתמונה הבאה מוצגת דוגמה ל-LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES במכשיר במצב לרוחב:

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

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

חיתוך בפינה נחשב לחיתוך בצד הקצר:

תמונה שבה רואים מכשיר עם חיתוך בפינה
איור 4. מכשיר עם חיתוך פינתי.

לעולם לא להציג תוכן באזור המגרעת במסך

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

עם LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER, החלון אף פעם לא יכול לחפוף לאזור החיתוך.

דוגמה ל-LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER במצב אנכי:

תמונה שבה מוצג הפריסה LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER לאורך
איור 5. דוגמה של LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER להדגשת דיוקן.

דוגמה ל-LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER בפריסה לרוחב:

תמונה שבה מוצג LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER לרוחב
איור 6. דוגמה ל-LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER בפריסה לרוחב.

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

כשעובדים עם חיתוכי מסך, חשוב לזכור את הדברים הבאים:

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

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

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

  • אפשר להשתמש ב-View.getLocationInWindow() כדי לראות כמה מקום בחלון האפליקציה תופסת. אל תניחו שהאפליקציה משתמשת בכל החלון, ואל תשתמשו ב-View.getLocationOnScreen().

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

    תמונה שבה רואים תוכן שזז למעלה ולמטה במהלך מעברים.
    איור 8. דוגמה לתוכן שזז למעלה ולמטה במהלך מעברים.

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

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

  • כשמטפלים ב-MotionEvent, כדאי להשתמש ב-MotionEvent.getX() וב-MotionEvent.getY() כדי למנוע בעיות דומות בקואורדינטות. אין להשתמש ב-MotionEvent.getRawX() או ב-MotionEvent.getRawY().

בדיקה של אופן העיבוד של התוכן

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

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

  3. בוחרים את סוג החיתוך.

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

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