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

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

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

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

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

  • ใช้ธีมเริ่มต้นของระบบ (@android:style/Theme.DeviceDefault.DayNight) ในเลย์เอาต์รูท

  • ใช้ธีม Material 3 (Theme.Material3.DynamicColors.DayNight) จากไลบรารี Material Components for 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>
วิดเจ็ตในธีมโหมดสว่าง
รูปที่ 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 แสดงไว้ Launcher เพื่อกระตุ้นการมีส่วนร่วมในอนาคต

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

มี 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>
รูปภาพที่แสดงตัวอย่างวิดเจ็ต
รูปที่ 3 ตัวอย่างวิดเจ็ตที่ปรากฏในพื้นที่ 3x3 โดยค่าเริ่มต้น แต่สามารถใส่ในพื้นที่ 3x1 ได้เนื่องจากเลย์เอาต์ XML

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

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

  • การตั้งค่ารูปภาพหรือไอคอนเริ่มต้นหรือตัวยึดตําแหน่ง เช่น android:src="@drawable/my_widget_icon" สําหรับคอมโพเนนต์ ImageView

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

สำหรับวิธีที่แนะนำสำหรับตัวอย่างที่ซับซ้อนขึ้นซึ่งมี ListView GridView หรือ StackView โปรดดูสร้างตัวอย่างที่ถูกต้องซึ่งรวมไดนามิก รายการเพื่อดูรายละเอียด

ความเข้ากันได้แบบย้อนหลังกับตัวอย่างวิดเจ็ตที่รองรับการปรับขนาด

หากต้องการให้เครื่องมือเลือกวิดเจ็ตใน Android 11 (API ระดับ 30) หรือต่ำกว่าแสดงตัวอย่างวิดเจ็ต ให้ระบุแอตทริบิวต์ previewImage

หากคุณเปลี่ยนรูปลักษณ์ของวิดเจ็ต ให้อัปเดตรูปภาพตัวอย่าง

เพิ่มรายละเอียดสำหรับวิดเจ็ต

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

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

ใช้การแก้ไขรันไทม์ของ 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);