تنسيقات التطبيقات المصغّرة الأساسية

يمكنكم إنشاء تنسيقات فعّالة للتطبيقات المصغّرة من خلال تحديد المحتوى الأساسي أولاً. يحدّد التنسيق كيفية تنظيم المعلومات والعناصر التفاعلية داخل التطبيق المصغّر. يقدّم Android عدة تنسيقات جاهزة لأشرطة الأدوات والنصوص والتطبيقات المصغّرة من نوع القوائم والشبكات لتبسيط هذه العملية.

نص

تُعدّ تنسيقات النصوص مثالية لعرض معلومات موجزة. يمكنكم تحسين المظهر المرئي للتطبيق المصغّر من خلال تضمين صورة بجانب النص بشكل اختياري.

النص فقط

هذا التنسيق مثالي للعناوين أو حالات التعديل أو الأوصاف القصيرة أو أي سيناريو ينقل فيه سطر واحد من النص الرسالة بفعالية.

النصوص والصور

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

أشرطة الأدوات

يمكنكم استخدام تنسيقات أشرطة الأدوات لتزويد المستخدمين بإمكانية الوصول السريع إلى المهام المستخدَمة بشكل متكرر في تطبيقكم، وذلك في تنسيق مرن يتكيّف مع أحجام التطبيقات المصغّرة المختلفة.

شريط أدوات البحث

تم تصميم تنسيق شريط أدوات البحث بشكل متعمّد للتركيز على البحث كإجراء أساسي في شريط الأدوات. يمكن أن تتيح الأزرار الإضافية سهلة الاستخدام الوصول السريع إلى الوظائف المستخدَمة بشكل متكرر.

شريط الأدوات

تعرض أشرطة الأدوات العلامة التجارية للتطبيق، يليها أزرار للمهام الأكثر استخدامًا وهي مثالية للإعدادات القابلة للتبديل أو روابط المهام. عند تغيير الحجم، يمكن إخفاء الخيارات الأقل استخدامًا لصالح الإجراءات الأكثر شيوعًا. يمكنكم استخدام نقاط التوقف لإضافة زر جديد قابل للنقر لا يقل حجمه عن 48 وحدة بكسل مستقلة الكثافة عندما يكون هناك مساحة كافية.

القوائم

يمكنكم استخدام تنسيقات القوائم لتنظيم عناصر متعددة بتنسيق واضح وقابل للمسح. هذا التنسيق مثالي لعناوين الأخبار أو قوائم المهام أو الرسائل. يمكنكم تنظيم المحتوى في قائمة منظَّمة وقابلة للمسح. يمكنكم الاختيار بين العرض في حاوية أو بدون حاوية استنادًا إلى احتياجات المحتوى.

قائمة النصوص والصور

تُعدّ قوائم النصوص والصور القابلة للمسح مثالية لعرض أنواع متعددة من المحتوى، مثل عناوين الأخبار أو قوائم التشغيل التي تتضمّن صورة الغلاف أو الرسائل.

قائمة التحقق

تنسيق قائمة التحقق مثالي لعرض المهام، ما يوفّر أهدافًا واضحة للنقر ليتمكّن المستخدمون من وضع علامة "تم" على العناصر بسرعة.

قائمة الإجراءات

يمكنكم توفير تجميع بديهي لعناصر التحكّم باستخدام قوائم الإجراءات، حيث تقدّم الحالات المرئية "مفعَّل" و"غير مفعَّل" ملاحظات فورية عن حالات العناصر.

صورة بدون حواف

هذا التنسيق مثالي لعرض صور غامرة بدون حواف على Android 17 والإصدارات الأحدث، ويستخدم التمرير السريع لضمان محاذاة كل عنصر فرعي تمامًا مع ارتفاع حاوية التطبيق المصغّر.

شبكة

يمكنكم عرض الصور في شبكة مضغوطة ومرنة وغنية بصريًا مع تصنيفات اختيارية. يمكنكم استخدام أعمدة وصفوف تتكيّف مع أحجام الشاشات المختلفة.

صورة فقط

يمكنكم إنشاء معارض صور قابلة للتمرير ومؤثرة بصريًا باستخدام شبكات الصور فقط. تتكيف الصفوف والأعمدة تلقائيًا مع أحجام الشاشات المختلفة لـ تقديم العرض الأمثل.

