تطوير واجهة مستخدم باستخدام طرق العرض

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

يكون "محرِّر التنسيق" فعّالاً بشكلٍ خاص عند إنشاء تنسيق باستخدام ConstraintLayout.

تقدّم هذه الصفحة نظرة عامة على "محرِّر التنسيق". للمزيد من المعلومات حول أساسيات التخطيط، راجع التنسيقات.

مقدمة إلى محرر التنسيق

يظهر "محرِّر التنسيق" عندما تفتح ملف تنسيق XML.

1. لوحة الألوان: تحتوي على طرق عرض ومجموعات طرق عرض مختلفة يمكنك سحبها إلى التنسيق.
2. شجرة المكوّنات: تعرض التسلسل الهرمي للمكوّنات في التنسيق.
3. شريط الأدوات: يحتوي على أزرار تضبط مظهر التنسيق في المحرر وتغيير سمات التنسيق.
4. محرِّر التصميم: يتيح لك تعديل التنسيق في طريقة عرض "التصميم" أو "عرض المخطط" أو كليهما.
5. السمات: تتضمن عناصر تحكم لسمات الملف الشخصي المحددة.
6. وضع العرض: يتيح لك عرض التنسيق في وضع الرمز أو تقسيم أو التصميم . يعرض وضع التقسيم نافذتَي الرمز والتصميم في الوقت نفسه.
7. عناصر التحكم في التكبير/التصغير والعرض الشامل: يمكنك التحكم في حجم المعاينة وموضعها ضمن المحرر.

عند فتح ملف تنسيق XML، يتم فتح محرر التصميم افتراضيًا، كما هو موضح في الشكل 1. لتعديل تنسيق XML للتنسيق في محرِّر النصوص، انقر على الزرّ الرمز في أعلى يسار النافذة. يرجى ملاحظة أن لوحات لوحة الألوان وشجرة المكونات والسمات غير متوفرة أثناء تعديل التنسيق في طريقة عرض الرمز.

ملاحظة: للتبديل بين التصميم ومحرِّر النصوص، اضغط على Alt (Control على نظام التشغيل macOS) بالإضافة إلى Shift ومفتاح السهم المتّجه لليمين أو لليسار.

تغيير مظهر المعاينة

تتيح لك الأزرار الموجودة في الصف العلوي من محرر التصميم تهيئة مظهر التخطيط في المحرر.

1. التصميم والمخطط: اختَر كيفية عرض التنسيق في المحرر. يمكنك أيضًا الضغط على B للتنقل بين أنواع طرق العرض هذه.
   • اختر التصميم لمشاهدة معاينة معروضة للتنسيق.
   • اختر مخطط لرؤية المخططات التفصيلية فقط لكل طريقة عرض.
   • اختر التصميم + المخطط لمشاهدة طريقتي العرض جنبًا إلى جنب.
2. اتجاه الشاشة وصيغ التنسيق: يمكنك الاختيار بين الاتجاه الأفقي أو العمودي للشاشة أو اختيار أوضاع الشاشة الأخرى التي يوفّر تطبيقك تنسيقات بديلة لها، مثل الوضع الليلي. تحتوي هذه القائمة أيضًا على أوامر من أجل إنشاء صيغة جديدة للتنسيق، كما هو موضّح في أحد أقسام هذه الصفحة. يمكنك أيضًا الضغط على الحرف O على لوحة المفاتيح لتغيير الاتجاه.

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

4. نوع الجهاز وحجمه: اختَر نوع الجهاز (هاتف/جهاز لوحي أو Android TV أو Wear OS) وإعدادات الشاشة (الحجم والكثافة). يمكنك الاختيار من بين عدة أنواع من الأجهزة التي تم ضبطها مسبقًا وتعريفات AVD الخاصة بك، كما يمكنك إنشاء حساب AVD جديد من خلال اختيار إضافة تعريف جهاز من القائمة، كما هو موضّح في الشكل 3.

   • لتغيير حجم الجهاز، اسحب الزاوية السفلية اليمنى من التخطيط.
   • اضغط على D للتنقّل بين قائمة الأجهزة.

   يساعد اختبار التخطيط على الأجهزة المرجعية في هذه القائمة على تغيير حجم التطبيق بشكل جيد إلى حالات التخطيط على الأجهزة الحقيقية.

   

