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

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

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

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

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

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

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

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

בדוגמה הבאה באמצעות העיצוב Material 3, צבע העיצוב של המכשיר הוא 'purplish'. צבע המשנה והרקע של הווידג'ט מותאמים לבהיר ולכהה המצבים השונים, כפי שמוצגים בדמויות 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>
הווידג&#39;ט בעיצוב בהיר
איור 1. הווידג'ט בעיצוב בהיר.
ווידג&#39;טים בעיצוב של מצב כהה
איור 2. הווידג'ט בעיצוב כהה.

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

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

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

/values/styles.xml

<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>

/values-v31/styles.xml

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

/layout/my_widget_layout.xml

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

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

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

לדוגמה, אפשר להגדיר את ווידג'ט הסיכום של אימוני הכושר לאפליקציית האימון שלך לבצע את הפקודות הקוליות של המשתמש שמפעילות את GET_EXERCISE_OBSERVATION BII. 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>
תמונה שמראה תצוגה מקדימה של הווידג&#39;ט
איור 3. תצוגה מקדימה של ווידג'ט כברירת מחדל מופיע בשטח של 3x3, אבל יכול להתאים לשטח של 3x1 בגלל פריסת ה-XML שלו.

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

  • הגדרה של 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 .

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

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

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

תמונה שבה מוצג הכלי לבחירת ווידג&#39;ט, שמציג את הווידג&#39;ט ואת התיאור שלו
איור 4. בוחר ווידג'טים לדוגמה שמציג ווידג'ט ולתיאור שלו.

עליך לספק תיאור לווידג'ט באמצעות המאפיין description של המאפיין רכיב &lt;appwidget-provider&gt;:

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

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

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

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

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

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

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

שימוש בשינוי זמן הריצה של תצוגות מרוחקות

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

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

Kotlin

// 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)

Java

// 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);