Bagian berikut menjelaskan cara membuat widget aplikasi sederhana dengan Glance.
Mendeklarasikan AppWidget
dalam Manifes
Setelah menyelesaikan langkah-langkah penyiapan, deklarasikan AppWidget
dan metadatanya
di aplikasi Anda.
- 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>
- Perluas penerima
AppWidget
dariGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
Menambahkan metadata AppWidgetProviderInfo
Selanjutnya, ikuti langkah ini untuk menambahkan metadata AppWidgetProviderInfo
:
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>
Tentukan GlanceAppWidget
Buat class baru yang diperluas dari
GlanceAppWidget
dan mengganti metodeprovideGlance
. Berikut adalah metode untuk memuat data yang diperlukan untuk merender widget Anda:
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") } } }
- Buat instance di
glanceAppWidget
padaGlanceAppWidgetReceiver
Anda:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
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>() ) } } } }
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 (melaluiGlanceModifier
dan meratakan kontennya ke atas (verticalAlignment
) dan memusatkannya secara horizontal (horizontalAlignment
).- Konten
Column
ditentukan menggunakan lambda. Urutan itu penting.- Item pertama dalam
Column
adalah komponenText
dengan12.dp
padding. - Item kedua adalah
Row
, tempat item ditempatkan secara horizontal satu sama lain, dengan duaButtons
yang dipusatkan secara horizontal (horizontalAlignment
). Tampilan akhir bergantung pada ruang yang tersedia. Gambar berikut adalah contoh tampilannya:
- Item pertama dalam
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.