Glance ile uygulama widget'ı oluşturma

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.

1. 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>
AndroidManifest.xml

1. AppWidget alıcısını GlanceAppWidgetReceiver konumundan uzatın:

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

AppWidgetProviderInfo meta verilerini ekleyin

Ardından, AppWidgetProviderInfo meta verilerini eklemek için şu adımı uygulayın:

1. @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>
my_app_widget_info.xml

GlanceAppWidget kelimesinin tanımı

1. GlanceAppWidget öğesinden başlayarak provideGlance 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")
        }
    }
}
GlanceSnippets.kt

1. GlanceAppWidgetReceiver cihazınızdaki glanceAppWidget içinde örnek olarak gösterin:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

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<MainActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MainActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

Ö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 bir Text bileşenidir.
  • İkinci öğe ise Row bir öğedir. Burada, öğeler yatay olarak birbiri ardına yerleştirilir ve iki Buttons 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.