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

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

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

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

בדף הזה מוסבר איך להטמיע תמיכה במכשירים עם חתכים ב-Compose, כולל איך לעבוד עם אזור החתך – כלומר, הריבוע שמשמש כמסך מלא ומכיל את החתך.

ברירת המחדל

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

לדוגמה, כשמשתמשים ב-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
        }
    }
}
CutoutSnippets.kt

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

טיפול ידני בפרטי החיתוך

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

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

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

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

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

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

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

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

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

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

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

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