สร้างวิดเจ็ตแบบง่าย

ลองใช้วิธีแบบ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีสร้างวิดเจ็ตโดยใช้ API รูปแบบ Compose
Jetpack Glance →

วิดเจ็ตแอปคือมุมมองแอปขนาดเล็กที่คุณฝังในแอปอื่นๆ ได้ เช่น หน้าจอหลัก และจะได้รับการอัปเดตเป็นระยะๆ มุมมองเหล่านี้เรียกว่าวิดเจ็ตในอินเทอร์เฟซผู้ใช้ และคุณสามารถเผยแพร่วิดเจ็ตได้โดยใช้ผู้ให้บริการวิดเจ็ตแอป (หรือผู้ให้บริการวิดเจ็ต) ส่วนประกอบของแอปที่เก็บวิดเจ็ตอื่นๆ เรียกว่าโฮสต์วิดเจ็ตแอป (หรือโฮสต์วิดเจ็ต) รูปที่ 1 แสดงตัวอย่าง วิดเจ็ตเพลง

ตัวอย่างวิดเจ็ตเพลง
รูปที่ 1 ตัวอย่างวิดเจ็ตเพลง

เอกสารนี้อธิบายวิธีเผยแพร่วิดเจ็ตโดยใช้ผู้ให้บริการวิดเจ็ต ดูรายละเอียดเกี่ยวกับการสร้าง AppWidgetHost ของคุณเองเพื่อโฮสต์วิดเจ็ตแอปได้ที่สร้างโฮสต์วิดเจ็ต

ดูข้อมูลเกี่ยวกับวิธีออกแบบวิดเจ็ตได้ที่ภาพรวมวิดเจ็ตแอป

คอมโพเนนต์วิดเจ็ต

หากต้องการสร้างวิดเจ็ต คุณต้องมีคอมโพเนนต์พื้นฐานต่อไปนี้

ออบเจ็กต์ AppWidgetProviderInfo
อธิบายข้อมูลเมตาของวิดเจ็ต เช่น เลย์เอาต์ ความถี่ในการอัปเดต และคลาส AppWidgetProvider AppWidgetProviderInfo กำหนดไว้ใน XML ตามที่อธิบายไว้ในเอกสารนี้
คลาส AppWidgetProvider
กำหนดเมธอดพื้นฐาน ที่ช่วยให้คุณเชื่อมต่อกับวิดเจ็ตโดยใช้โปรแกรมได้ โดยคุณจะ ได้รับการออกอากาศเมื่อวิดเจ็ตได้รับการอัปเดต เปิดใช้ ปิดใช้ หรือ ลบ คุณประกาศ AppWidgetProvider ในไฟล์ Manifest แล้วใช้งานตามที่อธิบายไว้ในเอกสารนี้
ดูเลย์เอาต์
กำหนดเลย์เอาต์เริ่มต้นสำหรับวิดเจ็ต เลย์เอาต์กำหนด ใน XML ตามที่อธิบายไว้ในเอกสารนี้

รูปที่ 2 แสดงให้เห็นว่าคอมโพเนนต์เหล่านี้เข้ากับโฟลว์การประมวลผลวิดเจ็ตแอปโดยรวมได้อย่างไร

ขั้นตอนการประมวลผลวิดเจ็ตแอป
รูปที่ 2 ขั้นตอนการประมวลผลวิดเจ็ตแอป

หากวิดเจ็ตต้องมีการกำหนดค่าของผู้ใช้ ให้ใช้กิจกรรมการกำหนดค่าวิดเจ็ตแอป กิจกรรมนี้ช่วยให้ผู้ใช้แก้ไขการตั้งค่าวิดเจ็ตได้ เช่น เขตเวลาสำหรับวิดเจ็ตนาฬิกา

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

ประกาศ XML ของ AppWidgetProviderInfo

การกำหนดการตั้งค่าข้อมูลเมตา (เช่น ขนาดเซลล์เริ่มต้น ข้อจำกัดในการปรับขนาด และความถี่ในการอัปเดต) จะเหมือนกันทุกประการทั้งในวิดเจ็ตแบบดั้งเดิมและวิดเจ็ตที่อิงตาม Glance

ดูวิธีสร้างและกำหนดค่าไฟล์ XML ของข้อมูลเมตาได้ที่ส่วน Compose-first Declare the AppWidgetProviderInfo XML section ในเอกสารประกอบของ Glance