5. إصدار واجهة برمجة التطبيقات: اختَر إصدار Android لمعاينة تنسيقك. تعتمد قائمة إصدارات Android المتاحة على إصدارات نظام حزم SDK التي ثبَّتها باستخدام "مدير SDK".

6. مظهر التطبيق: اختَر مظهر واجهة المستخدم المطلوب تطبيقه على المعاينة. لا يعمل هذا إلا مع أنماط التنسيق المتوافقة، لذا تؤدي العديد من النُسُق في هذه القائمة إلى حدوث خطأ.

7. اللغة: اختَر اللغة التي تريد عرضها لسلاسل واجهة المستخدم. تعرض هذه القائمة فقط اللغات المتاحة في موارد السلسلة. إذا كنت تريد تعديل ترجماتك، انقر على تعديل الترجمات من القائمة. لمزيد من المعلومات حول استخدام الترجمات، يمكنك الاطّلاع على أقلمة واجهة المستخدم باستخدام "محرِّر الترجمات".

إنشاء تنسيق جديد

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

يمكنك إنشاء تنسيق جديد بإحدى الطرق التالية:

استخدام قائمة "استوديو Android" الرئيسية

1. في نافذة المشروع، انقر على الوحدة التي تريد إضافة تنسيق إليها.
2. في القائمة الرئيسية، اختَر ملف > جديد > XML > ملف تنسيق XML.
3. في مربع الحوار الذي يظهر، أدخِل اسم الملف وعلامة التنسيق الجذر ومجموعة المصدر التي ينتمي إليها التنسيق.
4. انقر على إنهاء لإنشاء التنسيق.

استخدام عرض المشروع

1. اختَر عرض المشروع من داخل نافذة المشروع.
2. انقر بزر الماوس الأيمن على دليل التنسيق حيث تريد إضافة التنسيق.
3. في قائمة السياق التي تظهر، انقر على جديد > ملف مورد التنسيق.

استخدام شاشة Android

1. اختَر عرض Android من داخل نافذة المشروع.
2. انقر بزر الماوس الأيمن على المجلد "layout".
3. في قائمة السياق التي تظهر، اختَر جديد > ملف مورد التنسيق.

استخدام مدير الموارد

1. في مدير الموارد، اختَر علامة التبويب التنسيق.
2. انقر على الزرّ +، ثمّ انقر على ملف موارد التنسيق.

استخدام متغيرات التصميم لتحسين الشاشات المختلفة

متغير التنسيق هو نسخة بديلة من التنسيق الحالي المحسّن لحجم شاشة أو اتجاه معين.

استخدام صيغة مُقترَحة

يتضمن Android Studio خيارات التنسيق الشائعة التي يمكنك استخدامها في مشروعك. لاستخدام صيغة تصميم مقترَحة، اتّبِع الخطوات التالية:

1. افتح ملف التنسيق التلقائي.
2. انقر على رمز التصميم في أعلى يسار النافذة.
3. يظهر اسم ملف التنسيق في القائمة المنسدلة إجراء التبديل وإنشاء مؤهلات لملفات التنسيق. انقر على القائمة المنسدلة.
4. في القائمة المنسدلة، حدِّد خيارًا مثل إنشاء مؤهِّل أفقي أو إنشاء مؤهِّل للأجهزة اللوحية.

   

يتم إنشاء دليل تنسيق جديد.

إنشاء متغيّر التصميم الخاص بك

إذا كنت تريد إنشاء شكل تخطيط خاص بك، فقم بما يلي:

1. افتح ملف التنسيق التلقائي.
2. انقر على رمز التصميم في أعلى يسار النافذة.
3. يظهر اسم ملف التنسيق في القائمة المنسدلة إجراء التبديل وإنشاء مؤهلات لملفات التنسيق. انقر على القائمة المنسدلة.

4. في القائمة المنسدلة، اختَر إضافة مؤهِّل موارد. (انظر الشكل 4 أعلاه).

   سيظهر مربّع الحوار اختيار دليل الموارد.

