تصميم سريع الاستجابة/تكيّفي مع عدد مشاهدات

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

التصميم سريع الاستجابة

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

ConstraintLayout

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

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

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

العرض والارتفاع المتجاوب

لضمان استجابة التنسيق لأحجام العرض المختلفة، استخدِم wrap_content أو match_parent أو 0dp (match constraint) لعرض مكوّنات طريقة العرض وارتفاعها بدلاً من القيم غير القابلة للتغيير:

• wrap_content: يضبط طريقة العرض حجمها ليناسب المحتوى الذي تتضمنه طريقة العرض.
• match_parent: يتم توسيع العرض أكبر قدر ممكن ضمن العرض الرئيسي.
• 0dp (match constraint): في ConstraintLayout، على غرار match_parent. يأخذ العرض كل المساحة المتاحة ضمن قيود طريقة العرض.

مثلاً:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

يوضّح الشكل 4 كيفية ضبط عرض وارتفاع TextView مع تغيُّر عرض العرض مع اتجاه الجهاز.

يضبط TextView عرضه لملء كل المساحة المتاحة (match_parent) وارتفاعه على القدر الذي يتطلّبه ارتفاع النص المضمَّن (wrap_content) بالضبط، ما يتيح للعرض التكيف مع أبعاد عرض مختلفة وكميات مختلفة من النص.

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

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

التصميم التكيّفي

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

SlidingPaneLayout لواجهات المستخدم على شكل قائمة بالتفاصيل

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

تُدير SlidingPaneLayout منطق تحديد أي من تجربتَي المستخدم المناسبتَين لحجم النافذة الحالي:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

إنّ السمتَين layout_width وlayout_weight لطريقة العرض الواردة في SlidingPaneLayout تحدّدان سلوك SlidingPaneLayout. في المثال، إذا كانت النافذة كبيرة بما يكفي (بعرض 580 بكسل مستقل الكثافة على الأقل) لعرض كلتا طريقتَي العرض، يتم عرض اللوحات جنبًا إلى جنب. ولكن إذا كان عرض النافذة أصغر من 580 وحدة بكسل مستقلة الكثافة، فسيتم تمرير الأجزاء فوق بعضها بعضًا لتشغل نافذة التطبيق بالكامل بشكل فردي.

إذا كان عرض النافذة أكبر من إجمالي الحد الأدنى للعرض المحدَّد (580 بكسل مستقل الكثافة)، يمكن استخدام قيم layout_weight لضبط حجم الجزءَين بشكل متناسب. وفي هذا المثال، يكون عرض جزء القائمة دائمًا 280 بكسل مستقل الكثافة (dp) لأنه ليس له قيمة وزن. ومع ذلك، يملأ جزء التفاصيل دائمًا أي مساحة أفقية تتجاوز 580 بكسل مستقل الكثافة بسبب إعداد layout_weight لطريقة العرض.

موارد التخطيط البديلة

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

يمكنك توفير تنسيقات تكيّفية خاصة بالشاشة من خلال إنشاء أدلة res/layout/ إضافية في رمز المصدر لتطبيقك. قم بإنشاء دليل لكل تكوين شاشة يتطلب تخطيطًا مختلفًا. بعد ذلك، أضِف مؤهِّلاً لإعدادات الشاشة إلى اسم الدليل layout (على سبيل المثال، layout-w600dp للشاشات التي يتوفّر فيها عرض يبلغ 600 بكسل مستقل الكثافة).

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

لإنشاء تنسيقات بديلة في "استوديو Android"، يُرجى الاطّلاع على استخدام صيغ التنسيقات لتحسين التطبيقات للشاشات المختلفة في تطوير واجهة مستخدم باستخدام "الملفات الشخصية".

مؤهِّل أصغر عرض

يتيح لك مؤهِّل حجم الشاشة أصغر عرض توفير تنسيقات بديلة للشاشات التي يكون الحدّ الأدنى للعرض مقاسًا بوحدات بكسل مستقلة الكثافة (dp).

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

على سبيل المثال، يمكنك إنشاء تنسيق باسم main_activity تم تحسينه للهواتف والأجهزة اللوحية من خلال إنشاء إصدارات مختلفة من الملف في أدلة مختلفة:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

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

في ما يلي كيفية توافق قيم العرض الأصغر الأخرى مع أحجام الشاشات النموذجية:

