עיצוב מקצה לקצה

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

איור 1. צד שמאל. אפליקציה שלא ממלאת את המסך. בסדר. אפליקציה שמוגדרת בתצוגה מקצה לקצה.

חטיפות דסקית

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

איך לצייר את התוכן מאחורי שורת הסטטוסים

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

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

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

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

שיקולים לגבי שורת הסטטוס

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

תוכן לגלילה

סרחי האפליקציות העליונים צריכים להתכווץ בזמן הגלילה. איך מקפלים את TopAppBar ב-Material 3

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

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

  • אם רלוונטי, אפשר להסתמך על ההגנה האוטומטית של TopAppBar ב-Material 3 בזמן גלילה.
  • אפשר ליצור רכיב מותאם אישית עם אלפא של 60% או להשתמש ב-GradientProtection בתצוגות.
איור 3. אפליקציה עם תצוגה מפורטת של תנועות מודגשת בירוק.

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

הגנה על שינוי הדרגתי שלא תואם לרקע של כל חלונית
יש הגנה על שינוי הדרגתי (gradient) שתואמת לרקע של כל חלונית.

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

איור 4. סרגל סטטוס שקוף בחלונית ההזזה לניווט. בתמונה הזו מוצגת הגנה על שורת הסטטוס בחלונית הניווט, אבל לא באפליקציה.

אין להוסיף שכבות של הגנות על שורת המצב, למשל, להשתמש גם בהגנה המובנית של Material 3 TopAppBar וגם בהגנה מותאמת אישית.

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

תוכן לגלילה

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

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

מגרעות במסך

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

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

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

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

חשוב לוודא שקרוסלות אופקיות נכנסות לחור שבמסך.

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

איך תומכים בחלקי מסך חתוכים ב-Compose וב-Views

הנחיות נוספות

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

דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן.‏ Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.

עדכון אחרון: 2025-02-18 (שעון UTC).