إنشاء التطبيقات التكيُّفية

أكثر من 300 مليون جهاز Android ذي الشاشات الكبيرة، بما في ذلك الأجهزة اللوحية، تُستخدَم الأجهزة القابلة للطي وأجهزة ChromeOS وشاشات السيارات وأجهزة التلفزيون حاليًا، مع المزيد من قادمة باستمرار. لتقديم أفضل تجربة للمستخدم مع الأعداد المتنامية الأجهزة المتنوعة ذات الشاشات الكبيرة مثل وكذلك على الهواتف العادية التكيُّفية.

ما هي التطبيقات التكيُّفية؟

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

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

الشكل 1. يعمل التطبيق التكيُّفي على تحسين التنسيق ليناسب أحجام النوافذ المختلفة.

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

تبدو التطبيقات التكيُّفية رائعة وتعمل بشكل جيد على أي جهاز في أي إعدادات.

ما أهمية إنشاء واجهات مستخدم تكيُّفية؟

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

إنّ التطبيقات التي تقتصر على مهمة واحدة على الهواتف العادية تفوت عددًا كبيرًا من المستخدمين قاعدة من الاحتمالات المتنوعة.

Google Play

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

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

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

الشكل 2. تحذير بشأن الجودة الفنية على صفحة تفاصيل التطبيق

صمِّم تطبيقات تكيّفية لزيادة قابلية الاكتشاف على Google Play وزيادة عدد الأجهزة التي يمكنها تنزيل تطبيقك

كيفية البدء

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

لإنشاء تطبيق تكيُّفي يتوافق مع جميع أحجام الشاشات وإعداداتها، اتّبِع الخطوات التالية: ما يلي:

  • استخدم فئات حجم النافذة لاتخاذ قرارات التخطيط
  • إنشاء باستخدام مكتبة Compose Material 3 Adaptive
  • إتاحة الإدخال خارج نطاق اللمس
  • الاختبار على جميع أنواع الأجهزة

فئات حجم النافذة

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

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

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

تصوير فئات حجم النوافذ ذات العرض الصغير والمتوسط والموسع.
الشكل 3. فئات حجم النافذة استنادًا إلى عرض العرض.

عليك احتساب قيمة WindowSizeClass في تطبيقك باستخدام currentWindowAdaptiveInfo() دالة المستوى الأعلى في إنشاء مكتبة Material 3 التكيُّفية تُنتج الدالة مثيلاً WindowAdaptiveInfo، الذي يتضمّن windowSizeClass تطبيقك تتلقّى تحديثات كلما تغيرت فئة حجم النافذة:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

أجزاء المحتوى

يُشار أحيانًا إلى تنسيق النشاط باسم الشاشة. على سبيل المثال، التطبيق شاشة رئيسية وشاشة قائمة وشاشة تفاصيل العنصر. تشير رسالة الأشكال البيانية إلى أن كل نشاط يملأ شاشة الجهاز.

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

تتيح لك فئات حجم النافذة تحديد عدد أجزاء المحتوى المطلوب عرضها فيها. تخطيطات متعددة الأجزاء، كما هو محدد في التصميم متعدد الأبعاد.

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

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

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

الشكل 5 تنسيق القائمة التفصيلية مع جزء القائمة كهدف للتنقل.
الشكل 6. تنسيق قائمة التفاصيل مع جزء التفاصيل كهدف تنقل.

إنشاء المادة 3 التكيّفية

Jetpack Compose هي الطريقة الحديثة والمستندة إلى البيان لإنشاء التطبيقات التكيُّفية. بدون عبء التكرار والصيانة لملفات التخطيط المتعددة.

تحتوي مكتبة Compose Material 3 Adaptive على عناصر قابلة للإنشاء تدير وفئات حجم النافذة ومكونات التنقل والتخطيطات متعددة الأجزاء الأوضاع القابلة للطيّ ومكان المفصّلات، مثل:

  • NavigationSuiteScaffold: التبديل تلقائيًا بين شريط التنقّل وشريط التنقل حسب فئة حجم نافذة التطبيق ووضع الجهاز.

  • ListDetailPaneScaffold: تنفيذ عنوان URL الأساسي لتفاصيل القائمة

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

  • SupportingPaneScaffold: لتنفيذ لوحة الدعم الأساسية

    تعرض لوحة المحتوى الرئيسية وجزءًا داعمًا في النافذة الموسّعة. فئة الحجم، ولكن فقط جزء المحتوى الرئيسي على النوافذ الصغيرة والمتوسطة الحجم الصفوف.

تُعد مكتبة Compose Material 3 Adaptive ضرورية وتطوير التطبيقات التكيفية.

الضبط والاستمرارية

تحتفظ التطبيقات التكيُّفية بالاستمرارية أثناء تغييرات الإعدادات.

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

