تحسين التدرجات الهرمية للتنسيقات

من المفاهيم الخاطئة الشائعة أن استخدام هياكل التخطيط الأساسية يؤدي إلى تخطيطات أكثر كفاءة. ومع ذلك، فإن كل أداة وتصميم تضيفها إلى تطبيقك يتطلب تهيئة وتخطيط ورسم. على سبيل المثال، قد يؤدّي استخدام مثيلات مدمجة لـ LinearLayout إلى تسلسل هرمي مفرط في طريقة العرض. بالإضافة إلى ذلك، قد يكون دمج عدة مثيلات من LinearLayout تستخدم المَعلمة layout_weight مكلفًا بشكل خاص لأنّه يجب قياس كل طفل مرتين. يُعدّ ذلك مهمًا بشكل خاص عندما يتم تضخيم التنسيق بشكل متكرّر، مثلاً عند استخدامه في RecyclerView.

يوضح هذا المستند طريقة استخدام "أداة فحص التنسيق" وأداة Lint لفحص التنسيق وتحسينه.

فحص التنسيق

تتضمَّن أدوات حزمة تطوير البرامج (SDK) لنظام التشغيل Android أداة أداة فحص التنسيق التي تسمح لك بتحليل التنسيق أثناء تشغيل تطبيقك. يساعدك استخدام هذه الأداة في اكتشاف قصور في أداء التخطيط.

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

على سبيل المثال، يعرض الشكل 1 تنسيقًا يُستخدم كعنصر في RecyclerView. يُظهر هذا التخطيط صورة نقطية صغيرة على اليسار وعنصرين مكدسين من النص على اليمين. من المهم بشكل خاص تحسين التخطيطات مثل هذه التي يتم تضخيمها عدة مرات، حيث يتم مضاعفة مزايا الأداء.

يعرض Layout Inspector (أداة فحص التخطيطات) قائمة بالأجهزة المتاحة ومكوناتها قيد التشغيل. اختَر المكوِّن من علامة التبويب Windows، وانقر على "Layout Inspector" (أداة فحص التنسيق) للاطّلاع على التسلسل الهرمي للتنسيق للمكون المحدد. على سبيل المثال، يوضح الشكل 2 تخطيط عنصر القائمة الموضح في الشكل 1.

مراجعة التنسيق

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

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

يبدو فحص التنسيق الجديد كما يلي:

تتضاعف فوائد هذا، لأن هذا التخطيط يُستخدم لكل عنصر في القائمة.

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

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

استخدام أداة Lint

يفضَّل تشغيل أداة lint على ملفات التنسيق للبحث عن التحسينات الممكنة للعرض الهرمي. تحل أداة Lint أداة التخطيط وتتميّز بوظائف أكبر. في ما يلي أمثلة على قواعد Lint:

• استخدِم عناصر قابلة للرسم مركّبة. يمكنك التعامل مع LinearLayout يحتوي على ImageView وعلامة TextView بكفاءة أكبر كعنصر قابل للرسم المركّب.
• دمج إطار الجذر إذا كان جذر التنسيق هو FrameLayout لا يوفّر خلفية أو مساحة متروكة، يمكنك استبداله بعلامة دمج، وبالتالي تكون أكثر فعالية بعض الشيء.
• أزِل الأوراق عديمة الفائدة. يمكنك إزالة تنسيق ليس له خلفية أو عناصر فرعية، لأنّ ذلك غير مرئي، للحصول على تسلسل هرمي أكثر سلاسة وكفاءة للتنسيق.
• إزالة الآباء عديمي الفائدة. يمكنك إزالة تنسيق يتضمن عنصرًا فرعيًا ليس له أشقاء، أو ليس ScrollView أو تنسيق جذر، وليس له خلفية. ويمكنك أيضًا نقل طريقة العرض الفرعية مباشرةً إلى العنصر الرئيسي للحصول على تسلسل هرمي أكثر اتساقًا وكفاءة للتنسيق.
• تجنَّب استخدام التنسيقات العميقة. لا تؤثر التنسيقات التي تتضمن الكثير من التداخل سلبًا على الأداء. يمكنك استخدام التنسيقات المسطحة، مثل ConstraintLayout، لتحسين الأداء. الحد الأقصى الافتراضي لعمليات التحقق من أداة Lint هو 10.

من الفوائد الأخرى لأداة Lint هي دمجها في Android Studio. يتم تشغيل أداة Lint تلقائيًا كلما قمت بتجميع برنامجك. باستخدام "استوديو Android"، يمكنك أيضًا إجراء عمليات فحص للوبر لخيار إصدار محدَّد أو لجميع صيغ التصميم.

يمكنك أيضًا إدارة الملفات الشخصية للفحص وإعداد عمليات الفحص في "استوديو Android" باستخدام الخيار ملف > الإعدادات > إعدادات المشروع. تظهر صفحة "ضبط الفحص" مع عمليات الفحص المتوافقة:

يمكن لأداة Lint حلّ بعض المشاكل تلقائيًا وتقديم اقتراحات للبعض الآخر والانتقال مباشرةً إلى الرمز المخالف للمراجعة.

لمزيد من المعلومات، راجِع التنسيقات ومورد التنسيق.