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

يتيح لك "محرِّر التنسيق" إنشاء تنسيقات مستندة إلى 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" خيارات التنسيق الشائعة التي يمكنك استخدامها في مشروعك. لاستخدام صيغة تنسيق مقترحة، يمكنك اتّباع الخطوات التالية:

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 (لوحة الألوان).

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

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

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

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

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

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

إذا كنت تستخدم السمة ConstraintLayout، يمكنك وضع قيود تلقائيًا باستخدام ميزتَي "قيود الاستنتاج" و"الربط التلقائي".

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

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

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

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

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

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

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

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

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

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

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

وبالنسبة إلى TextView، يمكنك الاختيار من بين نماذج فئات نصية مختلفة. عند استخدام نموذج نص، يملأ Android Studio السمة 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 الأساسية، يمكنك الاختيار من بين مئات الخطوط باتّباع الخطوات التالية:

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