สร้างวิดเจ็ตแอปด้วย "ข้อมูลโดยย่อ"

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

ส่วนต่อไปนี้อธิบายวิธีสร้างวิดเจ็ตแอปแบบง่ายด้วย Glance

ประกาศ AppWidget ในไฟล์ Manifest

หลังจากทำตามขั้นตอนการตั้งค่าเสร็จแล้ว ให้ประกาศ AppWidget และข้อมูลเมตาในแอป

1. ขยายตัวรับ AppWidget จาก GlanceAppWidgetReceiver

   class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
       override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget")
   }
   GlanceSnippets.kt

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

       <receiver android:name=".glance.MyReceiver"
       android:exported="true">
       <intent-filter>
           <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
       </intent-filter>
       <meta-data
           android:name="android.appwidget.provider"
           android:resource="@xml/my_app_widget_info" />
   </receiver>
   AndroidManifest.xml
   

เพิ่มข้อมูลเมตา AppWidgetProviderInfo

ถัดไป ให้ทําตามคู่มือสร้างวิดเจ็ตแบบง่ายเพื่อสร้างและกําหนดข้อมูลวิดเจ็ตแอปในไฟล์ @xml/my_app_widget_info

ความแตกต่างเพียงอย่างเดียวของข้อมูลโดยย่อคือไม่มี initialLayout XML แต่คุณต้องกำหนด initialLayout XML คุณใช้เลย์เอาต์การโหลดที่กําหนดไว้ล่วงหน้าซึ่งมีอยู่ในคลังได้ ดังนี้

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
my_app_widget_info.xml

นิยาม GlanceAppWidget

1. สร้างคลาสใหม่ที่ขยายจาก GlanceAppWidget และลบล้างเมธอด provideGlance วิธีนี้ช่วยให้คุณโหลดข้อมูลที่จําเป็นในการแสดงผลวิดเจ็ตได้

   class MyAppWidget : GlanceAppWidget() {
   
       override suspend fun provideGlance(context: Context, id: GlanceId) {
   
           // In this method, load data needed to render the AppWidget.
           // Use `withContext` to switch to another thread for long running
           // operations.
   
           provideContent {
               // create your AppWidget here
               Text("Hello World")
           }
       }
   }
   GlanceSnippets.kt

2. สร้างอินสแตนซ์ใน glanceAppWidget บน GlanceAppWidgetReceiver โดยทำดังนี้

   class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
   
       // Let MyAppWidgetReceiver know which GlanceAppWidget to use
       override val glanceAppWidget: GlanceAppWidget = MyAppWidget()
   }
   GlanceSnippets.kt

ตอนนี้คุณกําหนดค่า AppWidget โดยใช้ข้อมูลโดยย่อเรียบร้อยแล้ว

สร้าง UI

ข้อมูลโค้ดต่อไปนี้แสดงวิธีสร้าง UI

/* Import Glance Composables
 In the event there is a name clash with the Compose classes of the same name,
 you may rename the imports per https://kotlinlang.org/docs/packages.html#imports
 using the `as` keyword.

import androidx.glance.Button
import androidx.glance.layout.Column
import androidx.glance.layout.Row
import androidx.glance.text.Text
*/
class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // Load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            MyContent()
        }
    }

    @Composable
    private fun MyContent() {
        Column(
            modifier = GlanceModifier.fillMaxSize(),
            verticalAlignment = Alignment.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button(
                    text = "Home",
                    onClick = actionStartActivity<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

ตัวอย่างโค้ดก่อนหน้านี้ทําสิ่งต่อไปนี้

• ใน Column ระดับบนสุด ระบบจะวางรายการไว้แนวตั้งทีละรายการ
• Column จะขยายขนาดให้พอดีกับพื้นที่ว่าง (ผ่าน GlanceModifier) และจัดแนวเนื้อหาไว้ที่ด้านบน (verticalAlignment) และจัดแนวในแนวนอนให้อยู่ตรงกลาง (horizontalAlignment)
• เนื้อหาของ Column กำหนดโดยใช้ Lambda ลำดับมีความสำคัญ
  • รายการแรกใน Column คือคอมโพเนนต์ Text ที่มีระยะห่าง 12.dp
  • รายการที่ 2 คือ Row ซึ่งจะวางรายการแนวนอนต่อกันโดยมี Buttons 2 รายการอยู่กึ่งกลางในแนวนอน (horizontalAlignment) การแสดงผลสุดท้ายจะขึ้นอยู่กับพื้นที่ว่าง รูปภาพต่อไปนี้เป็นตัวอย่างลักษณะที่อาจปรากฏ

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