פריסות קנוניות הן פריסות מוכחות ורב-תכליתיות שמספקות חוויית משתמש אופטימלית במגוון גורמים צורניים.
הפריסות הקנוניות תומכות בטלפונים עם מסכים קטנים, בטאבלטים, במכשירים מתקפלים ובמכשירי 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 – פריסות קנוניות