توضّح الأقسام التالية طريقة إنشاء تطبيق مصغّر بسيط باستخدام ميزة "نظرة سريعة".
تعريف 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
.الفرق الوحيد في هذه الميزة هو أنّه لا يتوفّر ملف XML خاص بـ
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
باستخدام لامدا. الترتيب مهم.
![أداة_الوجهة](https://developer.android.com/static/develop/ui/compose/images/destination_widget.png?authuser=3&hl=ar)
يمكنك تغيير قيم المحاذاة أو تطبيق قيم تعديل مختلفة (مثل المساحة المتروكة) لتغيير موضع المكوّنات وحجمها. راجِع الوثائق المرجعية للحصول على قائمة كاملة بالمكوّنات والمعلَمات والمعدِّلات المتاحة لكل فئة.