שיפור הווידג'ט

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

שימוש בצבעים דינמיים

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

יש שתי דרכים ליצור צבעים דינמיים:

• משתמשים בעיצוב ברירת המחדל של המערכת (@android:style/Theme.DeviceDefault.DayNight) בפריסה ברמה הבסיסית.

• השתמשו בעיצוב Material 3 (Theme.Material3.DynamicColors.DayNight) מהספרייה Material Components ל-Android, שזמינה החל מ-Material Components for Android v1.6.0.

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

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

• ?attr/primary
• ?attr/primaryContainer
• ?attr/onPrimary
• ?attr/onPrimaryContainer

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="?attr/colorPrimaryContainer"
  android:theme="@style/Theme.Material3.DynamicColors.DayNight">

  <ImageView
    ...
    app:tint="?attr/colorPrimaryContainer"
    android:src="@drawable/ic_partly_cloudy" />

    <!-- Other widget content. -->

</LinearLayout>

תאימות לאחור לצבעים דינמיים

צבעים דינמיים זמינים רק במכשירים עם Android מגרסה 12 ואילך. כדי לספק עיצוב מותאם אישית לגרסאות ישנות יותר, יוצרים עיצוב ברירת מחדל עם הצבעים המותאמים אישית ומגדיר חדש (values-v31) באמצעות מאפייני עיצוב ברירת המחדל.

דוגמה לשימוש בעיצוב Material 3:

<resources>
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight">
    <!-- Override default colorBackground attribute with custom color. -->
    <item name="android:colorBackground">@color/my_background_color</item>

    <!-- Add other colors/attributes. -->

  </style>
</resources>

<resources>
  <!-- Do not override any color attribute. -->
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight" />
</resources>

<resources>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:background="?android:attr/colorBackground"
    android:theme="@style/MyWidgetTheme" />
</resources>

הפעלת תמיכה קולית

פעולות באפליקציות מאפשרות ל-Google Assistant להציג ווידג'טים בתגובה לפקודות קוליות רלוונטיות של המשתמשים. אם תגדירו את הווידג'ט כך שישיב לכוונות מובנות (BIIs), האפליקציה תוכל להציג וידג'טים באופן יזום בממשקי Assistant, כמו Android ו-Android Auto. המשתמשים יכולים להצמיד ל-Launcher את הווידג'טים שמוצגים על ידי Assistant, כדי לעודד מעורבות עתידית.

לדוגמה, אפשר להגדיר את הווידג'ט של סיכום האימון באפליקציית האימונים כך שיגיב לפקודות הקוליות של המשתמשים שמפעילות את ה-BII‏ GET_EXERCISE_OBSERVATION. Assistant מציגה באופן יזום את הווידג'ט שלכם כשמשתמשים מפעילים את ה-BII הזה באמצעות בקשות כמו "Hey Google, כמה קילומטרים רצתי השבוע ב-ExampleApp?"

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

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

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

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

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

כדי להטמיע תצוגות מקדימות של ווידג'טים שניתן לשנות את הגודל שלהן, צריך להשתמש במאפיין previewLayout של הרכיב appwidget-provider כדי לספק פריסה של XML במקום זאת:

<appwidget-provider
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>

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

מומלץ לציין גם את המאפיינים previewLayout וגם את המאפיינים previewImage, כדי שהאפליקציה תוכל לעבור לשימוש ב-previewImage אם המכשיר של המשתמש לא תומך ב-previewLayout. המאפיין previewLayout מקבל קדימות על פני המאפיין previewImage.

גישות מומלצות ליצירת תצוגות מקדימות מדויקות

כדי להטמיע תצוגות מקדימות של ווידג'טים שניתן לשנות את הגודל שלהן, משתמשים במאפיין previewLayout של הרכיב appwidget-provider כדי לספק פריסה של XML:

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>

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

• הגדרת android:text="@string/my_widget_item_fake_1" לרכיבי TextView.

• הגדרת תמונה או סמל ברירת מחדל או placeholder, כמו android:src="@drawable/my_widget_icon", לרכיבי ImageView.

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

לקבלת פרטים על גישות מומלצות לתצוגות מקדימות מורכבות יותר שמכילות את השדות ListView,‏ GridView או StackView, אפשר לעיין במאמר יצירת תצוגות מקדימות מדויקות שכוללות פריטים דינמיים.

תאימות לאחור עם תצוגות מקדימות של ווידג'טים שניתן לשנות את הגודל שלהן

כדי לאפשר לכלי לבחירת ווידג'טים ב-Android 11 (רמת API 30) ואילך להציג תצוגות מקדימות של הווידג'ט, צריך לציין את המאפיין previewImage.

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

הוספת שם לווידג'ט

לווידג'טים צריך להיות שם ייחודי כשהם מוצגים בבורר הווידג'טים.

שמות של ווידג'טים נטענים מהמאפיין label של האלמנט receiver של הווידג'ט בקובץ AndroidManifest.xml.

<receiver
    ….
   android:label="Memories">
     ….
</receiver>

מוסיפים תיאור לווידג'ט

החל מ-Android 12, יש לספק תיאור שבוחר הווידג'טים יוצג לווידג'ט.

מספקים תיאור של הווידג'ט באמצעות המאפיין description של הרכיב <appwidget-provider>:

<appwidget-provider
    android:description="@string/my_widget_description">
</appwidget-provider>

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

הפעלת מעברים חלקים יותר

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

כדי להפעיל את המעבר המשודרג הזה, צריך להשתמש ב-@android:id/background או ב-android.R.id.background כדי לזהות את רכיב הרקע:

// Top-level layout of the widget.
<LinearLayout
    android:id="@android:id/background">
</LinearLayout>

באפליקציה שלכם אפשר להשתמש ב-@android:id/background בגרסאות קודמות של Android בלי לגרום לשיבושים, אבל המערכת תתעלם ממנו.

שימוש בשינוי של RemoteViews בסביבת זמן הריצה

החל מ-Android 12, אפשר להשתמש בכמה שיטות של RemoteViews שמאפשרות לשנות את המאפיינים של RemoteViews בסביבת זמן הריצה. הרשימה המלאה של השיטות שנוספו מפורטת במסמכי העזרה של API RemoteViews.

בדוגמת הקוד הבאה מוסבר איך להשתמש בכמה מהשיטות האלה.

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList())

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP)

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList());

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP);