تتوفّر أدوات لتصحيح أخطاء واجهة مستخدم Compose في "استوديو Android".
أداة فحص التنسيق
يتيح لك "أداة فحص التنسيق" فحص تنسيق Compose داخل تطبيق قيد التشغيل في emulator أو جهاز فعلي. يمكنك استخدام "أداة فحص التنسيق" لمعرفة عدد المرات التي تتم فيها إعادة تركيب ملف قابل للتركيب أو تخطّيه، ما قد يساعد في تحديد المشاكل في تطبيقك. على سبيل المثال، قد تؤدي بعض أخطاء الترميز إلى إعادة تركيب واجهة المستخدم بشكل مفرط، ما قد يؤدي إلى ضعف الأداء. يمكن أن تمنع بعض أخطاء الترميز إعادة تكوين واجهة المستخدم، وبالتالي، منع ظهور تغييرات واجهة المستخدم على الشاشة. إذا كنت لا تزال مبتدئًا في استخدام أداة "مُدقّق التنسيق"، يمكنك الاطّلاع على الإرشادات حول كيفية تشغيلها.
الحصول على أعداد عمليات إعادة التركيب
عند تصحيح أخطاء تنسيقات Compose، من المهم معرفة متى تتم إعادة تركيب العناصر القابلة للتجميع من أجل معرفة ما إذا كان واجهة المستخدم قد تم تنفيذها بشكل صحيح. على سبيل المثال، إذا كان يتم إعادة الإنشاء مرات كثيرة جدًا، قد يبذل تطبيقك جهدًا أكبر من اللازم. من ناحية أخرى، يمكن أن تؤدي المكونات التي لا تتم إعادة تركيبها عندما تتوقّع ذلك إلى سلوكيات غير متوقّعة.
يعرض لك "أداة فحص التنسيق" عمليات إعادة التركيب أو التخطّي التي تم إجراؤها على العناصر المركّبة المنفصلة في التسلسل الهرمي لتنسيقك أثناء تفاعلك مع تطبيقك. في IDE، يتم تمييز عمليات إعادة التركيب لمساعدتك في تحديد مكان إعادة تركيب العناصر المركّبة في واجهة المستخدم.
الشكل 1: يتم تمييز عمليات إعادة التركيب في "أداة فحص التنسيق".
يعرض الجزء المميّز تراكبًا متدرّجًا للعنصر القابل للتجميع في قسم الصورة ضمن "أداة فحص التنسيق"، ويختفي تدريجيًا حتى تتمكّن من معرفة الموقع في واجهة المستخدم الذي يمكن فيه العثور على العنصر القابل للتجميع الذي يضمّ أكبر عدد من عمليات إعادة التركيب. إذا كان أحد العناصر المركّبة يُعاد تركيبه بمعدّل أعلى من عنصر مرتّب آخر، يحصل العنصر المركّب الأول على لون متراكب متدرّج أقوى. إذا نقرت مرّتين على عنصر قابل للتجميع في "أداة فحص التنسيق"، سيتم توجيهك إلى الرمز البرمجي المقابل للتحليل.
افتح نافذة أداة فحص التنسيق واربطها بعملية تطبيقك. في شجرة المكوّنات، هناك عمودان يظهران بجانب التسلسل الهرمي لتنسيق. يعرض العمود الأول عدد التراكيب لكل عقدة، ويعرِض العمود الثاني عدد عمليات التخطّي لكل عقدة. يؤدي اختيار node المركّبة إلى عرض السمات والمَعلمات للمركّبة، ما لم تكن دالة مضمّنة، وفي هذه الحالة لا يمكن عرض المَعلمات. يمكنك أيضًا الاطّلاع على معلومات مشابهة في لوحة السمات عند اختيار عنصر قابل للتجميع من عرض المكوّنات أو عرض التنسيق.
يمكن أن تساعدك إعادة ضبط العدد في فهم عمليات إعادة التركيب أو التخطّي أثناء تعامل معيّن مع تطبيقك. إذا كنت تريد إعادة ضبط العدد، انقر على إعادة الضبط بالقرب من أعلى لوحة شجرة المكوّنات.
الشكل 3 فعِّل عداد الإنشاء والتخطّي في "أداة فحص التنسيق".
إنشاء الدلالات
في أداة "الإنشاء"، تصف الدلالات واجهة المستخدم بطريقة بديلة تكون مفهومة لخدمات تسهيل الاستخدام وإطار عمل الاختبار. يمكنك استخدام "أداة فحص التنسيق" لفحص المعلومات الدلالية في تنسيقات "الإنشاء".
الشكل 4 المعلومات الدلالية المعروضة باستخدام "أداة فحص التصميم"
عند اختيار عقدة Compose، استخدِم لوحة السمات للتحقّق مما إذا كانت تُعلن عن معلومات دلالية مباشرةً أو تُدمج الدلالات من العقد الفرعية أو كلاهما. لتحديد العقد التي تتضمّن سمات، سواء كانت معلَنًا عنها أو مدمجة، استخدِم القائمة المنسدلة خيارات العرض في لوحة شجرة المكوّنات واختَر تمييز طبقات السمات. يؤدي ذلك إلى تمييز العقد في الشجرة التي تتضمّن الدلالات فقط، ويمكنك استخدام لوحة المفاتيح للتنقل بينها بسرعة.
إنشاء عملية التحقّق من واجهة المستخدم
لمساعدتك في إنشاء واجهات مستخدم أكثر سهولة في الاستخدام وملائمة للأجهزة المختلفة في Jetpack Compose، يوفّر "استوديو Android" وضع "فحص واجهة المستخدم" في ميزة "معاينة Compose". تشبه هذه الميزة أداة Accessibility Scanner في ما يتعلق بالمشاهدات.
عند تفعيل وضع التحقّق من واجهة مستخدم Compose في معاينة Compose، يدقّق Android Studio تلقائيًا في واجهة مستخدم Compose ويقترح تحسينات لجعل واجهة المستخدم أكثر سهولة في الاستخدام وملائمة. يتحقّق "استوديو Android" من أنّ واجهة المستخدم تعمل على مختلف أحجام الشاشات. في لوحة المشاكل، تعرض الأداة المشاكل التي ترصدها، مثل النص الممتد على الشاشات الكبيرة أو التباين المنخفض للألوان.
للوصول إلى هذه الميزة، انقر على رمز التحقّق من واجهة المستخدم في ميزة "معاينة الإنشاء":
يعرض فحص واجهة المستخدم تلقائيًا معاينة لواجهة المستخدم في إعدادات مختلفة ويُبرز المشاكل التي يتم رصدها في الإعدادات المختلفة. في لوحة المشاكل، عند النقر على مشكلة، يمكنك الاطّلاع على تفاصيل المشكلة والإصلاحات المقترَحة والصور التي تُبرز منطقة المشكلة.
