Tworzenie widżetu aplikacji za pomocą aplikacji Glance

W sekcjach poniżej opisano, jak utworzyć prosty widżet aplikacji za pomocą funkcji W skrócie.

Ważne: Glance to nowoczesne podejście do tworzenia widżetów aplikacji za pomocą funkcji Compose, ale podlega ograniczeniom AppWidgets i RemoteViews. Dlatego w Glance są używane inne elementy kompozycyjne niż w interfejsie Jetpack Compose.

Zadeklaruj w pliku manifestu element AppWidget

Po wykonaniu kroków konfiguracji zadeklaruj AppWidget i jego metadanych w aplikacji.

1. Zarejestruj dostawcę widżetu aplikacji w pliku AndroidManifest.xml oraz powiązany plik metadanych:

<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. Rozszerz odbiornik AppWidget z GlanceAppWidgetReceiver:

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

Dodaj metadane AppWidgetProviderInfo

Następnie wykonaj ten krok, aby dodać metadane AppWidgetProviderInfo:

1. Wykonaj instrukcje z przewodnika Tworzenie prostego widżetu, aby utworzyć i zdefiniować aplikację. o widżecie w pliku @xml/my_app_widget_info.

   Jedyną różnicą w przypadku W skrócie jest to, że nie ma kodu XML initialLayout, ale musisz je zdefiniować. Możesz użyć wstępnie zdefiniowanego układu wczytywania dostępnego w biblioteka:

<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

Podaj definicję słowa GlanceAppWidget

1. Utwórz nową klasę, która rozpoczyna się od GlanceAppWidget i zastępuje provideGlance. W ten sposób możesz wczytać dane, które są potrzebne do wyrenderowania widżetu:

   Uwaga: provideGlance działa w wątku głównym. Aby przeprowadzać dowolne długie okresy operacji w provideGlance, przełącz się na inny wątek przy użyciu withContext Więcej informacji znajdziesz w artykule o używaniu współprac na potrzeby głównego bezpieczeństwa. poza wątkiem głównym.

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. Utwórz instancję w glanceAppWidget na urządzeniu GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

Udało Ci się skonfigurować: AppWidget przy użyciu funkcji W skrócie.

Utwórz UI

Ten fragment kodu pokazuje, jak utworzyć interfejs użytkownika:

/* 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

Dotychczasowy przykładowy kod wygląda tak:

• Na najwyższym poziomie Column elementy są umieszczane w pionie po każdym elemencie. inne.
• Column powiększa się, by dopasować się do dostępnego miejsca (za pomocą polecenia GlanceModifier i wyrównuje jej zawartość do góry (verticalAlignment) i wyśrodkowuje ją w poziomie (horizontalAlignment).
• Treść elementu Column jest określana za pomocą parametru lambda. Kolejność ma znaczenie.
  • Pierwszy element w polu Column jest komponentem Text z wartością 12.dp w polu dopełnienie.
  • Drugi element to Row, w którym elementy są rozmieszczone w poziomie. jedna za sobą, przy czym dwa Buttons są wyśrodkowane w poziomie (horizontalAlignment). Ostateczny wygląd zależy od dostępnego miejsca. Przykład poniżej:

.

Rysunek 1. Przykładowy interfejs użytkownika.

Możesz zmienić wartości wyrównania lub zastosować różne wartości modyfikatora (np. dopełnienie), aby zmienić położenie i rozmiar komponentów. Więcej informacji znajdziesz w dokumentacji dokumentacji, gdzie znajdziesz pełną listę komponentów, parametrów i dostępnych modyfikatory poszczególnych zajęć.