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.

Önemli Bilgi: Glance; Oluşturma, ancak AppWidgets ve RemoteViews kısıtlamalarıyla kısıtlanmıştır. Bu nedenle Glance, Jetpack Compose kullanıcı arayüzünden farklı composable'lar kullanıyor.

Manifest'te AppWidget öğesini beyan edin

Kurulum adımlarını tamamladıktan sonra AppWidget ve meta verileri kullanır.

1. AndroidManifest.xml dosyanıza uygulama widget'ının sağlayıcısını kaydedin ve ilişkili meta veri dosyası:

<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 hücresinden 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. Uygulamayı oluşturmak ve tanımlamak için Basit widget oluşturma rehberini takip edin widget bilgilerini @xml/my_app_widget_info dosyasında görebilirsiniz.

   Bir Bakışta için tek fark initialLayout XML olmamasıdır ancak tanımlamalısınız. Şurada sağlanan önceden tanımlanmış yükleme düzenini kullanabilirsiniz: kitaplık:

<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 alanından başlayan ve provideGlance yöntemi. Bu yöntem, şu tür verileri yüklemenin widget'ınızı oluşturmak için gerekenler:

   Not: provideGlance ana iş parçacığında çalışır. Herhangi bir uzun süreli çalışma gerçekleştirmek için provideGlance içinde işlem yapmak istiyorsanız aşağıdakileri kullanarak başka bir ileti dizisine geçin: withContext. İlgili daha fazla ayrıntı için Ana güvenlik için eş yordamları kullanma bölümüne bakın nasıl yapılacağını göstereceğim.

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 örneklendirin:

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

Önceki kod örneği şunları yapar:

• Üst düzeyde Column öğeler her birinin arkasına dikey olarak yerleştirilir. diğer.
• Column, boyutunu mevcut alana uyacak şekilde genişletir ( GlanceModifier ve içeriğini üste hizalar (verticalAlignment) ve yatay olarak ortalar (horizontalAlignment).
• Column öğesinin içeriği lambda kullanılarak tanımlanır. Sıra önemlidir.
  • Column içindeki ilk öğe, 12.dp değerine sahip bir Text bileşenidir dolgu.
  • İkinci öğe, öğelerin yatay olarak bir yerleştirildiği Row'dır yatay olarak ortalanmış iki Buttons şeklinde (horizontalAlignment). Son ekran, kullanılabilir alana bağlıdır. Aşağıdaki resimde, örnek olarak verilmiştir:

ziyaret edin.

Şekil 1. Örnek bir kullanıcı arayüzü.

Hizalama değerlerini değiştirebilir veya farklı değiştirici değerler uygulayabilirsiniz (ör. dolgu) kullanarak bileşenlerin yerleşimini ve boyutunu değiştirin. Daha fazla bilgi için referans belgelerine bakın. değiştiricileri bulunuyor.