‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

פריסות ווידג'טים קנוניות

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

טקסט

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

טקסט בלבד

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

טקסט ותמונה

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

סרגלי כלים

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

סרגל הכלים של החיפוש

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

סרגל הכלים

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

רשימות

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

רשימה עם טקסט ותמונה

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

רשימת משימות

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

רשימת פעולות

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

תמונה בכיסוי מלא

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

רשת

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

תמונה בלבד

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

תמונה וטקסט

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

דוגמאות קוד

בטבלה הבאה ממופה כל פריסה קנונית להטמעה המתאימה שלה ב-Jetpack Glance במאגר הדוגמאות של פלטפורמת Android ב-GitHub.

פריסה קנונית	קבצים לדוגמה	הדרכה
פריסת רשימת המשימות	ActionListAppWidget.kt ActionListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeActionListDataRepository.kt sample_action_list_widget_info.xml dimens.xml strings.xml sample_home_icon.xml sample_power_settings_icon.xml sample_bulb_icon.xml sample_thermostat_icon.xml sample_ac_icon.xml sample_door_icon.xml sample_arrow_right_icon.xml sample_no_data_icon.xml sample_add_icon.xml	מטפלים בפעולות של פריטים ברשימה באמצעות קריאות חוזרות (callback) לפעולות של Glance, ומוודאים שהעדכונים של המצב מתבצעים בצורה תקינה.
בדיקת פריסת הרשימה	CheckListAppWidget.kt CheckListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeCheckListDataRepository.kt sample_check_list_widget_info.xml dimens.xml strings.xml sample_pin_icon.xml sample_checked_circle_icon.xml sample_circle_icon.xml sample_delete_icon.xml sample_edit_icon.xml sample_snooze_icon.xml sample_no_data_icon.xml sample_add_icon.xml	כדי לעדכן פריטים באוסף, מטמיעים החלפה של מצב תיבת הסימון באמצעות פרמטרים של פעולות או קריאות חוזרות (callback). משתמשים בפונקציות קריאה חוזרת של פעולות במבט חטוף, כמו `actionRunCallback`,‏ `ActionCallback(actionParametersOf(...))` או `actionStartActivity(...)`, לפרמטרים של ווידג'ט `onClick` כדי לטפל באירועי לחיצה כמו הקשה על תיבת סימון.
פריסה של סרגל הכלים עם אופי	ExpressiveToolbarAppWidget.kt ExpressiveToolbarLayout.kt sample_expressive_toolbar_widget_info.xml ‫Buttons.kt LayoutComponents.kt dimens.xml strings.xml four_side_cookie_background.xml sample_edit_icon.xml sample_share_icon.xml sample_delete_icon.xml sample_info_icon.xml sample_add_icon.xml sample_file_upload_icon.xml sample_mic_icon.xml sample_camera_icon.xml	כדי למנוע שגיאות בייבוא של ColorProvider, מייבאים את androidx.glance.unit.ColorProvider ומשתמשים ב-androidx.glance.color.ColorProvider(dayColor, nightColor). כדי להגדיר צבעי רקע אחידים, צריך להשתמש ישירות ב-`GlanceModifier.background(Color)` ולא ב-`ColorProvider`.
פריסת רשת של תמונות	ImageGridAppWidget.kt ImageGridLayout.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeImageGridDataRepository.kt sample_image_grid_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_grid_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	צריך להשתמש בצבעים אחידים (`GlanceModifier.background`) או בפריטים מקומיים שאפשר לצייר עבור פריטי תמונה, אלא אם מוגדרת או מתבקשת ספרייה לטעינת תמונות.
פריסת רשימת טקסט עם תמונה	ImageTextListAppWidget.kt ImageTextListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeImageTextListDataRepository.kt sample_image_text_list_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_image_icon.xml sample_heart_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	תרחישים נפוצים לדוגמה: פידים של חדשות, רשימות של מאמרים, היסטוריית אימונים, פידים של הודעות ורשימות אנכיות של תמונות ממוזערות. כדאי לאזן בין גובה השורה ברשימה לבין חיתוך הטקסט כשמשלבים תמונות ממוזערות עם טקסט ראשי או משני.
פריסת טקסט ארוך	LongTextAppWidget.kt LongTextLayout.kt FakeLongTextRepository.kt sample_long_text_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml	אם מכפילים ערכים של `Dp`, כמו `2 * padding`, צריך לייבא את `androidx.compose.ui.unit.times`. פועלים לפי כללי הגודל: מוודאים שהמאפיינים מ-`dimens.xml` משמשים לריווח ולשינוי גודל של טיפוגרפיה.
פריסת סרגל החיפוש	SearchToolBarAppWidget.kt SearchToolBarLayout.kt sample_search_toolbar_widget_info.xml ‫Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_search_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml sample_share_icon.xml	כדי למנוע שגיאות בייבוא של ColorProvider, מייבאים את androidx.glance.unit.ColorProvider ומשתמשים ב-androidx.glance.color.ColorProvider(dayColor, nightColor). כדי להגדיר צבעי רקע אחידים, עדיף להשתמש ישירות ב-‎ `GlanceModifier.background(Color)` ‎ במקום ב-ColorProvider.
פריסת תמונות ללא שוליים לבנים / גלילה מהירה	FullBleedImageAppWidget.kt FullBleedImageLayout.kt sample_full_bleed_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_scrim_gradient.xml sample_placeholder_image.png sample_app_logo.xml sample_info_icon.xml sample_no_data_icon.xml	מגדירים את `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` ב-LazyColumn כדי להפעיל גלילה עם הצמדה. אם מטמיעים גלילה עם הצמדה, נדרשת גרסה 1.3.0-alpha02 ואילך של Glance, גרסה 37 (Baklava) ואילך של SDK לקומפילציה וגרסה 9.1.0 ואילך של פלאגין של Android Gradle ‏ (AGP). מגדירים את הערך `override val sizeMode: SizeMode = SizeMode.Exact` במחלקה של ספק הווידג'ט.
פריסת סרגל הכלים הרגילה	ToolBarAppWidget.kt ToolBarLayout.kt sample_toolbar_widget_info.xml ‫Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_app_logo.xml sample_search_icon.xml sample_add_icon.xml sample_edit_icon.xml sample_share_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml	כדי להימנע משגיאות בייבוא של ColorProvider, כדאי לעיין בקטע 'פתרון בעיות' ולהשתמש ב-androidx.glance.color.ColorProvider(dayColor, nightColor). כדי להגדיר צבעי רקע אחידים, צריך להשתמש ישירות ב-`GlanceModifier.background(Color)` ולא ב-`ColorProvider`.
פריסת טקסט עם תמונה	TextWithImageAppWidget.kt TextWithImageLayout.kt FakeTextWithImageRepository.kt sample_text_with_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml sample_placeholder_image.png sample_info_icon.xml sample_no_data_icon.xml	פועלים לפי כללי הגודל של פריסה רספונסיבית כדי להתאים את הטקסט והתמונה זה לצד זה או אחד מעל השני, בהתאם למידות הווידג'ט הזמינות.