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

تجربة طريقة الإنشاء

Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام التشغيل Android. تعرَّف على كيفية استخدام التنسيقات في Compose.

أداة فحص التنسيق في Compose →

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

يوضح هذا المستند كيفية استخدام أداة فحص التنسيق وlint لفحص التنسيق وتحسينه.

فحص التنسيق

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

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

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

الشكل 1. التنسيق المفاهيمي لعنصر في RecyclerView.

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

الشكل 2. هيكلية للتنسيق ضمن الشكل 1، باستخدام مثيلات متداخلة للسمة LinearLayout.

مراجعة التصميم

ولأنّ أداء التنسيق السابق يبطئ بسبب عنصر 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>
    

يبدو فحص التنسيق الجديد على النحو التالي:

الشكل 3. الوضع الثلاثي الأبعاد لأداة فحص التنسيق.

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

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

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

استخدام أداة الوبر

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

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

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

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

الشكل 4. صفحة ضبط الفحص

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

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