גזירי גזירה ב'כתיבה'

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

דוגמה לחיתוך בפריסה לאורך
איור 1. דוגמה לחיתוך בפורמט 'לאורך'
דוגמה לחיתוך בפריסה לרוחב
איור 2. דוגמה לחיתוך בפריסה לרוחב

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

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

ברירת המחדל

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

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

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

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}

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

טיפול בפרטי המגרעת באופן ידני

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

ב-Compose, מומלץ להגדיר את windowLayoutInDisplayCutoutMode לערך default בעיצוב הכולל, ואז להשתמש ב-WindowInsets.displayCutout כדי לטפל בהוספות ברכיבי ה-Compose:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

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

לחלופין, אפשר להחיל את אותן הגדרות שמתוארות במסמכי העזרה בנושא חתימת חלון. לשם כך, מגדירים את נושא הפעילות android:windowLayoutInDisplayCutoutMode לאפשרות אחרת או את מאפיין החלון באמצעות window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. עם זאת, אחר כך אפשר להחיל את מצב החיתוך על פעילות שלמה, ואי אפשר לשלוט בו לכל תוכן קומפוזבילי בנפרד.

כדי לשמור על יחס הגובה-רוחב של רכיבי ה-Composable מסוימים, אבל לא של רכיבים אחרים, משתמשים ב-WindowInset.displayCutout. ה-API הזה מאפשר לכם לגשת למידע על החתך כשצריך.

שיטות מומלצות

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

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

בדיקת האופן שבו התוכן מוצג עם פריימים חתוכים

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

  1. מפעילים את אפשרויות למפתחים.
  2. במסך Developer options, גוללים למטה לקטע Drawing ובוחרים באפשרות Simulate a display with a cutout.
  3. בוחרים את סוג החיתוך.
    סימולציה של מגרעת במסך באמולטור
    איור 3. אפשר להשתמש באפשרויות למפתחים כדי לבדוק איך התוכן מוצג.