Membuat widget aplikasi dengan Glance

Bagian berikut menjelaskan cara membuat widget aplikasi sederhana dengan Glance.

Poin Penting: Glance memberikan pendekatan modern untuk membuat 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 penyiapan, deklarasikan AppWidget beserta metadata dalam aplikasi Anda.

1. Mendaftarkan penyedia widget aplikasi di file AndroidManifest.xml Anda dan file metadata yang 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 aplikasi info widget 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 yang telah ditentukan sebelumnya yang disediakan di perpustakaan:

<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 ganti Metode provideGlance. Ini adalah metode di mana Anda dapat memuat data yang yang diperlukan untuk merender widget Anda:

   Catatan: provideGlance berjalan di thread utama. Untuk melakukan operasi panjang operasi di provideGlance, beralihlah ke thread lain menggunakan withContext. Lihat Menggunakan coroutine untuk main-safety untuk detail selengkapnya tentang cara berjalan 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 kini 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<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

Contoh kode sebelumnya melakukan hal berikut:

• Di tingkat teratas Column, item ditempatkan secara vertikal satu setelah masing-masing lainnya.
• Column memperluas ukurannya agar sesuai dengan ruang yang tersedia (melalui GlanceModifier dan meratakan kontennya ke bagian atas (verticalAlignment) dan menempatkannya di tengah 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, dengan item ditempatkan secara horizontal satu sama lain, dengan dua Buttons 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 referensi dokumentasi untuk mengetahui daftar lengkap komponen, parameter, dan nilai pengubah untuk setiap class.