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

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

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

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

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

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

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

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

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

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

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

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

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

4. نوع الجهاز وحجمه: اختَر نوع الجهاز (هاتف/جهاز لوحي أو Android TV أو Wear OS) وإعدادات الشاشة (الحجم والكثافة). يمكنك الاختيار من بين عدة أنواع من الأجهزة تم ضبطها مسبقًا وتعريفات "متوسّط مدة المشاهدة" الخاصة بك، ويمكنك إنشاء "متوسّط مدة مشاهدة" جديد من خلال اختيار إضافة تعريف جهاز من القائمة، كما هو موضّح في الشكل 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. في القائمة المعروضة في الشكل 4، اختر صيغة مقترَحة، مثل إنشاء مؤهِّل أفقي.

   

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

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

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

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

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

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. في لوحة السمات، وسِّع texttext، ثمّ وسِّع المربّع fontFamily.
4. مرّر إلى أسفل القائمة وانقر على المزيد من الخطوط لفتح مربع حوار الموارد.
5. في مربع حوار الموارد، لاختيار خط، تصفَّح القائمة أو اكتب في شريط البحث في الأعلى. إذا حددت خطًا ضمن قابل للتنزيل، فيمكنك حينئذٍ النقر على إنشاء خط قابل للتنزيل لتحميل الخط في وقت التشغيل كخط قابل للتنزيل أو النقر على إضافة خط إلى المشروع لتجميع ملف خط TTF في APK. يوفر نظام Android الخطوط المدرَجة ضمن Android، لذا لا يجب تنزيلها أو تجميعها في حزمة APK.
6. انقر على حسنًا للإنهاء.