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

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

يُرجى تعريف "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.

    ويكمن الاختلاف الوحيد في ميزة "نظرة سريعة" في أنّه لا يتوفّر 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<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

ينفذ نموذج الرمز السابق ما يلي:

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

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

السابق
إعداد ميزة "نظرة سريعة"
التالي
التعامل مع الأخطاء من خلال ميزة "نظرة سريعة"