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

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

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

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

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

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

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

لماذا يجب إنشاء واجهات مستخدم قابلة للتكيّف؟

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

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

Google Play

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

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

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

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

كيفية البدء

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

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

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

فئات أحجام النوافذ

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

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

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

لوحات المحتوى

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

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

تتيح لك فئات أحجام النوافذ تحديد عدد لوحات المحتوى التي سيتم عرضها في تصاميم الصفحات المتعدّدة، كما هو محدّد في تصميم المواد.

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

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

Compose Material 3 Adaptive

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

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

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

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

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

• ‫SupportingPaneScaffold: تُنفِّذ تنسيق الشريحة الداعمة الأساسية.

  تعرِض هذه الفئة لوحة المحتوى الرئيسية ولوحة داعمة في فئة حجم النافذة الموسّعة، ولكن تعرِض فقط لوحة المحتوى الرئيسية في فئة حجم النافذة المدمجة والمتوسطة.

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

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

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

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

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

الوضعية

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

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

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

إدخال البيانات بطرق أخرى غير اللمس

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

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

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

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

• مساعِد اختصارات لوحة المفاتيح: يتيح للمستخدمين العثور على اختصارات لوحة مفاتيح منصّة Android والتطبيقات. يمكنك نشر اختصارات لوحة المفاتيح لتطبيقك في مساعد اختصارات لوحة المفاتيح من خلال إلغاء استدعاء النافذة onProvideKeyboardShortcuts().

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

كيفية اختبار التطبيقات المتوافقة مع الأجهزة المتعددة

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

إرشادات جودة التطبيقات المخصّصة للشاشات الكبيرة

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

إعدادات متعدّدة

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

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

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

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

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

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

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

يُبرز Android Studio أيضًا مشاكل الاستخدام الشائعة في المعاينات، مثل buttons أو الحقول النصية التي تكون عريضة جدًا.

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

برامج المحاكاة

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

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

بث المحتوى على جهاز بعيد

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

تم دمج ميزة بث المحتوى على الأجهزة البعيدة في "استوديو Android". لمزيد من المعلومات، راجِع مقالة بث محتوى Android Device Streaming المستند إلى Firebase.

مصادر إضافية

• عرض تقديمي في مؤتمر I/O: إنشاء تطبيقات Android قابلة للتكيّف