توضّح الأقسام التالية كيفية إنشاء تطبيق مصغّر بسيط باستخدام ميزة "نظرة سريعة".
يُرجى تعريف "AppWidget
" في البيان.
بعد إكمال خطوات الإعداد، عليك الإفصاح عن السمة AppWidget
و
البيانات الوصفية في تطبيقك.
- سجِّل موفّر تطبيق التطبيق المصغّر في ملف
AndroidManifest.xml
وملف البيانات الوصفية المرتبط به:
<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
منGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
إضافة بيانات AppWidgetProviderInfo
الوصفية
بعد ذلك، اتّبِع هذه الخطوة لإضافة بيانات AppWidgetProviderInfo
الوصفية:
اتّبِع دليل إنشاء أداة بسيطة لإنشاء التطبيق وتحديده. التطبيق المصغّر في ملف
@xml/my_app_widget_info
.ويكمن الاختلاف الوحيد في ميزة "نظرة سريعة" في أنّه لا يتوفّر
initialLayout
XML، ولكن يجب عليك تحديد واحد. يمكنك استخدام تخطيط التحميل المحدد مسبقًا المقدم في المكتبة:
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
تَعْرِيفْ GlanceAppWidget
أنشئ فئة جديدة تمتد من
GlanceAppWidget
ويلغيprovideGlance
. هذه هي الطريقة التي يمكنك من خلالها تحميل بيانات اللازمة لعرض الأداة:
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") } } }
- يمكنك إنشاء مثيل في
glanceAppWidget
علىGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
لقد ضبطت "AppWidget
" باستخدام ميزة "نظرة سريعة".
إنشاء واجهة مستخدم
يوضح المقتطف التالي كيفية إنشاء واجهة المستخدم:
/* 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>() ) } } } }
ينفذ نموذج الرمز السابق ما يلي:
- في المستوى الأعلى
Column
، يتمّ وضع العناصر عموديًا بعد كل عنصر. آخر. - يتم توسيع حجم "
Column
" ليلائم المساحة المتاحة (عبرGlanceModifier
ومحاذاة المحتوى إلى الأعلى (verticalAlignment
) ويوسيطه أفقيًا (horizontalAlignment
). - يتم تحديد محتوى
Column
باستخدام lambda. الترتيب مهم.

يمكنك تغيير قيم المحاذاة أو تطبيق قيم تعديل مختلفة (مثل مساحة متروكة) لتغيير موضع المكوّنات وحجمها. الاطّلاع على المرجع للحصول على قائمة كاملة بالمكونات والمعلمات والمتوفرة المُعدّلات لكل فئة.