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

تنفيذ Jetpack Composearrow_forward

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

تكون "أداة تعديل التصميم" مفيدة بشكل خاص عند إنشاء تصميم باستخدام ConstraintLayout.

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

مقدمة عن "أداة تعديل التنسيق"

تظهر أداة تعديل التنسيق عند فتح ملف تنسيق XML.

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

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

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

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

تتيح لك الأزرار في الصف العلوي من "محرّر التصميم" ضبط مظهر التنسيق في المحرّر.

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

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

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

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

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

   

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

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

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

إنشاء تخطيط جديد

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

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

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

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

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

1. اختَر طريقة العرض المشروع من داخل نافذة المشروع.
2. انقر بزر الماوس الأيمن على دليل التنسيق الذي تريد إضافة التنسيق إليه.
3. في قائمة السياق التي تظهر، انقر على جديد (New) > ملف مورد التنسيق (Layout Resource File).

استخدام طريقة العرض على 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.

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

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

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

فتح المستندات من "لوحة الألوان"

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

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

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

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

إذا كنت تستخدم 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 لعرض البيانات النموذجية بشكلٍ سليم.

عرض تحذيرات وأخطاء التنسيق

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

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

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

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

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

معاينة التصميم

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

الشكل 10 علامة التبويب "معاينة التصميم"

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

• الأجهزة المرجعية
• مخصص
• Color Blind
• أحجام الخطوط

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

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

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

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

مخصص

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

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

Color Blind

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

الشكل 13 معاينات محاكاة عَمَى الألوان في أداة "التحقّق من صحة التنسيق"

أحجام الخطوط

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

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