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

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

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

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

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

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

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

רשימה ופירוט

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

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

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

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

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

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

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

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

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

הטמעה

您可以使用各种技术创建列表-详情布局,包括 Compose、View 和 activity 嵌入(适用于旧版应用)。如需我们帮助您确定哪项技术最适用于您的应用,请参阅适用性部分。

SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。

首先,将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来,添加两个子元素(View 或 fragment),用于表示列表和详情内容。

实现一种通信方法,以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel,因为它能存储业务逻辑,并且可在配置更改后继续留存。

SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情,二者会并排显示。如果窗口空间不足,系统会根据用户与应用的互动单独显示列表或详情。

如需查看示例实现,请参阅包含滑动窗格的列表-详情示例。

activity 嵌入

借助 activity 嵌入,可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity,或让两个 activity 堆叠显示(一个叠加在另一个之上)。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情,借助 activity 嵌入,您只需进行少量代码重构(甚至无需重构),即可创建列表详情布局。

如需实现 activity 嵌入,只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity(用于启动分屏)和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时,activity 便会叠加显示。例如,如果显示屏宽度下限为 600dp,那么在较小宽度的显示屏上,activity 会叠加显示;但在中等宽度和较大宽度的显示屏上,activity 会并排显示。

Android 12L(API 级别 32)及更高版本支持 activity 嵌入,但经设备制造商实现后,较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入,回退行为会导致列表 activity 或详情 activity 占据整个应用窗口,具体取决于用户与应用的互动。

如需了解详情,请参阅 activity 嵌入

如需查看示例实现,请参阅使用 activity 嵌入构建列表详情示例。

פיד

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

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

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

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

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

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

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

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

הטמעה

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

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

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

במסכים ברוחב קומפקטי שיש בהם מספיק מקום לעמודה אחת בלבד, משתמשים ב-LinearLayoutManager במקום ב-GridLayoutManager.

דוגמה להטמעה מופיעה בדוגמה פיד עם צפיות.

חלונית תומכת

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

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

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

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

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

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

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

הטמעה

辅助窗格布局是使用 LinearLayoutConstraintLayout 等辅助布局实现的。建立窗口大小类别 用于将应用可用的横向显示空间量 三个类别:较小 (< 600dp)、中等 (>= 600dp) 和较大 (>= 840dp)。

针对每个窗口大小类别,按以下方式定义布局:

  • 紧凑:在应用资源 layout 文件夹中,放置 在主要内容下方或底部动作条内呈现辅助窗格
  • 中等:在 layout-w600dp 文件夹中提供辅助窗格内容,使主要内容和辅助窗格并排呈现,并平均分配横向显示空间
  • 展开:在 layout-w840dp 文件夹中添加辅助窗格内容,使主要内容和辅助窗格并排呈现;不过,让辅助窗格只占据横向空间的 30%,并将其余 70% 的空间留给主要内容

使用 ViewModel 在主要内容和 无论是使用 View、fragment 还是二者结合使用,都可以在辅助窗格中显示。

如需查看实现示例,请参阅以下示例:

תחולה

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

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

איור 4. עץ קבלת החלטות לגבי פריסה קנונית במסך גדול.

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