Membuat widget aplikasi dengan Glance

Bagian berikut menjelaskan cara membuat widget aplikasi sederhana dengan Glance.

Poin Penting: Glance memberikan pendekatan modern untuk mem-build widget aplikasi menggunakan Compose, tetapi dibatasi oleh batasan AppWidgets dan RemoteViews. Oleh karena itu, Glance menggunakan composable yang berbeda dari UI Jetpack Compose.

Mendeklarasikan AppWidget dalam Manifes

Setelah menyelesaikan langkah-langkah penyiapan, deklarasikan AppWidget dan metadatanya di aplikasi Anda.

1. Daftarkan penyedia widget aplikasi di file AndroidManifest.xml Anda dan file metadata terkait:

<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

1. Perluas penerima AppWidget dari GlanceAppWidgetReceiver:

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

Menambahkan metadata AppWidgetProviderInfo

Selanjutnya, ikuti langkah ini untuk menambahkan metadata AppWidgetProviderInfo:

1. Ikuti panduan Membuat widget sederhana untuk membuat dan menentukan info widget aplikasi dalam file @xml/my_app_widget_info.

   Satu-satunya perbedaan untuk Glance adalah tidak ada XML initialLayout, tetapi Anda harus menentukannya. Anda dapat menggunakan tata letak pemuatan standar yang disediakan di library:

<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

Tentukan GlanceAppWidget

1. Buat class baru yang diperluas dari GlanceAppWidget dan mengganti metode provideGlance. Berikut adalah metode untuk memuat data yang diperlukan untuk merender widget Anda:

   Catatan: provideGlance berjalan di thread utama. Untuk menjalankan operasi yang berjalan lama di provideGlance, beralihlah ke thread lain menggunakan withContext. Lihat Menggunakan coroutine untuk main-safety guna mengetahui detail selengkapnya tentang cara menjalankan di luar thread utama.

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

1. Buat instance di glanceAppWidget pada GlanceAppWidgetReceiver Anda:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

Anda sekarang telah mengonfigurasi AppWidget menggunakan Glance.

Membuat UI

Cuplikan berikut menunjukkan cara membuat 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
            GlanceTheme {
                MyContent()
            }
        }
    }

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

Contoh kode sebelumnya melakukan hal berikut:

• Di tingkat atas Column, item ditempatkan secara vertikal satu per satu.
• Column memperluas ukurannya agar sesuai dengan ruang yang tersedia (melalui GlanceModifier dan meratakan kontennya ke atas (verticalAlignment) dan memusatkannya secara horizontal (horizontalAlignment).
• Konten Column ditentukan menggunakan lambda. Urutan itu penting.
  • Item pertama dalam Column adalah komponen Text dengan 12.dp padding.
  • Item kedua adalah Row, tempat item ditempatkan secara horizontal satu sama lain, dengan dua Buttons yang dipusatkan secara horizontal (horizontalAlignment). Tampilan akhir bergantung pada ruang yang tersedia. Gambar berikut adalah contoh tampilannya:

Gambar 1. Contoh UI.

Anda dapat mengubah nilai perataan atau menerapkan nilai pengubah yang berbeda (seperti padding) untuk mengubah penempatan dan ukuran komponen. Lihat dokumentasi referensi untuk melihat daftar lengkap komponen, parameter, dan pengubah yang tersedia untuk setiap class.