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

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

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

חטיפות דסקית

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

הצגת התוכן מאחורי סרגלי המידע

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

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

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

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

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

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

תוכן בגלילה

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

מה מומלץ לעשות

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

מה מומלץ לעשות

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

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

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

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

מה אסור לעשות

הגנה מפני שיפוע שלא תואמת לרקע של כל חלונית

מה מומלץ לעשות

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

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

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

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

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

תוכן בגלילה

‫[BottomAppBar][10] אמור להתכווץ בזמן הגלילה באמצעות הפרמטר scrollBehavior.

מה מומלץ לעשות

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

מה מומלץ לעשות

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

עם זאת, צריך להשאיר את [NavigationBar]11 גלוי בזמן הגלילה כי אין לו פרמטר scrollBehavior.

מגרעות במסך

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

מה מומלץ לעשות

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

מה אסור לעשות

למקם רכיבים קריטיים של ממשק המשתמש בקצה המסך.

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

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

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

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

איך תומכים במגרעות במסך ב-Compose

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

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