หน้านี้ได้รับการแปลโดย Cloud Translation API

ปรับปรุงวิดเจ็ต

หน้านี้มีรายละเอียดเกี่ยวกับการปรับปรุงวิดเจ็ตที่ไม่บังคับซึ่งพร้อมใช้งานตั้งแต่ Android 12 (API ระดับ 31) ฟีเจอร์เหล่านี้เป็นฟีเจอร์ที่ไม่บังคับ แต่ใช้งานได้ง่ายและช่วยปรับปรุงประสบการณ์การใช้งานวิดเจ็ตของผู้ใช้

ใช้สีแบบไดนามิก

ตั้งแต่ Android 12 เป็นต้นไป วิดเจ็ตจะใช้สีธีมของอุปกรณ์สำหรับปุ่ม พื้นหลัง และองค์ประกอบอื่นๆ ได้ วิธีนี้ช่วยให้วิดเจ็ตต่างๆ เปลี่ยนรูปแบบได้อย่างราบรื่นและมีความสอดคล้องกัน

คุณสร้างสีแบบไดนามิกได้ 2 วิธีดังนี้

ใช้ธีมเริ่มต้นของระบบ (@android:style/Theme.DeviceDefault.DayNight) ในเลย์เอาต์รูท
ใช้ธีม Material 3 (Theme.Material3.DynamicColors.DayNight) จากไลบรารี Material Components for Android ซึ่งเริ่มตั้งแต่คอมโพเนนต์เนื้อหาสำหรับ 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>

วิดเจ็ตในธีมโหมดสว่าง — **รูปที่ 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`

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

เปิดใช้การรองรับเสียง

การดำเนินการของแอปช่วยให้ Google Assistant แสดงวิดเจ็ตเพื่อตอบสนองต่อคำสั่งเสียงของผู้ใช้ที่เกี่ยวข้องได้ การกำหนดค่าวิดเจ็ตให้ตอบสนองต่อ Intent ในตัว (BIIs) จะช่วยให้แอปแสดงวิดเจ็ตในแพลตฟอร์ม Assistant เช่น Android และ Android Auto ได้แบบเชิงรุก ผู้ใช้มีตัวเลือกในการปักหมุดวิดเจ็ตที่ Assistant แสดงไว้ในตัวเปิดแอป ซึ่งจะช่วยกระตุ้นการมีส่วนร่วมในอนาคต

ตัวอย่างเช่น คุณสามารถกำหนดค่าวิดเจ็ตสรุปการออกกำลังกายสำหรับแอปออกกำลังกาย ให้ทำตามคำสั่งเสียงของผู้ใช้ซึ่งจะทริกเกอร์ปุ่ม GET_EXERCISE_OBSERVATION BII Assistant จะแสดงวิดเจ็ตในเชิงรุกเมื่อผู้ใช้เรียกใช้ BII นี้โดยส่งคำขออย่างเช่น "Ok Google ฉันวิ่งไปกี่กิโลเมตรในสัปดาห์นี้บน ExampleApp"

มี BII หลายสิบรายการที่ครอบคลุมการโต้ตอบของผู้ใช้ในหลายหมวดหมู่ ทำให้แอป Android เกือบทุกแอปได้เพิ่มประสิทธิภาพวิดเจ็ตสำหรับเสียง หากต้องการเริ่มต้นใช้งาน โปรดดูหัวข้อผสานรวม App Actions กับวิดเจ็ต 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>

รูปภาพที่แสดงตัวอย่างวิดเจ็ต — **รูปที่ 3** ตัวอย่างวิดเจ็ตที่โดยค่าเริ่มต้นจะปรากฏในพื้นที่ขนาด 3x3 แต่พอดีกับพื้นที่ 3x1 ได้เนื่องจากเลย์เอาต์ XML

หากต้องการแสดงตัวอย่างที่ถูกต้อง คุณสามารถระบุเลย์เอาต์วิดเจ็ตจริงที่มีค่าเริ่มต้นได้โดยตรงโดยทำตามขั้นตอนต่อไปนี้

การตั้งค่า android:text="@string/my_widget_item_fake_1" สำหรับ องค์ประกอบ TextView

หมายเหตุ: ค่าที่ตั้งค่าโดยใช้แท็ก tools เช่น tools:text="@string/my_wdiget_item_fake_1" จะไม่แสดงในตัวอย่าง
การตั้งค่ารูปภาพหรือไอคอนเริ่มต้นหรือไอคอนตัวยึดตำแหน่ง เช่น 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 เป็นต้นไป ให้ระบุคำอธิบายเครื่องมือเลือกวิดเจ็ตที่จะแสดงสำหรับวิดเจ็ต

รูปภาพแสดงเครื่องมือเลือกวิดเจ็ตที่แสดงวิดเจ็ตและคำอธิบาย — **รูปที่ 4** ตัวอย่างเครื่องมือเลือกวิดเจ็ตที่แสดงวิดเจ็ตและคำอธิบาย

ระบุคําอธิบายวิดเจ็ตโดยใช้แอตทริบิวต์ description ขององค์ประกอบ <appwidget-provider>

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

คุณใช้แอตทริบิวต์ descriptionRes ใน Android เวอร์ชันก่อนหน้าได้ แต่เครื่องมือเลือกวิดเจ็ตจะไม่สนใจแอตทริบิวต์นี้

ช่วยให้การเปลี่ยนภาพราบรื่นยิ่งขึ้น

ตั้งแต่ Android 12 เป็นต้นไป Launcher จะดำเนินการเปลี่ยนอย่างราบรื่นเมื่อผู้ใช้เปิดแอปจากวิดเจ็ต

หากต้องการเปิดใช้ทรานซิชันที่ปรับปรุงแล้วนี้ ให้ใช้ @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 ได้ ดูรายการเมธอดทั้งหมดที่เพิ่มแล้วได้ที่ข้อมูลอ้างอิง RemoteViews API

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้เมธอดเหล่านี้ 2-3 วิธี

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