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

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

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

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

تخطيط القيد

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

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

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

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

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

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

لإنشاء تنسيقات بديلة في "استوديو 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 بكسل لكل بوصة، 480×800 بكسل لكل بوصة، وما إلى ذلك)
• 480 بكسل مستقل الكثافة: شاشة هاتف كبيرة بحجم 5 بوصات تقريبًا (480×800 mdpi)
• 600 بكسل مستقل الكثافة: 7 بوصة جهاز لوحي (600×1024 mdpi)
• 720 بكسل مستقل الكثافة: 10 بوصة جهاز لوحي (720×1280 mdpi، و800×1280 mdpi، وما إلى ذلك)

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

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

الأحجام التي تحددها باستخدام مؤهلات الموارد مثل أصغر عرض وليس أحجام الشاشة الفعلية. وإنما تحدد الأحجام العرض أو الارتفاع التي تكون المتوفّرة لنافذة تطبيقك من وحدات 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 الاتصالات.

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

لمزيد من المعلومات، يُرجى الاطّلاع على "النشاط". التضمين.

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

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

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

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

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

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

مصادر إضافية

• التصميم المتعدد الأبعاد — فهم التنسيق