احجام مختلفة للشاشة

الإعلانات

دعم احجام مختلفة للشاشة

 

 

دعم احجام مختلفة للشاشة

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

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

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

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

 

تعرض لك هذه الصفحة كيفية دعم أحجام الشاشة المختلفة بإستخدام التقنيات التالية:

  • أستخدم أبعاد العرض التي تسمح للمخطط بإعادة التحجيم
  • قم بإنشاء مخططات بديله لواجهة المستخدم وفقاً لتكوين الشاشة
  • قم بتوفير صور نقطية يمكنها أن تمتد مع العرض “المعاينه”

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

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

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

 

 

 

 

 

دعم احجام مختلفة للشاشة

 

إنشاء مخطط مرن


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

 

 

 

أستخدم المخططات المقيدة

 

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

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

بهذه الطريقة، يمكن أن تتحرك كافة المعاينات، وتتمدد معاً كلما تغير حجم الشاشة.

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

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

وتحرير خصائص المعاينه، كل هذا بدون تحرير أي XML باليد (أنظر الشكل 1).

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

الشكل 1. محرر التصميم في أندرويد ستوديو يعرض ملف مخطط مقيد

 

لكن المخطط المقيد لن يحل كل سيناريوهات المخطط (خاصة للقوائم المحملة بشكلٍ ديناميكي، والتي يجب أن تستخدم لها RecyclerView)..

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

 

 

 

 

تجنب تشفير أحجام المخطط


للتأكد من أن تصميمك مرن، ويتكيف مع أحجام مختلفة للشاشة، يجب عليك إستخدام "wrap_content" و "match_parent" لعرض وإرتفاع معظم مكونات المعاينه، بدلاً من الأحجام المشفرة.

يخبر "wrap_content" المعاينه لتعيين حجمه لما يلزم، ليتناسب مع المحتوى داخل هذه المعاينه.

تؤدي "match_parent" إلى توسيع المعاينه، إلى أقصى حد ممكن، داخل المعاينه الرئيسيه.

مثال:

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

 

على الرغم من أن المخطط الفعلي لهذه المعاينه، يعتمد على سمات أخرى، بناءً على المعاينة الأصليه، أو أية معاينات فرعيه…

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

هذا يسمح للمعاينه بالتكيف مع أحجام مختلفة للشاشة، وأطوال مختلفة للنص.

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

الشكل 2. عرض نص مرن

 

 

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

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

لحسن الحظ، يمكن للمخطط المقيد إنجاز جميع المخططات الممكنة تقريباً، بإستخدام المخطط الخطي بدون تأثيرات الأداء..

لذا يجب عليك محاولة تحويل مخططك إلى مخطط مقيد ومن ثم، يمكنك تحديد المخططات الموزونة بسلاسل مقيده.

ملاحظة: عند استخدامك لمخطط مقيد، يجب ألا تستخدم match_parent. بدلاً من ذلك، قم بتعيين البعد على “0dp” لتمكين سلوك خاص يُسمى “قيود المطابقة”..

وهو عموماً نفس ما تتوقعه من match_parent. لمزيد من المعلومات، راجع كيفية ضبط حجم المعاينه في المخطط المقيد.

 

 

 

 

دعم احجام مختلفة للشاشة

 

إنشاء مخططات بديله


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

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

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

الشكل 3. نفس التطبيق على أحجام مختلفة للشاشة يستخدم مخطط مختلف لكل منها

 

يمكنك تقديم مخططات خاصة بالشاشة عن طريق إنشاء أدلة /res/layout إضافية – واحد لكل تكوين للشاشة يتطلب مخطط مختلف..

ثم إلحاق مؤهل تكوين الشاشة إلى اسم دليل المخطط (مثل layout-w600dp للشاشات التي عرضها المتاح يساوي 600dp).

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

وتغييرات تكوين النافذة (مثل تمكين المستخدم لوضع تعدد النوافذ) عندما يحدد المخطط من تطبيقك.

لإنشاء مخطط بديل في أندرويد ستوديو (بإستخدام الإصدار 3.0 أو أعلى) ، أتبع الخطوات التالية:

1- افتح مخططك الإفتراضي، ثم أنقر فوق “تدوير المعاينه  ” في شريط الأدوات.

