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

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

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

نص

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

النص فقط

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

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

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

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

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

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

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

شريط الأدوات

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

القوائم

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

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

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

قائمة التحقّق

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

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

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

صورة تجاوز الهوامش بشكل كامل

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

شبكة

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

صورة فقط

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

الصورة والنص

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

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

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

التصميم الأساسي	الملفات المرجعية	الإرشادات
تنسيق قائمة الإجراءات	ActionListAppWidget.kt ActionListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeActionListDataRepository.kt sample_action_list_widget_info.xml dimens.xml strings.xml sample_home_icon.xml sample_power_settings_icon.xml sample_bulb_icon.xml sample_thermostat_icon.xml sample_ac_icon.xml sample_door_icon.xml sample_arrow_right_icon.xml sample_no_data_icon.xml sample_add_icon.xml	التعامل مع إجراءات عناصر القائمة باستخدام عمليات معاودة الاتصال الخاصة بإجراءات Glance والتأكّد من تعديل الحالة بشكل صحيح
تنسيق قائمة التحقّق	CheckListAppWidget.kt CheckListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeCheckListDataRepository.kt sample_check_list_widget_info.xml dimens.xml strings.xml sample_pin_icon.xml sample_checked_circle_icon.xml sample_circle_icon.xml sample_delete_icon.xml sample_edit_icon.xml sample_snooze_icon.xml sample_no_data_icon.xml sample_add_icon.xml	تنفيذ تبديل حالة مربّع الاختيار باستخدام مَعلمات الإجراء أو عمليات الرجوع لتعديل عناصر المجموعة استخدِم عمليات ردّ الاتصال الخاصة بإجراءات Glance، مثل `actionRunCallback` أو `ActionCallback(actionParametersOf(...))` أو `actionStartActivity(...)`، لمعلَمات `onClick` الخاصة بالأداة من أجل معالجة أحداث النقر، مثل النقر على مربّع اختيار.
تنسيق شريط الأدوات التعبيري	ExpressiveToolbarAppWidget.kt ExpressiveToolbarLayout.kt sample_expressive_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml four_side_cookie_background.xml sample_edit_icon.xml sample_share_icon.xml sample_delete_icon.xml sample_info_icon.xml sample_add_icon.xml sample_file_upload_icon.xml sample_mic_icon.xml sample_camera_icon.xml	تجنُّب أخطاء استيراد `ColorProvider`: استورِد `androidx.glance.unit.ColorProvider` واستخدِم `androidx.glance.color.ColorProvider(dayColor, nightColor)`. استخدِم `GlanceModifier.background(Color)` مباشرةً لألوان الخلفية الثابتة بدلاً من `ColorProvider`.
تنسيق شبكة الصور	ImageGridAppWidget.kt ImageGridLayout.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeImageGridDataRepository.kt sample_image_grid_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_grid_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	استخدِم ألوانًا ثابتة (`GlanceModifier.background`) أو عناصر قابلة للرسم محلية لعناصر الصور ما لم يتم ضبط مكتبة لتحميل الصور أو طلبها.
تنسيق قائمة النصوص والصور	ImageTextListAppWidget.kt ImageTextListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeImageTextListDataRepository.kt sample_image_text_list_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_image_icon.xml sample_heart_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	حالات الاستخدام الشائعة: خلاصات الأخبار وقوائم المقالات وسجلّات التمارين الرياضية وخلاصات الرسائل وقوائم الصور المصغّرة العمودية تحقيق التوازن بين ارتفاع صف القائمة واقتصاص النص عند الجمع بين الصور المصغّرة والنص الأساسي/الثانوي
تنسيق النص الطويل	LongTextAppWidget.kt LongTextLayout.kt FakeLongTextRepository.kt sample_long_text_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml	إذا كنت تضرب قيم `Dp`، مثل `2 * padding`، استورِد `androidx.compose.ui.unit.times`. اتّبِع قواعد تحديد الحجم: تأكَّد من استخدام السمات من ملف `dimens.xml` في عمليات ضبط المساحة المتروكة وتغيير حجم الخط.
تنسيق شريط أدوات البحث	SearchToolBarAppWidget.kt SearchToolBarLayout.kt sample_search_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_search_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml sample_share_icon.xml	تجنُّب أخطاء استيراد `ColorProvider`: استورِد `androidx.glance.unit.ColorProvider` واستخدِم `androidx.glance.color.ColorProvider(dayColor, nightColor)`. استخدِم `GlanceModifier.background(Color)` مباشرةً لألوان الخلفية الثابتة بدلاً من ColorProvider.
تنسيق الصورة بملء الشاشة / التمرير السريع	FullBleedImageAppWidget.kt FullBleedImageLayout.kt sample_full_bleed_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_scrim_gradient.xml sample_placeholder_image.png sample_app_logo.xml sample_info_icon.xml sample_no_data_icon.xml	اضبط `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` على LazyColumn لتفعيل التمرير السريع. في حال تنفيذ ميزة "التمرير السريع"، يجب استخدام الإصدار 1.3.0-alpha02 أو إصدار أحدث من Glance، والإصدار 37 (Baklava) أو إصدار أحدث من حزمة تطوير البرامج (SDK) المخصّصة للتجميع، والإصدار 9.1.0 أو إصدار أحدث من المكوّن الإضافي لنظام Gradle المتوافق مع Android (AGP). اضبط `override val sizeMode: SizeMode = SizeMode.Exact` في فئة موفّر التطبيق المصغّر.
تنسيق شريط الأدوات العادي	ToolBarAppWidget.kt ToolBarLayout.kt sample_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_app_logo.xml sample_search_icon.xml sample_add_icon.xml sample_edit_icon.xml sample_share_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml	راجِع قسم "تحديد المشاكل وحلّها" لتجنُّب أخطاء استيراد `ColorProvider`: استخدِم `androidx.glance.color.ColorProvider(dayColor, nightColor)`. استخدِم `GlanceModifier.background(Color)` مباشرةً لألوان الخلفية الثابتة بدلاً من `ColorProvider`.
تنسيق النص مع الصورة	TextWithImageAppWidget.kt TextWithImageLayout.kt FakeTextWithImageRepository.kt sample_text_with_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml sample_placeholder_image.png sample_info_icon.xml sample_no_data_icon.xml	اتّبِع قواعد تحديد حجم التنسيق المتجاوب لاستيعاب النص والصورة جنبًا إلى جنب أو مكدّسة استنادًا إلى أبعاد الأداة المتاحة.