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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

إدراج AppWidget في البيان

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

1. يمكنك تمديد فترة اشتراكك في خدمة AppWidget من GlanceAppWidgetReceiver:

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

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

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

بعد ذلك، اتّبِع دليل إنشاء تطبيق مصغّر بسيط لإنشاء معلومات التطبيق المخصّصة للتطبيق المصغّر وتحديدها في ملف @xml/my_app_widget_info.

الفرق الوحيد في Glance هو عدم توفّر ملف XML initialLayout، ولكن عليك تحديد ملف. يمكنك استخدام تنسيق التحميل المحدَّد مسبقًا المتوفّر في المكتبة:

<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

2. أنشئ مثيلًا له في glanceAppWidget على GlanceAppWidgetReceiver:

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

لقد أعددت الآن AppWidget باستخدام Glance.

إنشاء واجهة مستخدم

يوضّح المقتطف التالي كيفية إنشاء واجهة المستخدم:

/* 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
            MyContent()
        }
    }

    @Composable
    private fun MyContent() {
        Column(
            modifier = GlanceModifier.fillMaxSize(),
            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

ينفِّذ نموذج التعليمات البرمجية السابق ما يلي:

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

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