פריסות קנוניות הן פריסות מוכחות וגמישות שמספקות חוויית משתמש אופטימלית במגוון גורמי צורה.
הפריסות הקנוניות תומכות בטלפונים עם מסך קטן, בטאבלטים, במכשירים מתקפלים ובמכשירי ChromeOS. הפריסות מגיעות מהנחיות של עיצוב Material Design, שהן אסתטיות וגם פונקציונליות.
מסגרת Android כוללת רכיבים ייעודיים שמאפשרים הטמעה פשוטה ואמינה של הפריסות.
הפריסות הקנוניות יוצרות ממשקי משתמש מרתקים ופרודוקטיביים, שמהווים את הבסיס לאפליקציות מעולות.
רשימה ופירוט
הפריסה של רשימת פרטים מאפשרת למשתמשים לעיין ברשימות של פריטים שכוללים מידע תיאורי, הסברים או מידע משלים אחר, כלומר פרטי הפריט.
הפריסה מחלקת את חלון האפליקציה לשני חלונות זה לצד זה: אחד לרשימת הפריטים והשני לפרטי הפריטים. המשתמשים בוחרים פריטים מהרשימה כדי להציג את פרטי הפריט. קישורי עומק בפרטי האירוע חושפים תוכן נוסף בחלונית הפרטים.
תצוגות ברוחב מורחב (מידע נוסף זמין במאמר בנושא שימוש בסיווגים של חלונות) להצגת הרשימה ולפרטים בו-זמנית. בחירה של פריט ברשימה מעדכנת את חלונית הפרטים כדי להציג את התוכן הקשור של הפריט שנבחר.
במסכים בגודל בינוני ובגודל קומפקטי מוצגת הרשימה או הפרטים, בהתאם לאינטראקציה של המשתמש עם האפליקציה. כשמוצגת רק הרשימה, בחירה בפריט ברשימה מציגה את הפרטים במקום הרשימה. כשרק הפרטים גלויים, לחיצה על לחצן החזרה לאחור תציג מחדש את הרשימה.
שינויים בתצורה, כמו שינויים בכיוון המכשיר או שינויים בגודל החלון של האפליקציה, יכולים לשנות את סיווג גודל החלון של המסך. פריסת רשימה ופרטים פועלת בהתאם, תוך שמירה על מצב האפליקציה:
- אם התצוגה ברוחב מורחב שבה מוצגות גם חלונית הרשימה וגם חלונית הפרטים מתכווצת לרוחב בינוני או קומפקטי, חלונית הפרטים נשארת גלויה וחלונית הרשימה מוסתרת
- אם בתצוגה ברוחב בינוני או קומפקטי רואים רק את חלונית הפרטים וסיווג החלון מתרחב, הרשימה והפרטים מוצגים יחד, והרשימה מציינת שהפריט התואם לתוכן שבחלונית הפרטים נבחר
- אם במסך ברוחב בינוני או קומפקטי מוצגת רק חלונית הרשימה, והיא מורחבת, הרשימה וחלונית פרטים עם placeholder מוצגות יחד
התצוגה 'רשימת פרטים' מתאימה לאפליקציות שליחת הודעות, לאפליקציות לניהול אנשי קשר, לדפדפני קבצים או לכל אפליקציה שבה אפשר לארגן את התוכן כרשימה של פריטים שמציגים מידע נוסף.
הטמעה
The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).
To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.
When showing just the detail pane on small window sizes, add a BackHandler
to remove the detail pane and display just the list pane. The BackHandler is
not part of the overall app navigation since the handler is dependent on the
window size class and selected detail state.
For an example implementation, see the List-detail with Compose sample.
פיד
בפריסת פיד, רכיבי תוכן מקבילים מסודרים ברשת שניתן להגדיר, כדי לאפשר צפייה מהירה ונוחה בכמות גדולה של תוכן.
הגודל והמיקום יוצרים קשרים בין רכיבי התוכן.
כדי ליצור קבוצות תוכן, צריך להגדיר רכיבים באותו גודל ולהציב אותם יחד. כדי למשוך תשומת לב לרכיבים, אפשר להגדיל אותם בהשוואה לרכיבים בסביבה.
כרטיסים ורשימות הם רכיבים נפוצים של פריסות של פידים.
פריסת הפיד תומכת במסכים כמעט בכל גודל, כי התצוגה יכולה להתאים מעמודה אחת לגלילה לעמודה מרובת לגלילה של תוכן.
פידים מתאימים במיוחד לאפליקציות של חדשות ומדיה חברתית.
הטמעה
פיד מורכב ממספר גדול של רכיבי תוכן בתוך מאגר גלילה אנכי שמאורגן בתצוגת רשת. רשימות מדורגת מעבדות ביעילות מספר גדול של פריטים בעמודות או בשורות. כשמשתמשים ברשתות עגולות, המערכת מעבדת פריטים ברשת, שתומכת בהגדרות של מידות הפריטים וטווחי התצוגה שלהן.
מגדירים את העמודות של פריסת התצוגה לפי אזור התצוגה הזמין כדי להגדיר את הרוחב המינימלי המורשה לפריטי התצוגה. כשמגדירים את הפריטים בחלונית, אפשר לשנות את רוחב העמודות כדי להדגיש פריטים מסוימים על פני פריטים אחרים.
לכותרות של קטעים, למחיצות או לפריטים אחרים שתופסים את כל הרוחב של הפיד, תוכלו להשתמש ב-maxLineSpan כדי תופסים את כל הרוחב של הפריסה.
במסכים בעלי רוחב קומפקטי שאין בהם מספיק מקום להצגת יותר מעמודה אחת, הלחצן LazyVerticalGrid מתנהג בדיוק כמו הלחצן LazyColumn.
דוגמה להטמעה מפורטת במאמר פיד עם Compose.
חלונית תמיכה
פריסה של חלונית תומכת מאפשרת לארגן את תוכן האפליקציה באזורי תצוגה ראשיים ומשניים.
אזור התצוגה הראשי תופס את רוב חלון האפליקציה (בדרך כלל כשני שלישים) ומכיל את התוכן הראשי. אזור התצוגה המשני הוא חלונית שתופסת את החלק שנותר בחלון האפליקציה ומציגה תוכן שתומך בתוכן הראשי.
פריסות של חלוניות תומכות פועלות היטב במסכים רחבים (ראו שימוש בכיתות בגודל חלון) בכיוון לרוחב. אם התוכן ניתן להתאמה לשטח תצוגה צר יותר, או אם התוכן הנוסף יהיה מוסתר בהתחלה בגיליון תחתון או בגיליון צדדי שאפשר לגשת אליו באמצעות שליטה, כמו תפריט או לחצן, יוצג תמיכה בהצגת אזור התצוגה הראשי או המשני.
ההבדל בין פריסה של חלונית תומכת לבין פריסה של רשימה עם פרטים הוא ביחס בין התוכן הראשי לתוכן המשני. התוכן בחלונית המשנית רלוונטי רק ביחס לתוכן הראשי. לדוגמה, חלון כלי תומך בחלונית לא רלוונטי בפני עצמו. עם זאת, התוכן המשלים בחלונית הפרטים של פריסה מסוג רשימה עם פרטים הוא בעל משמעות גם בלי התוכן הראשי, למשל התיאור של מוצר מכרטיס מוצר.
תרחישים לדוגמה לשימוש בחלונית תמיכה:
- אפליקציות פרודוקטיביות: מסמך או גיליון אלקטרוני עם תגובות של בודקים בחלונית תמיכה
- אפליקציות מדיה: סרטון בסטרימינג עם רשימת סרטונים קשורים בחלונית תומכת, או הצגה של אלבום מוזיקה עם פלייליסט
- אפליקציות חיפוש ומידע: טופס להזנת שאילתות עם תוצאות בחלונית תומכת
הטמעה
Compose supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.
Hoist all state, including current window size class and information related to the data in the main content and supporting content.
For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.
For an example implementation, see the Supporting pane with Compose sample.
מקורות מידע נוספים
- Material Design – פריסות קנוניות