פריסות קנוניות הן פריסות מוכחות וגמישות שמספקות חוויית משתמש אופטימלית במגוון גורמי צורה.
הפריסות הקנוניות תומכות בטלפונים עם מסך קטן, בטאבלטים, במכשירים מתקפלים ובמכשירי ChromeOS. הפריסות מגיעות מהנחיות של עיצוב Material Design, שהן אסתטיות וגם פונקציונליות.
מסגרת Android כוללת רכיבים ייעודיים שמאפשרים הטמעה פשוטה ואמינה של הפריסות.
הפריסות הקנוניות יוצרות ממשקי משתמש מרתקים ופרודוקטיביים, שמהווים את הבסיס לאפליקציות מעולות.
רשימה ופירוט
הפריסה של רשימת פרטים מאפשרת למשתמשים לעיין ברשימות של פריטים שכוללים מידע תיאורי, הסברים או מידע משלים אחר, כלומר פרטי הפריט.
הפריסה מחלקת את חלון האפליקציה לשני חלונות זה לצד זה: אחד לרשימת הפריטים והשני לפרטי הפריטים. המשתמשים בוחרים פריטים מהרשימה כדי להציג את פרטי הפריט. קישורי עומק בפרטי האירוע חושפים תוכן נוסף בחלונית הפרטים.
תצוגות ברוחב מורחב (מידע נוסף זמין במאמר בנושא שימוש בסיווגים של חלונות) להצגת הרשימה ולפרטים בו-זמנית. בחירה של פריט ברשימה מעדכנת את חלונית הפרטים כדי להציג את התוכן הקשור של הפריט שנבחר.
במסכים בגודל בינוני ובגודל קומפקטי מוצגת הרשימה או הפרטים, בהתאם לאינטראקציה של המשתמש עם האפליקציה. כשמוצגת רק הרשימה, בחירה בפריט ברשימה מציגה את הפרטים במקום הרשימה. כשרק הפרטים גלויים, לחיצה על לחצן החזרה לאחור תציג מחדש את הרשימה.
שינויים בתצורה, כמו שינויים בכיוון המכשיר או שינויים בגודל החלון של האפליקציה, יכולים לשנות את סיווג גודל החלון של המסך. פריסת רשימה ופרטים פועלת בהתאם, תוך שמירה על מצב האפליקציה:
- אם התצוגה ברוחב מורחב שבה מוצגות גם חלונית הרשימה וגם חלונית הפרטים מתכווצת לרוחב בינוני או קומפקטי, חלונית הפרטים נשארת גלויה וחלונית הרשימה מוסתרת
- אם בתצוגה ברוחב בינוני או קומפקטי רואים רק את חלונית הפרטים וסיווג החלון מתרחב, הרשימה והפרטים מוצגים יחד, והרשימה מציינת שהפריט התואם לתוכן שבחלונית הפרטים נבחר
- אם במסך ברוחב בינוני או קומפקטי מוצגת רק חלונית הרשימה, והיא מורחבת, הרשימה וחלונית פרטים עם placeholder מוצגות יחד
התצוגה 'רשימת פרטים' מתאימה לאפליקציות שליחת הודעות, לאפליקציות לניהול אנשי קשר, לדפדפני קבצים או לכל אפליקציה שבה אפשר לארגן את התוכן כרשימה של פריטים שמציגים מידע נוסף.
הטמעה
הפרדיגמה הצהרתית של Compose היא תומכת בלוגיקה של גודל חלון, שקובעת אם להציג את הרשימה ואת חלוניות הפרטים בו-זמנית (כשמרחיבים את סיווג הגודל של חלון הרוחב), או רק את הרשימה או את חלונית הפרטים (כשסיווג הגודל של חלון הרוחב הוא בינוני או קומפקטי).
כדי להבטיח זרימת נתונים חד-כיוונית, מרימים את כל המצבים, כולל סיווג גודל החלון הנוכחי ופרטי פריט הרשימה שנבחר (אם יש כזה), כדי שלכל הרכיבים הניתנים לשילוב תהיה גישה לנתונים והם יוכלו לבצע רינדור בצורה נכונה.
כשמציגים רק את חלונית הפרטים בחלונות קטנים, מוסיפים BackHandler כדי להסיר את חלונית הפרטים ולהציג רק את חלונית הרשימה. ה-BackHandler לא נכלל בתפריט הניווט הכללי של האפליקציה, כי הטיפול תלוי בכיתה של גודל החלון ובמצב הפרטים שנבחר.
להטמעה לדוגמה, אפשר לראות את הדוגמה List-detail with Compose.
פיד
בפריסת פיד, רכיבי תוכן מקבילים מסודרים ברשת שניתן להגדיר, כדי לאפשר צפייה מהירה ונוחה בכמות גדולה של תוכן.
הגודל והמיקום יוצרים קשרים בין רכיבי התוכן.
כדי ליצור קבוצות תוכן, צריך להגדיר רכיבים באותו גודל ולהציב אותם יחד. כדי למשוך תשומת לב לרכיבים, אפשר להגדיל אותם בהשוואה לרכיבים בסביבה.
כרטיסים ורשימות הם רכיבים נפוצים של פריסות של פידים.
פריסת הפיד תומכת במסכים כמעט בכל גודל, כי התצוגה יכולה להתאים מעמודה אחת לגלילה לעמודה מרובת לגלילה של תוכן.
פידים מתאימים במיוחד לאפליקציות של חדשות ומדיה חברתית.
הטמעה
Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。
根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。
对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。
如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。
如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。
חלונית תמיכה
פריסה של חלונית תומכת מאפשרת לארגן את תוכן האפליקציה באזורי תצוגה ראשיים ומשניים.
אזור התצוגה הראשי תופס את רוב חלון האפליקציה (בדרך כלל כשני שלישים) ומכיל את התוכן הראשי. אזור התצוגה המשני הוא חלונית שתופסת את החלק שנותר בחלון האפליקציה ומציגה תוכן שתומך בתוכן הראשי.
פריסות של חלוניות תומכות פועלות היטב במסכים רחבים (ראו שימוש בכיתות בגודל חלון) בכיוון לרוחב. אם התוכן ניתן להתאמה לשטח תצוגה צר יותר, או אם התוכן הנוסף יהיה מוסתר בהתחלה בגיליון תחתון או בגיליון צדדי שאפשר לגשת אליו באמצעות שליטה, כמו תפריט או לחצן, יוצג תמיכה בהצגת אזור התצוגה הראשי או המשני.
ההבדל בין פריסה של חלונית תומכת לבין פריסה של רשימה עם פרטים הוא ביחס בין התוכן הראשי לתוכן המשני. התוכן בחלונית המשנית רלוונטי רק ביחס לתוכן הראשי. לדוגמה, חלון כלי תומך בחלונית לא רלוונטי בפני עצמו. עם זאת, התוכן המשלים בחלונית הפרטים של פריסה מסוג רשימה עם פרטים הוא בעל משמעות גם בלי התוכן הראשי, למשל התיאור של מוצר מכרטיס מוצר.
תרחישים לדוגמה לשימוש בחלונית תמיכה:
- אפליקציות פרודוקטיביות: מסמך או גיליון אלקטרוני עם תגובות של בודקים בחלונית תמיכה
- אפליקציות מדיה: סרטון בסטרימינג עם רשימת סרטונים קשורים בחלונית תומכת, או הצגה של אלבום מוזיקה עם פלייליסט
- אפליקציות חיפוש ומידע: טופס להזנת שאילתות עם תוצאות בחלונית תומכת
הטמעה
Compose תומך בלוגיקה של סיווג גודל חלון, שמאפשרת לכם לקבוע אם להציג את התוכן הראשי ואת התוכן התומך בו-זמנית או למקם את התוכן התומך במיקום חלופי.
העלאת כל המצב, כולל סיווג גודל החלון הנוכחי ומידע שקשור לנתונים בתוכן הראשי ובתוכן התומך.
במסכים בעלי רוחב קומפקטי, כדאי למקם את התוכן התומך מתחת לתוכן הראשי או בתוך גיליון תחתון. בפורמטים ברוחב בינוני ורחב, כדאי למקם את התוכן התומך לצד התוכן הראשי, בגודל המתאים בהתאם לתוכן ולמרחב הזמין. בתמונות ברוחב בינוני, כדאי לפצל את שטח התצוגה באופן שווה בין התוכן הראשי לבין התוכן התומך. ברוחב מורחב, כדאי להקצות 70% מהמרחב לתוכן הראשי ו-30% לתוכן התומך.
דוגמה להטמעה מופיעה בדוגמה Supporting pane with Compose.
מקורות מידע נוספים
- Material Design – פריסות קנוניות