5. في مربّع الحوار اختيار دليل الموارد، حدِّد مؤهلات الموارد للصيغة:

   1. اختَر مؤهِّلاً من قائمة المؤهِّلات المتاحة.
   2. انقر على الزر إضافة .
   3. أدخِل أي قيم مطلوبة.
   4. كرِّر هذه الخطوات لإضافة مؤهِّلات أخرى.

6. بعد إضافة جميع المؤهِّلات، انقر على حسنًا.

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

لمزيد من المعلومات حول طريقة إنشاء تنسيقات للشاشات المختلفة، يُرجى الاطّلاع على مقالة إتاحة أحجام الشاشات المختلفة.

تحويل طريقة عرض أو تنسيق

يمكنك تحويل طريقة العرض إلى نوع آخر من طرق العرض، كما يمكنك تحويل تنسيق إلى نوع آخر من التخطيط:

1. انقر على الزر تصميم في أعلى يسار نافذة المحرر.
2. في شجرة المكوّنات، انقر بزر الماوس الأيمن على العرض أو التنسيق، ثم انقر على تحويل الملف الشخصي.
3. في مربع الحوار الذي يظهر، اختَر نوع العرض أو التنسيق الجديدَين، ثم انقر على تطبيق.

تحويل تنسيق إلى ConstraintLayout

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

لتحويل تنسيق حالي إلى تنسيق ConstraintLayout، اتّبِع الخطوات التالية:

1. افتح تنسيقًا حاليًا في "استوديو Android".
2. انقر على رمز التصميم في أعلى يسار نافذة المحرر.
3. في شجرة المكوّنات، انقر بزر الماوس الأيمن على التنسيق، ثم انقر على تحويل your-layout-type إلى ConstraintLayout.

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

العثور على عناصر في لوحة الألوان

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

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

فتح الوثائق من لوحة الألوان

لفتح المستندات المرجعية لمطوّري تطبيقات Android لأحد طرق العرض أو المجموعات الإعلانية، اختَر عنصر واجهة المستخدم في لوحة الألوان واضغط على Shift+F1.

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

إضافة طرق عرض إلى التنسيق

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

إذا كنت تستخدم "ConstraintLayout"، يمكنك إنشاء قيود تلقائيًا باستخدام "قيود الاستنتاج" وميزتَي "الاتصال التلقائي".

تعديل سمات العرض

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

عند تحديد طريقة عرض، سواء بالنقر على طريقة العرض في شجرة المكونات أو في محرر التصميم، تعرض لوحة السمات ما يلي، كما هو موضّح في الشكل 5:

1. السمات التي تم توضيحها: تدرج السمات المحدَّدة في ملف التنسيق. لإضافة سمة، انقر على الزر إضافة في أعلى القسم.
2. التنسيق: يحتوي على عناصر تحكم لعرض طريقة العرض وارتفاعها. إذا كان الملف الشخصي ضمن ConstraintLayout، سيعرِض هذا القسم أيضًا انحياز القيود ويدرج القيود التي يستخدمها الملف الشخصي. لمزيد من المعلومات حول التحكم في حجم طرق العرض باستخدام ConstraintLayout، يمكنك الاطّلاع على ضبط حجم العرض.
3. السمات المشتركة: تدرج السمات الشائعة للملف الشخصي المحدّد. للاطّلاع على جميع السمات المتاحة، وسِّع القسم جميع السمات في أسفل النافذة.
4. البحث: يتيح لك هذا الخيار البحث عن سمة معيّنة للعرض.

5. تشير الرموز على يمين كل قيمة سمة إلى ما إذا كانت قيم السمات هي مراجع موارد. تكون هذه المؤشرات ثابتة عندما تكون القيمة مرجعًا لمورد وتكون فارغة عندما تكون القيمة ثابتة وغير قابلة للتغيير في البرنامج لمساعدتك في التعرّف سريعًا على القيم ذات الترميز الثابت.

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

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

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

إضافة نموذج بيانات إلى ملفك الشخصي

ولأنّ العديد من تنسيقات Android تعتمد على بيانات وقت التشغيل، قد يكون من الصعب عرض شكل ومظهر التنسيق أثناء تصميم تطبيقك. ويمكنك إضافة نموذج من بيانات المعاينة إلى TextView أو ImageView أو RecyclerView من داخل "أداة تعديل التنسيق".

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

