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

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

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

במדריך שיפור הווידג'ט של Compose מפורטות דרכים נוספות לשיפור הווידג'ט.

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

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

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

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

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

  • ?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
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tint="?attr/colorPrimaryContainer"
        android:src="@drawable/ic_cloud" />

    <!-- Other widget content. -->

</LinearLayout>

ווידג'ט בעיצוב של מצב בהיר
איור 1. ווידג'ט בעיצוב בהיר.
ווידג'טים בעיצוב של מצב כהה
איור 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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="?android:attr/colorBackground"
    android:theme="@style/MyWidgetTheme" />

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

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

לדוגמה, אתם יכולים להגדיר את הווידג'ט של סיכום האימון באפליקציית הכושר שלכם כך שימלא את הפקודות הקוליות של המשתמש שמפעילות את ה-BII‏ GET_EXERCISE_OBSERVATION. ‫Assistant מציגה את הווידג'ט באופן יזום כשהמשתמשים מפעילים את ה-BII הזה על ידי בקשות כמו, "Ok Google, how many miles did I run this week on ExampleApp?‎"

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

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

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

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

<!-- Top-level layout of the widget. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</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_DIP
)