2- في القائمة المنسدله، أنقر لإنشاء متغير مقترح مثل إنشاء متغير أفقي أو أنقر فوق إنشاء أخرى.

3- إذا قمت بإختيار إنشاء أخرى، فسيظهر دليل المصادر المحدد.

هنا، حدد مؤهل الشاشة على اليسار وأضفه إلى قائمة المؤهلات المختارة.

عند الإنتهاء من إضافة المؤهلات، أنقر فوق “موافق“. (راجع الأقسام التالية للحصول على معلومات حول مؤهلات حجم الشاشة.)

يؤدي هذا إلى إنشاء ملف مخطط مكرر، في دليل المخطط المناسب، حتى تتمكن من البدء في تخصيص المخطط لمتغير الشاشة هذا.

 

 

 

 

أستخدم مؤهل أصغر عرض

مؤهل حجم الشاشة “أصغر عرض” يسمح لك بتوفير مخططات بديله للشاشات ذات الحد الأدنى للعرض المقاسة بوحدة البكسل حرة الكثافة (dp أو dip).

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

بينما تتجنب أي مخاوف قد تكون لديك، حول كثافات البكسل المختلفة.

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

res/layout/main_activity.xml           # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide and bigger)

 

 

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

في ما يلي كيفية مطابقة قيم أصغر عرض الأخرى لأحجام الشاشة المعتادة:

  • 320dp: شاشة هاتف عادية (240×320 ldpi ، 320×480 mdpi ، hdp 480×800 ، وما إلى ذلك).
  •  480dp: شاشة هاتف كبيرة ~ 5 “(480×800 mdpi).
  •  600dp: جهاز لوحي مقاس 7 بوصات (600×1024 mdpi).
  •  720dp: جهاز لوحي مقاس 10 بوصات (720×1280 mdpi ، 800×1280 mdpi ، إلخ).

 

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

 

الرقم 4. نقاط توقف العرض الموصى بها لدعم أحجام مختلفة للشاشة.

 

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

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

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

إذا تم إستخدام تطبيقك في وضع تعدد النوافذ، فلن يتمكن تطبيقك سوى الوصول إلى حجم تلك النافذة.

عندما يتم تغيير حجم النافذة، فهذا سيؤدي إلى تغيير التكوين مع حجم النافذة الجديد بحيث يمكن للنظام تحديد ملف المخطط المناسب.

وبالتالي، يجب أن تكون الأحجام التي تعلن عنها خاصة بالأحجام المطلوبة لنشاطك – حيث يقوم النظام بحساب أي مساحة تستخدمها واجهة مستخدم النظام عند الإعلان عن مقدار المساحة التي يوفرها لمخططك.

 

 

 

 

إستخدم مؤهل العرض المتوفر

بدلاً من تغيير المخطط بناءً على أصغر عرض للشاشة، قد ترغب في تغيير مخططك بناءً على مقدار العرض أو الارتفاع المتاحة حالياً.

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

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

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

 

إذا كان الإرتفاع المتاح يمثل مصدر قلق بالنسبة لك، فيمكنك القيام بنفس الشيء بإستخدام مؤهل “الإرتفاع المتاح”.

مثال ، مخطط layout-h600dp للشاشات ذات الإرتفاع 600dp على الأقل.

 

 

 

إضافة مؤهلات الإتجاه

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

فقد ترغب أيضاً في تغيير تجربة المستخدم عندما يقوم بالتبديل بين الإتجاهين الرأسي والأفقي.

لذلك يمكنك إضافة المؤهلات الخاصة بالإتجاهين الأفقي والرأسي إلى أسماء دليل المصادر الخاصة بك.

فقط تأكد من أن هذه تأتي بعد مؤهلات الحجم الأخرى. مثال:

res/layout/main_activity.xml                # For handsets
res/layout-land/main_activity.xml           # For handsets in landscape
res/layout-sw600dp/main_activity.xml        # For 7” tablets
res/layout-sw600dp-land/main_activity.xml   # For 7” tablets in landscape

 

لمزيد من المعلومات حول كافة مؤهلات تكوين الشاشة، راجع الجدول رقم 2 في المستند دليل إلى توفير المصادر.

 

 

 

 

