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

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

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

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

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

פיד

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

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

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

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

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

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

הטמעה

A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.

Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.

For section headers, dividers, or other items designed to occupy the full width of the feed, use maxLineSpan to take up the full width of the layout.

On compact-width displays that don't have enough space to show more than one column, LazyVerticalGrid behaves just like a LazyColumn.

Here is a minimal implementation using 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

The key to an adaptive feed is the columns configuration. GridCells.Adaptive(minSize = 180.dp) creates a grid where each column is at least 180.dp wide. The grid then displays as many columns as can fit in the available space.

For an example implementation, see the Feed with Compose sample.

חלונית תומכת

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

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

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

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

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

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

הטמעה

Compose supports window size class logic, which lets 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.

SupportingPaneScaffold is a high-level composable that simplifies the implementation of supporting pane layouts. The composable automatically handles pane logic based on window size classes, displaying panes side by side on large screens or hiding the supporting pane on small screens. SupportingPaneScaffold also supports navigation between panes.

The following is a minimal implementation:

@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: Composable that creates a navigator to manage pane visibility (for example, hiding or showing the supporting pane on compact screens)
• mainPane: Composable that displays the primary content
• supportingPane: Composable that displays the supplementary content

For detailed implementation examples, see:

• Build a supporting pane layout developer guide
• supporting-pane-compose sample

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

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