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

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

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

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

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

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

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

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

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

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

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

إليك كيفية البدء والقيام ببعض المهام الشائعة:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

للعودة إلى العرض الكامل، انقر بزر الماوس الأيمن على العرض وحدد إظهار الكل.

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

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

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

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

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

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

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

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

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

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

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

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

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

التقاط لقطات من التسلسل الهرمي للتخطيط

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

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

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

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

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

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

فحص الإنشاء

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قرض مخصص

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

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

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

عمى الألوان

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

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

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

أحجام الخط

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

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

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