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

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

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

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

تنسيق ConstraintLayout

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

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

الشكل 3. أداة تعديل التنسيق في "استوديو Android" تعرض ConstraintLayout.

لمزيد من المعلومات، يُرجى الاطّلاع على إنشاء واجهة مستخدم سريعة الاستجابة باستخدام 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 بتغيُّر عرض العرض مع اتجاه الجهاز.

الشكل 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 بكسل مستقل الكثافة لأنه ليس له وزن. ومع ذلك، يملأ جزء التفاصيل دائمًا أي مساحة أفقية تزيد عن 580 بكسل مستقل الكثافة بسبب إعداد layout_weight لطريقة العرض.

موارد التنسيق البديل

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

الشكل 5. نفس التطبيق باستخدام تخطيطات مختلفة لأحجام عرض مختلفة.

يمكنك توفير تنسيقات تكيّفية خاصة بالشاشة من خلال إنشاء أدلة 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)

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

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

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

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

الشكل 6. نقاط الإيقاف المقترَحة للعرض متوافقة مع أحجام الشاشات المختلفة

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

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

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

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

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 بكسل مستقل الكثافة

مؤهِّلات الاتجاه

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

لإجراء ذلك، يمكنك إضافة المؤهِّل 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 عند فتح الجهاز.

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

الشكل 7. نِسَب عرض إلى ارتفاع مختلفة للشاشة

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

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

مراجع إضافية