Aşağıdaki bölümlerde, Glance ile basit bir uygulama widget'ının nasıl oluşturulacağı açıklanmaktadır.
Manifest'te AppWidget
beyan edin
Kurulum adımlarını tamamladıktan sonra AppWidget
kodunu ve meta verilerini uygulamanızda beyan edin.
- Uygulama widget'ının sağlayıcısını
AndroidManifest.xml
dosyanıza ve ilişkili meta veri dosyasına kaydedin:
<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>
AppWidget
alıcısınıGlanceAppWidgetReceiver
konumundan uzatın:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
AppWidgetProviderInfo
meta verilerini ekleyin
Ardından, AppWidgetProviderInfo
meta verilerini eklemek için şu adımı uygulayın:
@xml/my_app_widget_info
dosyasında uygulama widget'ı bilgilerini oluşturmak ve tanımlamak için Basit bir widget oluşturma kılavuzundaki adımları uygulayın.Glance için tek fark,
initialLayout
XML olmaması ve bir tane tanımlamanızın gerekmesidir. Kitaplıkta sağlanan önceden tanımlanmış yükleme düzenini kullanabilirsiniz:
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
GlanceAppWidget
kelimesinin tanımı
GlanceAppWidget
öğesinden başlayarakprovideGlance
yöntemini geçersiz kılan yeni bir sınıf oluşturun. Widget'ınızı oluşturmak için gereken verileri şu yöntemle yükleyebilirsiniz:
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") } } }
GlanceAppWidgetReceiver
cihazınızdakiglanceAppWidget
içinde örnek olarak gösterin:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
Glance'ı kullanarak bir AppWidget
yapılandırdınız.
Kullanıcı arayüzü oluştur
Aşağıdaki snippet'te kullanıcı arayüzünün nasıl oluşturulacağı gösterilmektedir:
/* 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>() ) } } } }
Önceki kod örneği şunları yapar:
- Üst düzeyde
Column
, öğeler dikey olarak art arda yerleştirilir. Column
, boyutunu mevcut alanla eşleşecek şekilde genişletir (GlanceModifier
aracılığıyla), içeriğini üste hizalar (verticalAlignment
) ve yatay olarak ortalar (horizontalAlignment
).Column
içeriği lambda kullanılarak tanımlanır. Sıralama önemlidir.Column
öğesindeki ilk öğe,12.dp
dolguya sahip birText
bileşenidir.- İkinci öğe ise
Row
bir öğedir. Burada, öğeler yatay olarak birbiri ardına yerleştirilir ve ikiButtons
yatay olarak ortalanır (horizontalAlignment
son görüntü, kullanılabilir alana bağlıdır). Aşağıdaki resimde bu resmin nasıl görünebileceğine dair bir örnek verilmiştir:
Bileşenlerin yerleşimini ve boyutunu değiştirmek için hizalama değerlerini değiştirebilir veya farklı değiştirici değerleri (ör. dolgu) uygulayabilirsiniz. Her sınıfta bileşenlerin, parametrelerin ve kullanılabilir değiştiricilerin tam listesi için referans belgelere bakın.