تصحيح أخطاء التخطيط باستخدام Layout Inspector (أداة فحص التنسيق) والتحقق من صحة التنسيق

تتيح لك أداة فحص التنسيق في استوديو Android تصحيح أخطاء تنسيق تطبيقك من خلال إظهار تدرج هرمي لطرق العرض والسماح لك بفحص خصائص كل طريقة عرض. باستخدام Layout Inspector (أداة فحص التخطيط)، يمكنك مقارنة تخطيط تطبيقك بنماذج تجريبية، وعرض عرض مكبر أو ثلاثي الأبعاد لتطبيقك، وفحص تفاصيل تخطيطه في وقت التشغيل. يكون ذلك مفيدًا على وجه الخصوص عندما يتم إنشاء التنسيق في وقت التشغيل بدلاً من تنسيقه بالكامل في XML ويعمل التنسيق بشكل غير متوقع.

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

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

لقطة فاحص التنسيق لنموذج تطبيق دوار الشمس

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

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

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

أداة فحص التنسيق المضمّنة (تجريبي)

يمكنك في Android Studio Hedgehog تشغيل أداة فحص التنسيق مباشرةً في نافذة أداة "الأجهزة قيد التشغيل". تعمل هذه الميزة التجريبية على تحسين أداء أداة Layout Inspector بشكل كبير، كما تحافظ على مساحة الشاشة، وتساعد في تنظيم سير عمل تصحيح أخطاء واجهة المستخدم في نافذة أداة واحدة. لتمكين الوضع المضمّن:

  • على نظام التشغيل Windows، انتقِل إلى ملف > الإعدادات > تجريبية > أداة فحص التنسيق
  • على نظام التشغيل macOS، انتقِل إلى استوديو Android > الإعدادات > تجريبية > أداة فحص التنسيق

في ما يلي كيفية البدء وتنفيذ بعض المهام الشائعة:

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

أداة فحص التنسيق المضمَّن

الشكل 2. أداة فحص التنسيق المضمّنة في تطبيق Jetchat

آخر الأخبار المباشرة

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

توفّر أداة Live Layout Inspector (أداة فحص التصميم المباشر) إحصاءات كاملة في الوقت الفعلي حول واجهة مستخدم تطبيقك أثناء نشره على جهاز أو محاكي يستخدم المستوى 29 من واجهة برمجة التطبيقات أو مستوى أعلى.

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

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

اختيار طريقة عرض أو عزلها

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

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

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

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

عزل قائمة العرض

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

للعودة إلى العرض الكامل، انقر بزر الماوس الأيمن على العرض واختَر عرض الكل.

إخفاء حدود التنسيق وعرض التصنيفات

لإخفاء مربّع الإحاطة أو عرض تسميات عنصر التنسيق، انقر على خيارات العرض زر عرض الخيارات أعلى عرض التنسيق وبدِّل بين إظهار الحدود أو إظهار تصنيف العرض.

القائمة المنسدلة لخيارات العرض

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

الوضع الثلاثي الأبعاد

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

أداة فحص التنسيق: عرض ثلاثي الأبعاد

الشكل 5. عرض ثلاثي الأبعاد تم تدويره لتخطيط.

أداة فحص التنسيق: عرض تباعد الطبقات

الشكل 6. لتوسيع طبقات التنسيق أو تقليصها، استخدِم شريط تمرير تباعد الطبقات.

مقارنة تنسيق التطبيق بتراكب صورة مرجعية

لمقارنة تخطيط تطبيقك بصورة مرجعية، مثل نموذج واجهة المستخدم، يمكنك تحميل تراكب صورة نقطية في Layout Inspector (أداة فحص التخطيط).

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

التقاط لقطات العرض الهرمي للتخطيط

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

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

  1. افتح أداة فحص التنسيق.
  2. من المفترض أن تتصل أداة فحص التخطيط بعملية التطبيق تلقائيًا. إذا لم يكن الأمر كذلك، اختَر عملية التطبيق من القائمة المنسدلة.
  3. عندما تريد أخذ لقطة، انقر على تصدير لقطة رمز
التصدير من شريط الأدوات "أداة فحص التنسيق".
  4. في مربع حوار النظام الذي يظهر، حدد الاسم والمكان اللذين تريد حفظ اللقطة فيهما. احرص على حفظ الملف بامتداد *.li.

يمكنك بعد ذلك تحميل لقطة أداة فحص التنسيق عن طريق تحديد ملف > فتح من شريط القائمة الرئيسية، وفتح ملف *.li.

ملف GIF للقطة أداة فحص التنسيق

الشكل 7. أخذ لقطة في عارض التخطيط.

فحص Compose

يتيح لك Layout Inspector (أداة فحص التنسيق) فحص تخطيط Compose داخل تطبيق قيد التشغيل في المحاكي أو الجهاز المادي. يمكنك استخدام Layout Inspector (أداة فحص التنسيق) للتحقق من عدد المرات التي تتم فيها إعادة إنشاء أو تخطي عنصر قابل للإنشاء، ما يمكن أن يساعد في تحديد المشاكل في تطبيقك. على سبيل المثال، قد تجبر بعض أخطاء الترميز على إعادة إنشاء واجهة المستخدم بشكل مفرط، ما قد يتسبب في ضعف الأداء. يمكن أن تمنع بعض أخطاء البرمجة إعادة إنشاء واجهة المستخدم، وبالتالي تمنع ظهور تغييرات واجهة المستخدم على الشاشة.

مزيد من المعلومات عن "أداة فحص التنسيق" لأداة Compose

تجنُّب إعادة بدء النشاط

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

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    يؤدي هذا الخيار إلى إنشاء معلومات إضافية لفحص العملية المحدّدة.

  2. adb shell settings put global debug_view_attributes 1

    ينشئ هذا الخيار معلومات إضافية لفحص جميع العمليات على الجهاز.

وقد يؤدي تغيير إعداد عام إلى إعادة تشغيل النشاط. لتجنُّب إعادة تشغيل نشاط، يمكنك إمّا تغيير الإعدادات في "استوديو Android" أو تغيير خيارات المطوّرين في إعدادات جهازك.

لتفعيل إعادة التحميل التلقائية في "استوديو Android"، افتح إعدادات التشغيل/تصحيح الأخطاء من خلال اختيار تشغيل > تعديل الإعدادات من القائمة. بعد ذلك، انتقِل إلى علامة التبويب بنود متنوعة وضَع علامة في المربّع الاتصال بأداة فحص التنسيق بدون إعادة تشغيل النشاط ضمن خيارات أداة فحص التنسيق.

خيار إعادة تشغيل النشاط في &quot;تشغيل الإعدادات&quot;

الشكل 12. تفعيل إعادة التحميل التلقائية من إعدادات التشغيل/تصحيح الأخطاء.

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

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

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

لقطة شاشة لعلامة التبويب &quot;التحقّق من صحة التنسيق&quot;

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

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

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

لقطة شاشة للقائمة المنسدلة في أداة التحقّق من صحة التنسيق

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

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

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

لقطة شاشة لمعاينات تنسيق للأجهزة المرجعية المختلفة

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

قرض مخصص

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

تخصيص عرض جهاز في أداة &quot;التحقق من صحة التنسيق&quot;

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

ستارة ألوان

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

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

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

أحجام الخطوط

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

معاينات لتخطيطات التطبيق بأحجام خطوط مختلفة مع أخطاء تخطيط مرئية للخطوط الكبيرة

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