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

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

טקסט

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

טקסט בלבד

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

טקסט ותמונה

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

סרגלי כלים

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

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

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

סרגל הכלים

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

רשימות

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

רשימת טקסט ותמונות

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

רשימת משימות

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

רשימת הפעולות

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

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

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

רשת

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

תמונה בלבד

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

תמונה וטקסט

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

דוגמאות קוד

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

פריסה קנונית קבצי רפרנס הדרכה
פריסת רשימת הפעולות
  • מטפלים בפעולות של פריטים ברשימה באמצעות קריאות חוזרות (callbacks) של פעולות ב-Glance, ומוודאים שהמצב מתעדכן כמו שצריך.
פריסת רשימת משימות
  • כדי לעדכן פריטים באוסף, מטמיעים החלפה של מצב תיבת הסימון באמצעות פרמטרים של פעולות או קריאות חוזרות (callback).
  • כדי לטפל באירועים מסוג קליק, כמו לחיצה על תיבת סימון, משתמשים בקריאות חוזרות (callbacks) של פעולות ב-Glance, כמו `actionRunCallback`,‏ `ActionCallback(actionParametersOf(...))` או `actionStartActivity(...)`, בפרמטרים של `onClick` בווידג'ט.
פריסת סרגל כלים עם אופי
  • כדי למנוע שגיאות בייבוא של ColorProvider, מייבאים את androidx.glance.unit.ColorProvider ומשתמשים ב-androidx.glance.color.ColorProvider(dayColor, nightColor).
  • כדי להגדיר צבעי רקע אחידים, משתמשים ישירות ב-`GlanceModifier.background(Color)` במקום ב-`ColorProvider`.
פריסת רשת של תמונות
  • צריך להשתמש בצבעים אחידים (`GlanceModifier.background`) או בפריטים מקומיים שאפשר לצייר עבור פריטי תמונה, אלא אם מוגדרת או מתבקשת ספרייה לטעינת תמונות.
פריסת רשימה של תמונות וטקסט
  • תרחישים נפוצים לדוגמה: פידים של חדשות, רשימות של מאמרים, היסטוריית אימונים, פידים של הודעות ורשימות אנכיות של תמונות ממוזערות.
  • כשמשלבים תמונות ממוזערות עם טקסט ראשי או משני, חשוב לאזן בין גובה השורה ברשימה לבין חיתוך הטקסט.
פריסת טקסט ארוך
  • אם מכפילים ערכים של `Dp`, כמו `2 * padding`, צריך לייבא את `androidx.compose.ui.unit.times`.
  • פועלים לפי כללי הגודל: מוודאים שהמידות מ-`dimens.xml` משמשות למרווח פנימי ולשינוי קנה המידה של הטיפוגרפיה.
פריסת סרגל הכלים של החיפוש
  • כדי להימנע משגיאות בייבוא של `ColorProvider`: מייבאים את `androidx.glance.unit.ColorProvider` ומשתמשים ב-`androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • כדי להגדיר צבעי רקע אחידים, עדיף להשתמש ישירות ב-‎ `GlanceModifier.background(Color)` ‎ במקום ב-ColorProvider.
פריסת תמונה ללא שוליים לבנים / גלילה עם הצמדה
  • מגדירים את `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` ב-LazyColumn לגלילה עם הצמדה.
  • אם אתם מטמיעים גלילה מהירה, אתם צריכים את Glance בגרסה 1.3.0-alpha02 ואילך, את compile SDK בגרסה 37 (Baklava) ואילך ואת פלאגין של Android Gradle ‏ (AGP) בגרסה 9.1.0 ואילך.
  • מגדירים את הערך `override val sizeMode: SizeMode = SizeMode.Exact` במחלקה של ספק הווידג'ט.
פריסת סרגל הכלים הרגילה
  • כדי להימנע משגיאות בייבוא של ColorProvider, כדאי לעיין בקטע "פתרון בעיות": משתמשים ב-androidx.glance.color.ColorProvider(dayColor, nightColor).
  • כדי להגדיר צבעי רקע אחידים, צריך להשתמש ישירות ב-`GlanceModifier.background(Color)` ולא ב-`ColorProvider`.
פריסת טקסט עם תמונה
  • כדי להציג טקסט ותמונה זה לצד זה או זה מעל זה, בהתאם למידות הזמינות של הווידג'ט, צריך לפעול לפי כללי הגודל של פריסה רספונסיבית.