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

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

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

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

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

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

רשימה ופירוט

שרטוט של פריסת רשימה ופירוט.

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

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

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

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

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

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

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

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

הטמעה

הפרדיגמה ההצהרתית של 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
        }
    )
}

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

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

דוגמאות מפורטות להטמעה:

פיד

שרטוט של פריסת הפיד.

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

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

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

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

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

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

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

הטמעה

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

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

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

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

בדוגמה הזו אפשר לראות איך מטמיעים פיד באמצעות Compose.

חלונית תומכת

שרטוט של פריסת החלונית התומכת.

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

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

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

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

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

איור 3. אפליקציית שופינג עם תיאורי מוצרים בחלונית תומכת.

הטמעה

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

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

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

‫SupportingPaneScaffold הוא רכיב Composable ברמה גבוהה שמפשט את ההטמעה של פריסות חלוניות תומכות. ה-composable מטפל באופן אוטומטי בלוגיקה של החלונית על סמך מחלקות של גודל החלון, ומציג חלוניות זו לצד זו במסכים גדולים או מסתיר את החלונית התומכת במסכים קטנים. 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
        }
    )
}
 הרכיבים העיקריים בדוגמה:

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

דוגמאות מפורטות להטמעה:

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