• 320 بكسل مستقل الكثافة: شاشة هاتف صغيرة (240×320 بكسل في البوصة، 320×480 mdpi، 480×800 hdpi، إلخ.)
• 480 بكسل مستقل الكثافة: شاشة هاتف كبيرة تبلغ حوالي 5 بوصة (480 × 800 بكسل في البوصة)
• 600dp: جهاز لوحي مقاس 7 بوصة (600x1024 mdpi)
• 720dp: جهاز لوحي مقاس 10 بوصة (720x1280 mdpi، 800x1280 mdpi، إلخ.)

يقدّم الشكل التالي عرضًا أكثر تفصيلاً لكيفية توافق عروض الأسعار المختلفة لوحدات الكثافة بكسل (dp) للشاشات مع أحجام الشاشة واتجاهاتها المختلفة.

قيم مؤهِّل أصغر عرض هي dp، لأنّ المهم هو حجم مساحة العرض المتاحة بعد أن يراعي النظام كثافة وحدات البكسل (وليس دقة البكسل الأوّلية).

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

مؤهِّل العرض المتاح

بدلاً من تغيير التنسيق على أساس أصغر عرض للشاشة، قد ترغب في تغيير التنسيق بناءً على مقدار العرض أو الارتفاع المتاح. على سبيل المثال، يمكنك استخدام تنسيق من جزأين عندما توفّر الشاشة عرضًا 600 وحدة بكسل مستقلة الكثافة (dp) على الأقل، الأمر الذي قد يتغير حسب ما إذا كان الجهاز في الاتجاه الأفقي أو العمودي. وفي هذه الحالة، عليك استخدام مؤهل العرض المتوفّر على النحو التالي:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

إذا كان الارتفاع المتوفر مصدر قلق لتطبيقك، يمكنك استخدام مؤهل الارتفاع المتوفر. على سبيل المثال، layout-h600dp للشاشات التي لا يقلّ ارتفاعها عن 600 وحدة بكسل مستقلة الكثافة (dp).

مؤهلات الاتجاه

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

لإجراء ذلك، يمكنك إضافة المؤهِّل port أو land إلى أسماء دليل التنسيق. ولكن تأكد من أن مؤهلات الاتجاه تأتي بعد مؤهلات الحجم. مثلاً:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

لمزيد من المعلومات عن جميع مؤهلات ضبط الشاشة، يُرجى الاطّلاع على نظرة عامة على موارد التطبيق.

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

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

لتطبيق التنسيقات التكيُّفية آليًا، اتّبِع الخطوات التالية:

• إنشاء موارد تنسيق استنادًا إلى نقاط التوقف لفئة حجم النافذة
• احسب فئات حجم النوافذ للعرض والارتفاع في تطبيقك باستخدام الدالة WindowSizeClass#compute() من مكتبة Jetpack WindowManager
• تضخيم مورد التخطيط لفئات حجم النوافذ الحالية

لمزيد من المعلومات، راجِع فئات حجم النافذة.

مكوّنات واجهة المستخدم النموذجية التي تستخدم الأجزاء

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

على سبيل المثال، يمكن تطبيق نمط تفاصيل القائمة (راجِع SlidingPaneLayout أعلاه) مع جزء واحد يحتوي على القائمة وجزء آخر يحتوي على تفاصيل عناصر القائمة. على الشاشات الكبيرة، يمكن أن تظهر الأجزاء جنبًا إلى جنب، وعلى الشاشات الصغيرة بشكلٍ فردي ملء الشاشة.

لمعرفة المزيد من المعلومات، اطّلِع على نظرة عامة على الأجزاء.

تضمين الأنشطة

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

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

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

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

لمزيد من المعلومات، راجع تضمين الأنشطة.

أحجام الشاشة ونِسب العرض إلى الارتفاع

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

يتوافق Android 10 (المستوى 29 لواجهة برمجة التطبيقات) والإصدارات الأحدث مع مجموعة كبيرة من نِسب العرض إلى الارتفاع. قد تختلف أشكال الأجهزة القابلة للطي بين الشاشات الطويلة والضيقة، مثلاً بنسبة عرض إلى ارتفاع 21:9 عند طيها، إلى نسبة عرض إلى ارتفاع مربّعة تبلغ 1:1 عندما يكون الجهاز غير مطوي.

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

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

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

مصادر إضافية

• Material Design — فهم التنسيق