بالنسبة إلى TextView، يمكنك الاختيار من بين نماذج مختلفة للفئات النصية. عند استخدام نموذج نص، يملأ "استوديو Android" السمة text للسمة TextView بعيّنة البيانات التي اخترتها. تجدر الإشارة إلى أنّه لا يمكنك اختيار نموذج نص عبر نافذة سمات العرض في وقت التصميم إلا إذا كانت السمة text فارغة.

بالنسبة إلى ImageView، يمكنك الاختيار من بين نماذج مختلفة للصور. عند اختيار نموذج صورة، يملأ "استوديو Android" السمة tools:src في ImageView (أو tools:srcCompat في حال استخدام AndroidX).

بالنسبة إلى RecyclerView، يمكنك الاختيار من بين مجموعة من النماذج التي تحتوي على نماذج صور ونصوص. عند استخدام هذه النماذج، يضيف "استوديو Android" ملفًا إلى دليل res/layout، recycler_view_item.xml، يحتوي على تنسيق نموذج البيانات. يضيف "استوديو Android" أيضًا بيانات وصفية إلى RecyclerView لعرض عيّنات البيانات بشكل صحيح.

إظهار التحذيرات والأخطاء المتعلقة بالتنسيق

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

للاطّلاع على جميع المشاكل المعروفة في نافذة أسفل المحرر، انقر على عرض التحذيرات والأخطاء ( أو ) في شريط الأدوات.

تنزيل الخطوط وتطبيقها على النص

عند استخدام Android 8.0 (المستوى 26 من واجهة برمجة التطبيقات) أو مكتبة Jetpack Core، يمكنك الاختيار من بين مئات الخطوط باتّباع الخطوات التالية:

1. في "محرِّر التنسيق"، انقر على رمز التصميم لعرض التنسيق في محرّر التصميم.
2. اختَر طريقة عرض النص.
3. في لوحة السمات، وسِّع textالمظهر، ثم وسِّع المربّع fontFamily.
4. مرِّر لأسفل القائمة وانقر على المزيد من الخطوط لفتح مربع حوار الموارد.
5. في مربع حوار الموارد، لتحديد خط، تصفَّح القائمة أو اكتب في شريط البحث في الأعلى. إذا حددت خطًا ضمن قابل للتنزيل، فيمكنك إما النقر على إنشاء خط قابل للتنزيل لتحميل الخط في وقت التشغيل كـ خط قابل للتنزيل أو النقر على إضافة خط إلى المشروع لتجميع ملف خط TTF في حزمة APK. يوفر نظام Android الخطوط المدرَجة ضمن Android، لذا ليس من الضروري تنزيلها أو تجميعها في حزمة APK.
6. انقر على حسنًا لإنهاء العملية.

التحقق من صحة التصميم

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

الشكل 10. علامة التبويب "التحقّق من صحة التصميم"

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

• الأجهزة المرجعية
• قرض مخصص
• ستارة ألوان
• أحجام الخطوط

الشكل 11. القائمة المنسدلة "الأجهزة المرجعية"

الأجهزة المرجعية

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

الشكل 12. مرجع معاينات الجهاز في أداة التحقق من صحة التنسيق.

قرض مخصص

لتخصيص إعدادات العرض للمعاينة، اختَر من بين مجموعة متنوعة من الإعدادات بما في ذلك اللغة أو الجهاز أو اتجاه الشاشة:

الشكل 16. اضبط عرضًا مخصّصًا في "أداة التحقّق من صحة التنسيق".

ستارة ألوان

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

الشكل 13. معاينات محاكاة عمى الألوان في أداة التحقق من صحة التخطيط.

أحجام الخطوط

تحقَّق من صحّة التنسيقات بأحجام خطوط مختلفة، وحسِّن إمكانية الوصول إلى تطبيقك لذوي العجز البصري، وذلك من خلال اختبار التنسيقات باستخدام خطوط أكبر:

الشكل 14. معاينات بحجم الخط المتغيّر في أداة "التحقّق من صحة التخطيط"