פריסות קנוניות הן פריסות מוכחות וגמישות שמספקות חוויית משתמש אופטימלית במגוון גורמי צורה.
הפריסות הקנוניות תומכות בטלפונים עם מסך קטן, בטאבלטים, במכשירים מתקפלים ובמכשירי ChromeOS. הפריסות מגיעות מהנחיות של עיצוב Material Design, שהן אסתטיות וגם פונקציונליות.
מסגרת Android כוללת רכיבים ייעודיים שמאפשרים הטמעה פשוטה ואמינה של הפריסות.
הפריסות הקנוניות יוצרות ממשקי משתמש מרתקים ופרודוקטיביים, שמהווים את הבסיס לאפליקציות מעולות.
אם אתם כבר מכירים את הפריסות הקנוניות של אפליקציות מותאמות, אבל לא בטוחים באילו ממשקי Android API כדאי להשתמש, תוכלו לעבור לקטע רלוונטיות כדי לקבל עזרה בבחירת הפריסה המתאימה לתרחישים לדוגמה של האפליקציה שלכם.
רשימה ופירוט
הפריסה של רשימת פרטים מאפשרת למשתמשים לעיין ברשימות של פריטים שכוללים מידע תיאורי, הסברים או מידע משלים אחר, כלומר פרטי הפריט.
הפריסה מחלקת את חלון האפליקציה לשני חלונות זה לצד זה: אחד לרשימת הפריטים והשני לפרטי הפריטים. המשתמשים בוחרים פריטים מהרשימה כדי להציג את פרטי הפריט. קישורי עומק בפרטי האירוע חושפים תוכן נוסף בחלונית הפרטים.
תצוגות ברוחב מורחב (מידע נוסף זמין במאמר בנושא שימוש בסיווגים של חלונות) להצגת הרשימה ולפרטים בו-זמנית. בחירה של פריט ברשימה מעדכנת את חלונית הפרטים כדי להציג את התוכן הקשור של הפריט שנבחר.
במסכים בגודל בינוני ובגודל קומפקטי מוצגת הרשימה או הפרטים, בהתאם לאינטראקציה של המשתמש עם האפליקציה. כשמוצגת רק הרשימה, בחירה בפריט ברשימה מציגה את הפרטים במקום הרשימה. כשרק הפרטים גלויים, לחיצה על לחצן החזרה לאחור תציג מחדש את הרשימה.
שינויים בתצורה, כמו שינויים בכיוון המכשיר או שינויים בגודל החלון של האפליקציה, יכולים לשנות את סיווג גודל החלון של המסך. פריסת רשימה ופרטים פועלת בהתאם, תוך שמירה על מצב האפליקציה:
- אם התצוגה ברוחב מורחב שבה מוצגות גם חלונית הרשימה וגם חלונית הפרטים מתכווצת לרוחב בינוני או קומפקטי, חלונית הפרטים נשארת גלויה וחלונית הרשימה מוסתרת
- אם בתצוגה ברוחב בינוני או קומפקטי רואים רק את חלונית הפרטים וסיווג החלון מתרחב, הרשימה והפרטים מוצגים יחד, והרשימה מציינת שהפריט התואם לתוכן שבחלונית הפרטים נבחר
- אם במסך ברוחב בינוני או קומפקטי מוצגת רק חלונית הרשימה, והיא מורחבת, הרשימה וחלונית פרטים עם placeholder מוצגות יחד
התצוגה 'רשימת פרטים' מתאימה לאפליקציות שליחת הודעות, לאפליקציות לניהול אנשי קשר, לדפדפני קבצים או לכל אפליקציה שבה אפשר לארגן את התוכן כרשימה של פריטים שמציגים מידע נוסף.
הטמעה
אפשר ליצור פריסה של רשימת פרטים באמצעות מגוון טכנולוגיות, כולל Compose, תצוגות והטמעת פעילות (באפליקציות מדור קודם). בקטע רלוונטיות מוסבר איך להחליט איזו טכנולוגיה מתאימה ביותר לאפליקציה שלכם.
הספרייה SlidingPaneLayout מיועדת להטמעה של פריסות של רשימות עם פרטים על סמך תצוגות או קטעים.
קודם כול, מגדירים רכיב SlidingPaneLayout כרכיב הבסיס של הפריסה ב-XML.
בשלב הבא מוסיפים את שני רכיבי הצאצא – תצוגות או קטעים – שמייצגים את הרשימה ואת תוכן הפרטים.
להטמיע מתודולוגיית תקשורת להעברת נתונים בין תצוגות של פרטי רשימה או מקטעים. מומלץ להשתמש ב-ViewModel כי הוא יכול לאחסן לוגיקה עסקית ולשרוד שינויים בהגדרות.
SlidingPaneLayout קובע באופן אוטומטי אם להציג את הרשימה והפרטים יחד או בנפרד. בחלון שיש בו מספיק מקום אופקי כדי לכלול את שניהם, הרשימה והפרטים מופיעים זה לצד זה. בחלון שבו אין מספיק מקום, המערכת מציגה את הרשימה או את הפרטים, בהתאם לאינטראקציה של המשתמש עם האפליקציה.
להטמעה לדוגמה, ראו רשימה מפורטת עם חלונית הזזה.
הטמעת פעילות
אפשר להשתמש בהטמעת פעילויות כדי לאפשר לאפליקציות מדור קודם עם פעילויות מרובות להציג שתי פעילויות זו לצד זו על אותו מסך או בערימה (אחת מהן מציגה בשכבת-על את השנייה). אם באפליקציה שלכם הרשימה והפרטים של הפריסה 'רשימה-פרטים' מוטמעים בפעילויות נפרדות, הטמעת הפעילות מאפשרת ליצור פריסה מסוג 'רשימה-פרטים' עם שינוי קוד מינימלי או ללא שינוי קוד בכלל.
כדי להטמיע הטמעת פעילות, מציינים חלוקה של חלון המשימות באמצעות קובץ תצורה של XML. הפיצול מגדיר את הפעילות הראשית שמפעילה את הפיצול ואת הפעילות המשנית. מציינים רוחב תצוגה מינימלי לפיצול באמצעות נקודות העצירה של סיווג גודל החלון. כשרוחב התצוגה יורד מתחת לנקודת ההפסקה המינימלית, הפעילויות מוצגות אחת מעל השנייה. לדוגמה, אם רוחב המסך המינימלי הוא 600dp, הפעילויות יוצגו אחת מעל השנייה במסכים קומפקטיים, אבל זה לצד זה במסכים בינוניים ובמסכים מורחבים.
הטמעת פעילות נתמכת ב-Android 12L (רמת API 32) ואילך, אבל יכול להיות שהיא תהיה זמינה גם ברמות API נמוכות יותר אם יצרני המכשירים יטמיעו אותה. כשהטמעת הפעילות לא זמינה במכשיר, התנהגות ברירת המחדל גורמת לכך שהפעילות ברשימה או הפעילות המפורטת יאכלסו את כל חלון האפליקציה על סמך האינטראקציה של המשתמש עם האפליקציה.
מידע נוסף זמין במאמר הטמעת פעילות.
דוגמה להטמעה מפורטת זמינה בדוגמה רשימת פרטים עם הטמעת פעילות.
פיד
בפריסת פיד, רכיבי תוכן מקבילים מסודרים ברשת שניתן להגדיר, כדי לאפשר צפייה מהירה ונוחה בכמות גדולה של תוכן.
הגודל והמיקום יוצרים קשרים בין רכיבי התוכן.
כדי ליצור קבוצות תוכן, צריך להגדיר רכיבים באותו גודל ולהציב אותם יחד. כדי למשוך תשומת לב לרכיבים, אפשר להגדיל אותם בהשוואה לרכיבים בסביבה.
כרטיסים ורשימות הם רכיבים נפוצים של פריסות של פידים.
פריסת הפיד תומכת במסכים כמעט בכל גודל, כי התצוגה יכולה להתאים מעמודה אחת לגלילה לעמודה מרובת לגלילה של תוכן.
פידים מתאימים במיוחד לאפליקציות של חדשות ומדיה חברתית.
הטמעה
RecyclerView מאפשרת להציג ביעילות מספר גדול של פריטים בעמודה אחת. GridLayoutManager מאפשרת להציג את הפריטים בתצוגת רשת, ומאפשרת להגדיר את הגדלים והרוחב של הפריטים.
מגדירים את העמודות של הרשת בהתאם לגודל של אזור התצוגה הזמין כדי להגדיר את הרוחב המינימלי המורשה לפריטים.
אפשר לשנות את אסטרטגיית ה-span שמוגדרת כברירת מחדל ב-GridLayoutManager, שהיא span אחד לכל פריט, על ידי יצירת SpanSizeLookup בהתאמה אישית. אפשר לשנות את הרוחב כדי להדגיש פריטים מסוימים על פני פריטים אחרים.
במסכים ברוחב קומפקטי שיש בהם מספיק מקום לעמודה אחת בלבד, משתמשים ב-LinearLayoutManager במקום ב-GridLayoutManager.
דוגמה להטמעה מופיעה בדוגמה פיד עם צפיות.
חלונית תמיכה
פריסה של חלונית תומכת מאפשרת לארגן את תוכן האפליקציה באזורי תצוגה ראשיים ומשניים.
אזור התצוגה הראשי תופס את רוב חלון האפליקציה (בדרך כלל כשני שלישים) ומכיל את התוכן הראשי. אזור התצוגה המשני הוא חלונית שתופסת את החלק שנותר בחלון האפליקציה ומציגה תוכן שתומך בתוכן הראשי.
פריסות של חלוניות תומכות פועלות היטב במסכים רחבים (ראו שימוש בכיתות בגודל חלון) בכיוון לרוחב. אם התוכן ניתן להתאמה לשטח תצוגה צר יותר, או אם התוכן הנוסף יהיה מוסתר בהתחלה בגיליון תחתון או בגיליון צדדי שאפשר לגשת אליו באמצעות שליטה, כמו תפריט או לחצן, יוצג תמיכה בהצגת אזור התצוגה הראשי או המשני.
ההבדל בין פריסה של חלונית תומכת לבין פריסה של רשימה עם פרטים הוא ביחס בין התוכן הראשי לתוכן המשני. התוכן בחלונית המשנית רלוונטי רק ביחס לתוכן הראשי. לדוגמה, חלון כלי תומך בחלונית לא רלוונטי בפני עצמו. עם זאת, התוכן המשלים בחלונית הפרטים של פריסה מסוג רשימה עם פרטים הוא בעל משמעות גם בלי התוכן הראשי, למשל התיאור של מוצר מכרטיס מוצר.
תרחישים לדוגמה לשימוש בחלונית תמיכה:
- אפליקציות פרודוקטיביות: מסמך או גיליון אלקטרוני עם תגובות של בודקים בחלונית תמיכה
- אפליקציות מדיה: סרטון בסטרימינג עם רשימת סרטונים קשורים בחלונית תומכת, או הצגה של אלבום מוזיקה עם פלייליסט
- אפליקציות חיפוש ומידע: טופס להזנת שאילתות עם תוצאות בחלונית תומכת
הטמעה
אפשר להטמיע פריסה של חלונית תומכת באמצעות פריסה מסייעת, כמו LinearLayout או ConstraintLayout. מגדירים את סיווג הגדלים של החלונות, שמחלקים את שטח התצוגה האופקית שזמין לאפליקציה שלכם לשלוש קטגוריות: קומפקטית (< 600dp), בינונית (>= 600dp) ומורחבת (>= 840dp).
לכל סיווג של גודל חלון, צריך להגדיר את הפריסות באופן הבא:
- קומפקטית: בתיקייה
layoutשל משאבי האפליקציה, יש למקם תוכן מציג את החלונית התומכת מתחת לתוכן הראשי או בתוך גיליון תחתון - אמצעי הגעה לאתר: בתיקייה
layout-w600dp, יש לספק תוכן בחלונית תומכת שמובילה לתוכן הראשי ולרינדור של חלוניות, זה לצד זה, פיצול של שטח התצוגה האופקי באופן שווה - מורחבת: בתיקייה
layout-w840dp, יש לכלול תוכן בחלונית תומכת שמובילה לתוכן הראשי ולהצגת חלוניות שתומכות בהצגה זה לצד זה; עם זאת, החלונית התומכת תופסת רק 30% מהשטח האופקי, ומשאירים את 70% הנותרים לתוכן הראשי
משתמשים ב-ViewModel לתקשורת בין התוכן הראשי לבין החלונית התומכת, בין אם באמצעות תצוגות, קטעים או שילוב שלהם.
דוגמאות להטמעה:
תחולה
הפריסה הקנונית יוצרת מצגות מרובות של תוכן כדי לגשת אליהן בקלות ולחקור לעומק. תרשים הזרימה הבא יעזור לכם לקבוע איזו אסטרטגיית פריסה והטמעה הכי מתאימה לתרחישים לדוגמה של האפליקציה שלכם.
לדוגמאות של הפריסות הקנוניות שהוטמעו בסוגים שונים של אפליקציות, אפשר לעיין בגלריית המסך הגדול.
מקורות מידע נוספים
- Material Design – פריסות קנוניות