توفر التخطيطات سريعة الاستجابة/التكيُّفية تجربة مستخدم محسنة بغض النظر عن حجم الشاشة. نفِّذ تصميمات سريعة الاستجابة/التكيُّفية لتمكين تطبيقك المستند إلى طريقة العرض من التوافق مع جميع أحجام العرض والاتجاهات وعمليات الضبط، بما في ذلك الإعدادات التي يمكن تغيير حجمها مثل وضع النوافذ المتعددة.
التصميم سريع الاستجابة
تتمثل الخطوة الأولى في دعم مجموعة متنوعة من عوامل أشكال الأجهزة في إنشاء تنسيق يستجيب للاختلافات في مقدار مساحة العرض المتاحة لتطبيقك.
تنسيق 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 بكسل مستقل الكثافة لأنه ليس له وزن.
ومع ذلك، يملأ جزء التفاصيل دائمًا أي مساحة أفقية تزيد عن 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)
يحدد مؤهل أصغر عرض أصغر جانبي الشاشة، بغض النظر عن الاتجاه الحالي للجهاز، لذا فهو يُعد إحدى طرق تحديد حجم العرض الإجمالي المتاح لتنسيقك.
وفي ما يلي كيفية توافق قيم العرض الأصغر الأخرى مع أحجام الشاشات النموذجية:
- 320dp: شاشة هاتف صغيرة (240x320 ldpi، 320x480 mdpi، 480x800 hdpi، إلخ.)
- 480 بكسل مستقل الكثافة: شاشة هاتف كبيرة بحجم 5 بوصات تقريبًا (480 × 800 بكسل لكل بوصة)
- 600dp: جهاز لوحي مقاس 7 بوصة (600x1024 mdpi)
- 720dp: جهاز لوحي مقاس 10 بوصة (720x1280 mdpi، 800x1280 mdpi، إلخ.)
يقدم الشكل التالي عرضًا أكثر تفصيلاً لكيفية توافق عروض الأسعار المختلفة لوحدات البكسل المستقلة (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 API.
يدعم تضمين الأنشطة التغييرات في اتجاه الجهاز والأجهزة القابلة للطي، وأنشطة التجميع وإلغاء تكديس الجهاز أثناء تدوير الجهاز أو طيه وفتحه.
لمزيد من المعلومات، يُرجى الاطّلاع على صفحة تضمين الأنشطة.
أحجام الشاشة ونسب العرض إلى الارتفاع
اختبر تطبيقك على مجموعة متنوعة من أحجام الشاشات ونسب العرض إلى الارتفاع لضمان ضبط واجهة المستخدم بشكل صحيح.
يتوافق نظام التشغيل Android 10 (المستوى 29 لواجهة برمجة التطبيقات) والإصدارات الأحدث مع مجموعة كبيرة من نِسب العرض إلى الارتفاع. يمكن أن تختلف أشكال الأجهزة القابلة للطي بين الشاشات الطويلة والضيقة، مثل نسبة عرض إلى ارتفاع 21:9 عند طيها، إلى نسبة عرض إلى ارتفاع مربّعة تبلغ 1:1 عند فتح الجهاز.
لضمان التوافق مع أكبر عدد ممكن من الأجهزة، اختبِر تطبيقاتك لاستيفاء أكبر عدد ممكن من نسب العرض إلى الارتفاع التالية على الشاشة:
إذا لم يكن بإمكانك الوصول إلى الأجهزة بجميع أحجام الشاشات المختلفة التي تريد اختبارها، يمكنك استخدام محاكي Android لمحاكاة أي حجم شاشة تقريبًا.
إذا كنت تفضِّل إجراء الاختبار على جهاز حقيقي ولكن لا يتوفّر لديك جهاز، يمكنك استخدام مركز الاختبار الافتراضي لمنصة Firebase للوصول إلى الأجهزة في مركز بيانات Google.
مراجع إضافية
- التصميم المتعدد الأبعاد — فهم التخطيط