الصور والنصوص

يمكنكم أيضًا تضمين تصنيفات وأوصاف نصية، ما يثري محتوى شبكة الصور بسياق ومعلومات إضافية.

عيّنات تعليمات برمجية

يربط الجدول التالي كل تنسيق أساسي بتنفيذ Jetpack Glance المقابل له في مستودع Android Platform Samples على GitHub.

التنسيق الأساسي الملفات المرجعية الإرشادات
تنسيق قائمة الإجراءات
  • يمكنكم التعامل مع إجراءات عناصر القائمة باستخدام معاودات الاتصال للإجراءات في Glance وضمان تعديل الحالة بشكل صحيح.
تنسيق قائمة التحقق
  • يمكنكم تنفيذ تبديل حالة مربّع الاختيار باستخدام مَعلمات الإجراء أو معاودات الاتصال لتعديل عناصر المجموعة.
  • يمكنكم استخدام معاودات الاتصال للإجراءات في Glance، مثل `actionRunCallback`، `ActionCallback(actionParametersOf(...))` أو `actionStartActivity(...)`، لمَعلمات `onClick` في التطبيق المصغّر للتعامل مع حدث ناتج عن النقر، مثل النقر على مربّع اختيار.
تنسيق شريط الأدوات التعبيري
  • لتجنُّب أخطاء استيراد `ColorProvider`، يمكنكم استيراد `androidx.glance.unit.ColorProvider` واستخدام `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • يمكنكم استخدام `GlanceModifier.background(Color)` مباشرةً لألوان الخلفية الثابتة بدلاً من `ColorProvider`.
تنسيق شبكة الصور
  • يمكنكم استخدام ألوان ثابتة (`GlanceModifier.background`) أو عناصر رسم محلية لعناصر الصور ما لم يتم ضبط مكتبة تحميل الصور أو طلبها.
تنسيق قائمة الصور والنصوص
  • حالات الاستخدام الشائعة: خلاصات الأخبار وقوائم المقالات وسجلّات التمارين وخلاصات الرسائل وقوائم الصور المصغّرة العمودية.
  • يمكنكم تحقيق التوازن بين ارتفاع صف القائمة واقتصاص النص عند الجمع بين الصور المصغّرة والنص الأساسي/الثانوي.
تنسيق النص الطويل
  • إذا كنتم تضربون قيم `Dp`، مثل `2 * padding`، يمكنكم استيراد `androidx.compose.ui.unit.times`.
  • يُرجى اتّباع قواعد تغيير الحجم: يجب التأكّد من استخدام الأبعاد من `dimens.xml` لتعديل المساحة المتروكة وتنسيق الخطوط.
تنسيق شريط أدوات البحث
  • لتجنُّب أخطاء استيراد `ColorProvider`، يمكنكم استيراد `androidx.glance.unit.ColorProvider` واستخدام `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • يمكنكم استخدام `GlanceModifier.background(Color)` مباشرةً لألوان الخلفية الثابتة بدلاً من ColorProvider.
تنسيق الصورة بدون حواف / التمرير السريع
  • يمكنكم ضبط `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` على LazyColumn للتمرير السريع.
  • إذا كنتم تنفّذون التمرير السريع، يجب استخدام Glance 1.3.0-alpha02 أو إصدار أحدث، وتجميع حزمة تطوير البرامج (SDK) 37 (Baklava) أو إصدار أحدث، والمكوّن الإضافي لنظام Gradle المتوافق مع Android (AGP) 9.1.0 أو إصدار أحدث.
  • يمكنكم ضبط `override val sizeMode: SizeMode = SizeMode.Exact` في فئة مقدّم التطبيق المصغّر.
تنسيق شريط الأدوات العادي
  • يمكنكم الاطّلاع على مقالة تحديد المشاكل وحلّها لتجنُّب أخطاء استيراد `ColorProvider`: يمكنكم استخدام `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • يمكنكم استخدام `GlanceModifier.background(Color)` مباشرةً لألوان الخلفية الثابتة بدلاً من `ColorProvider`.
تنسيق النص مع الصورة
  • يُرجى اتّباع قواعد تغيير حجم التنسيق سريع الاستجابة لاستيعاب النص والصورة جنبًا إلى جنب أو مكدّسة استنادًا إلى أبعاد التطبيق المصغّر المتاحة.