بشكلٍ تلقائي، تُعيد تغييرات الإعدادات إنشاء النشاط على التطبيقات وجميع الأنشطة تُفقد. للحفاظ على الاستمرارية، تحفظ التطبيقات التكيُّفية الحالة في في طريقة onSaveInstanceState() للنشاط أو في ViewModel.

الوضعية

تستجيب التطبيقات التكيُّفية للتغييرات في وضع الأجهزة القابلة للطي. الوضعيات تشمل وضع الطاولة ووضعية الكتاب.

الشكل 7. جهاز قابل للطي في وضع "التثبيت على سطح مستوٍ"

تتيح لك واجهة WindowInfoTracker في Jetpack WindowManager إجراء ما يلي: الحصول على قائمة بكائنات DisplayFeature للجهاز. على الشاشة هو FoldingFeature.State، والتي تشير إلى ما إذا كان الجهاز مفتوح تمامًا أو نصفه.

توفر مكتبة Compose Material 3 Adaptive دالة المستوى الأعلى currentWindowAdaptiveInfo()، التي تعرض مثال على WindowAdaptiveInfo يحتوي على windowPosture.

إدخال بيانات خارج نطاق اللمس

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

تتوافق التطبيقات التكيُّفية مع أجهزة الإدخال الخارجية، ولكن يتم إنجاز الكثير من المهام من خلال إطار عمل Android:

  • الإصدار 1.7 من Jetpack Compose والإصدارات الأحدث: التنقّل في علامة تبويب لوحة المفاتيح والماوس أو تكون ميزة النقر والاختيار والتمرير على لوحة اللمس متاحة بشكل تلقائي.

  • مكتبة Jetpack androidx.compose.material3: للسماح للمستخدمين بالكتابة إلى أي مكوّن من مكوِّنات TextField باستخدام قلم الشاشة.

  • مساعد اختصارات لوحة المفاتيح: يجعل النظام الأساسي ولوحة مفاتيح التطبيقات في Android أو اختصارات قابلة للاكتشاف من قِبل المستخدمين. نشر اختصارات لوحة المفاتيح لتطبيقك في مساعد اختصارات لوحة المفاتيح من خلال تجاوز رد الاتصال بالفترة onProvideKeyboardShortcuts().

للتوافق الكامل مع أشكال الأجهزة بجميع أحجامها، تتيح التطبيقات التكيُّفية إدخال جميع الأحجام الأنواع.

طريقة اختبار التطبيقات التكيُّفية

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

إرشادات جودة التطبيقات ذات الشاشات الكبيرة

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

الإعدادات المتعددة

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

باستخدام دالة الإضافة DeviceConfigurationOverride.then()، يمكنك اختبار معلمات تهيئة متعددة، مثل حجم الخط واللغة والمظهر وحجم التخطيط، وكل ذلك في نفس الوقت.

لقطات الشاشة من جهة المضيف

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

لمزيد من المعلومات، يُرجى الاطّلاع على إنشاء اختبار لقطة شاشة للمعاينة.

إنشاء المعاينات

يتيح لك إنشاء المعاينات التحقق من واجهة المستخدم للتطبيق في عرض التصميم لنظام Android استوديو YouTube. تستخدم المعاينات التعليقات التوضيحية، مثل @PreviewScreenSizes، @PreviewFontScale و@PreviewLightDark للسماح لك بالاطّلاع على محتوى قابل للإنشاء المحتوى بتكوينات مختلفة. ويمكنك أيضًا التفاعل مع المعاينات.

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

لمزيد من المعلومات، يُرجى الاطّلاع على معاينة واجهة المستخدم باستخدام معاينات قابلة للإنشاء.

أدوات محاكاة

يوفر "استوديو Android" مجموعة متنوعة من أدوات المحاكاة لاختبار أحجام التنسيقات المختلفة:

  • محاكي تغيير الحجم: لمحاكاة هاتف أو جهاز لوحي أو جهاز قابل للطي والسماح التبديل بينهما بكل سهولة
  • مُحاكي هاتف Pixel Fold: يحاكي شاشة هاتف Pixel Fold الكبيرة القابلة للطي
  • مُحاكي Pixel Tablet: يحاكي جهاز Pixel Tablet المزوّد بشاشة كبيرة
  • محاكي سطح المكتب: يُفعّل اختبار النوافذ الحرة والتمرير بالماوس اختصارات لوحة المفاتيح

البث من الجهاز عن بُعد

يمكنك الاتصال بأمان بأجهزة Android البعيدة المستضافة في مراكز بيانات Google وتشغيلها تطبيقك على أحدث أجهزة Pixel وSamsung. تثبيت التطبيقات وتصحيح الأخطاء في تشغيلها أوامر ADB، وتدوير الأجهزة وطيها لضمان عمل تطبيقك بشكل جيد على مجموعة متنوعة من الأجهزة الحقيقية.

تم دمج ميزة البث باستخدام الجهاز عن بُعد في "استوديو Android". لمزيد من المعلومات يُرجى الاطّلاع على المقالة بث جهاز Android المدعوم من Firebase.

مصادر إضافية