ใช้คลาส AppWidgetProvider เพื่อจัดการการออกอากาศวิดเจ็ต

Broadcast Receiver ของแพลตฟอร์ม ตัวกรองการประกาศไฟล์ Manifest และลูปเหตุการณ์ในวงจรชีวิตจะรวมกันอยู่ภายใต้แพลตฟอร์ม ในการพัฒนาแบบ Compose-first การออกอากาศเหล่านี้จะได้รับการจัดระเบียบโดยใช้ GlanceAppWidgetReceiver Wrapper

หากต้องการดูวิธีลงทะเบียนตัวรับในไฟล์ Manifest และใช้การลบล้างวงจรที่เข้ากันได้กับ Hilt โปรดดูส่วนใช้คลาส AppWidgetProvider เพื่อจัดการการออกอากาศในเอกสารประกอบของ Glance ที่เน้น Compose เป็นอันดับแรก

สร้างเลย์เอาต์วิดเจ็ต

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

การสร้างเลย์เอาต์วิดเจ็ตนั้นตรงไปตรงมาหากคุณคุ้นเคยกับเลย์เอาต์ อย่างไรก็ตาม โปรดทราบว่าเลย์เอาต์วิดเจ็ตอิงตาม RemoteViews ซึ่งไม่รองรับเลย์เอาต์หรือวิดเจ็ตมุมมองทุกประเภท คุณไม่สามารถใช้มุมมองที่กำหนดเองหรือคลาสย่อยของมุมมองที่ RemoteViewsรองรับ

RemoteViews ยังรองรับ ViewStub ซึ่งเป็น View ที่มีขนาดเป็น 0 และมองไม่เห็น ซึ่งคุณใช้เพื่อขยายทรัพยากรเลย์เอาต์แบบเลซี่ที่รันไทม์ได้

การรองรับลักษณะการทำงานแบบมีสถานะ

Android 12 เพิ่มการรองรับลักษณะการทำงานแบบมีสถานะโดยใช้คอมโพเนนต์ที่มีอยู่ต่อไปนี้

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

ตัวอย่างวิดเจ็ตรายการช็อปปิ้งที่แสดงลักษณะการทำงานแบบมีสถานะ
รูปที่ 3 ตัวอย่างลักษณะการทำงานแบบมีสถานะ

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

Kotlin

// Check the view.
remoteView.setCompoundButtonChecked(R.id.my_checkbox, true)

// Check a radio group.
remoteView.setRadioGroupChecked(R.id.my_radio_group, R.id.radio_button_2)

// Listen for check changes. The intent has an extra with the key
// EXTRA_CHECKED that specifies the current checked state of the view.
remoteView.setOnCheckedChangeResponse(
        R.id.my_checkbox,
        RemoteViews.RemoteResponse.fromPendingIntent(onCheckedChangePendingIntent)
)

Java

// Check the view.
remoteView.setCompoundButtonChecked(R.id.my_checkbox, true);

// Check a radio group.
remoteView.setRadioGroupChecked(R.id.my_radio_group, R.id.radio_button_2);

// Listen for check changes. The intent has an extra with the key
// EXTRA_CHECKED that specifies the current checked state of the view.
remoteView.setOnCheckedChangeResponse(
    R.id.my_checkbox,
    RemoteViews.RemoteResponse.fromPendingIntent(onCheckedChangePendingIntent));

ระบุเลย์เอาต์ 2 แบบ ได้แก่ เลย์เอาต์หนึ่งที่กำหนดเป้าหมายเป็นอุปกรณ์ที่ใช้ Android 12 ขึ้นไปใน res/layout-v31 และอีกเลย์เอาต์หนึ่งที่กำหนดเป้าหมายเป็น Android 11 หรือต่ำกว่าในโฟลเดอร์ res/layout เริ่มต้น

ใช้มุมโค้งมน

การคำนวณรัศมีพื้นหลังด้านนอกและรัศมีสัดส่วนด้านในเป็นมาตรฐานและ ใช้ร่วมกัน ในการพัฒนาแบบ Compose-first คุณสามารถตั้งค่านี้แบบไดนามิกใน Kotlin ควบคู่ไปกับทรัพยากรธีมที่กำหนดเอง

หากต้องการใช้รัศมีมุมหรือตั้งค่าสไตล์แบบไดนามิกสำหรับอุปกรณ์ Android รุ่นเก่า โปรดดูส่วนการใช้มุมโค้งที่เน้น Compose เป็นอันดับแรกในเอกสารประกอบของ Glance