نماذج موحدة لمكونات واجهة المستخدم ذات الشظايا

عند تصميم تطبيقك ليلائم أحجام شاشات متعددة، يجب أن تتأكد من أنك لا تكرر سلوك واجهة المستخدم بلا داعٍ عبر أنشطتك.

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

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

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

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

حيث يؤدي تحديد إحدى المقالات من قائمة، إلى تغيير الشاشة بأكملها لإظهار تلك المقالة.

لمعرفة المزيد، راجع إنشاء واجهة مستخدم حيويه بإستخدام الشظايا.

 

 

 

دعم أندرويد 3.1 مع مؤهلات الحجم الموروثة من الإصدار السابق

إذا كان تطبيقك يدعم أندرويد 3.1 (مستوى API 12) أو أقل، فستحتاج إلى إستخدام مؤهلات الحجم القديمة بالإضافة إلى مؤهلات أصغر عرض/العرض المتاح أعلاه.

من المثال أعلاه، إذا كنت تريد مخططاً من جزأين على الأجهزة الأكبر، فستحتاج إلى إستخدام مؤهل التكوين “الكبير” لدعم الإصدار 3.1 والإصدارات الأقل.

لذا، لتطبيق هذه المخططات على تلك الإصدارات الأقدم، يجب أن يكون لديك الملفات التالية:

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-xlarge/main_activity.xml    # For large tablets (960dp x 720dp and bigger)

 

 

 

أستخدم الأسماء المستعارة للمخطط

عند دعم إصدارات الأندرويد التي تسبق الإصدار 3.2 و أقدم، يجب عليك إستخدام مؤهلات كلٍ من “أصغر عرض” و “الكبير” لمخططاتك.

لذلك، سيكون لديك ملف اسمه res/layout-large/main.xml والذي قد يكون مشابهاً لـ

res/layout-sw600dp/main.xml.

لتجنب حدوث هذا التكرار لنفس الملف، يمكنك إستخدام ملفات الاسم المستعار. مثال، يمكنك تحديد المخططات التالية:

res/layout/main.xml            # single-pane layout
res/layout/main_twopanes.xml   # two-pane layout

 

وأضف هذين الملفين:

  • res/values-large/layout.xml
  • <resources>
        <item name="main" type="layout">@layout/main_twopanes</item>
    </resources>

 

  • res/values-sw600dp/layout.xml
<resources>
    <item name="main" type="layout">@layout/main_twopanes</item>
</resources>

 

يحتوي هذان الملفان على محتوى متطابق، ولكنهما لا يحددان المخطط في الواقع.  فهما مجرد إعداد رئيسي ليكونا اسماً مستعاراً لـ main_twopanes.

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

(تتطابق مع الأجهزة اللوحية ما قبل 3.2 وأجهزة التلفاز الكبيرة، و ما بعد الإصدار 3.2 ستتطابق مع sw600dp).

 

 

 

 

 

دعم احجام مختلفة للشاشة

 

إنشاء صور نقطية ذات تسع خانات قابلة للتمدد


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

العرض أو ينكمش بناءً على حجم الشاشة أو محتويات المعاينه.

يؤدي هذا غالباً إلى عدم وضوح الصورة، أو حدوث آثار أخرى بسبب تغيير الحجم.

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

الصورة النقطية ذات التسع خانات، هي في الأساس ملف PNG قياسي، ولكن مع حدود إضافية بمقدار 1px ..

تشير إلى أي وحدات البكسل يجب أن تتمدد (ومع إمتداد I .9.png بدلاً من png فقط).

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

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

الشكل 5. صورة بتسع خانات (button.9.png)

 

عندما تقوم بتطبيق صورة ذات تسع خانات كخلفية للمعاينه، فإن الإطار يقوم بمد الصورة بشكلٍ ملائم لإستيعاب حجم الزر.

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

 

 

 

 

دعم احجام مختلفة للشاشة

 

إختبار على جميع أحجام الشاشات


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

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

يمكنك إستخدام محاكي الأندرويد لمحاكاة أي حجم للشاشة.

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

 

 

 

 

دعم احجام مختلفة للشاشة

 

إعلان حجم الشاشة المحدد المدعوم


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

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

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات