פריסות קנוניות

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

הפריסות הקנוניות תומכות בטלפונים עם מסכים קטנים, בטאבלטים, במכשירים מתקפלים ובמכשירי ChromeOS. הפריסות מבוססות על ההנחיות של Material Design, והן אסתטיות ופונקציונליות.

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

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

רשימה ופירוט

פריסת רשימה עם פרטים מאפשרת למשתמשים לעיין ברשימות של פריטים שיש להם מידע תיאורי, הסברי או מידע נוסף אחר – פרטי הפריט.

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

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

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

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

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

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

הטמעה

הפרדיגמה הדקלרטיבית של Compose תומכת בלוגיקה של מחלקת גודל החלון שקובעת אם להציג את חלוניות הרשימה וחלונית הפרטים בו-זמנית (כשמחלקת גודל החלון ברוחב מורחבת) או רק את חלונית הרשימה או חלונית הפרטים (כשמחלקת גודל החלון ברוחב היא בינונית או קומפקטית).

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

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

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

הנה הטמעה מינימלית באמצעות ListDetailPaneScaffold:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}
CanonicalLayoutSamples.kt

הרכיבים העיקריים בדוגמה הזו:

• ‫rememberListDetailPaneScaffoldNavigator: יוצר רכיב ניווט לניהול הניווט בין חלוניות הרשימה והפרטים.
• ‫listPane: הצגת רשימת הפריטים.
• ‫detailPane: הצגת התוכן של פריט נבחר.

דוגמאות מפורטות להטמעה זמינות במאמרים הבאים:

• מדריך למפתחים בנושא יצירת פריסת רשימה ופירוט
• דוגמה ל-list-detail-compose

פיד

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

הגודל והמיקום יוצרים קשרים בין רכיבי התוכן.

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

כרטיסים ורשימות הם רכיבים נפוצים בפריסות של פידים.

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

פידים מתאימים במיוחד לאפליקציות של חדשות ורשתות חברתיות.

הטמעה

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

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

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

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

הנה הטמעה מינימלית באמצעות LazyVerticalGrid:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}
CanonicalLayoutSamples.kt

הסוד לפיד שמותאם לצרכים שלכם הוא ההגדרה columns. ‫GridCells.Adaptive(minSize = 180.dp) יוצר רשת שבה כל עמודה היא ברוחב של לפחות 180.dp. לאחר מכן, הרשת תציג כמה עמודות שאפשר להציג במקום הפנוי.

דוגמה להטמעה מופיעה בדוגמה של פיד עם Compose.

חלונית תומכת

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

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

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

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

תרחישים לדוגמה לשימוש בחלונית התמיכה:

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

הטמעה

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

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

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

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

הנה הטמעה מינימלית:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
CanonicalLayoutSamples.kt

• ‫rememberSupportingPaneScaffoldNavigator: רכיב שאפשר להרכיב ממנו רכיבים אחרים, שיוצר כלי ניווט לניהול הנראות של חלונית (לדוגמה, הסתרה או הצגה של חלונית התמיכה במסכים קומפקטיים)
• ‫mainPane: רכיב Composable שמציג את התוכן הראשי
• ‫supportingPane: רכיב שאפשר להוסיף לו תוכן שמוצג כתוכן משלים

דוגמאות מפורטות להטמעה זמינות במאמרים הבאים:

• מדריך למפתחים בנושא בניית פריסת חלונית תומכת
• supporting-pane-compose sample

מקורות מידע נוספים

• ‫Material Design – פריסות קנוניות