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

تجربة طريقة "الكتابة"

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

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

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

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

فحص التنسيق

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

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

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

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

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

بما أنّ أداء التنسيق السابق يتباطأ بسبب LinearLayout المتداخلة، يمكنك تحسين الأداء من خلال تسوية التنسيق، أي جعله سطحيًا وعريضًا بدلاً من ضيق وعميق. يتيح العنصر A 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 محلّ أداة layoutopt ويتضمّن وظائف أكثر. في ما يلي أمثلة على قواعد التدقيق:

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

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

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

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

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