إنشاء تطبيق مصغّر باستخدام ميزة "نظرة سريعة"

توضّح الأقسام التالية طريقة إنشاء تطبيق مصغّر بسيط باستخدام ميزة "نظرة سريعة".

تعريف AppWidget في البيان

بعد إكمال خطوات الإعداد، عليك الإفصاح عن AppWidget وبياناته الوصفية في تطبيقك.

1. سجِّل موفّر تطبيق التطبيق المصغّر في ملف 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>
AndroidManifest.xml

1. عليك تمديد جهاز استقبال "AppWidget" من "GlanceAppWidgetReceiver":

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

إضافة البيانات الوصفية لـ AppWidgetProviderInfo

بعد ذلك، اتّبِع الخطوة التالية لإضافة بيانات AppWidgetProviderInfo الوصفية:

1. اتّبِع الدليل إنشاء تطبيق مصغّر بسيط لإنشاء معلومات عن التطبيق المصغّر وتحديدها في ملف @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>
my_app_widget_info.xml

تَعْرِيفْ GlanceAppWidget

1. أنشئ فئة جديدة تمتد من 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")
        }
    }
}
GlanceSnippets.kt

1. إنشاء مثيل له في glanceAppWidget على GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

لقد ضبطت الآن 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<MainActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MainActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

يؤدي نموذج الرمز السابق إلى ما يلي:

• في المستوى الأعلى Column، يتم وضع العناصر عموديًا واحدًا تلو الآخر.
• توسِّع السمة Column حجمها ليلائم المساحة المتاحة (عبر GlanceModifier ومحاذاة المحتوى مع أعلى الصفحة (verticalAlignment) وجعلها في الوسط أفقيًا (horizontalAlignment).
• يتم تحديد محتوى Column باستخدام لامدا. الترتيب مهم.
  • العنصر الأول في Column هو المكوِّن Text مع مساحة متروكة 12.dp.
  • العنصر الثاني هو Row، يتم فيه وضع العناصر أفقيًا واحدًا بعد بعضها البعض، مع توسيط Buttons أفقيًا (horizontalAlignment). يعتمد العرض النهائي على المساحة المتاحة. الصورة التالية هي مثال على ما قد تبدو عليه:

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