إعادة استخدام التنسيقات باستخدام <include>

تجربة ميزة "الكتابة"

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

التنسيقات المستندة إلى الشرائح →

على الرغم من أن Android يقدم مجموعة متنوعة من الأدوات لتوفير عناصر تفاعلية صغيرة وقابلة لإعادة الاستخدام، ولكن قد تحتاج أيضًا إلى إعادة استخدام مكونات أكبر تتطلب تنسيقًا خاصًا. لإعادة استخدام التنسيقات الكاملة بكفاءة، استخدِم العلامتَين <include> و<merge> لتضمين تنسيق داخل تنسيق آخر.

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

إنشاء تخطيط قابل لإعادة الاستخدام

ابدأ بإنشاء ملف XML جديد وتحديد التنسيق الذي تريد إعادة استخدامه. على سبيل المثال، إليك تنسيق يحدّد شريط عنوان لتضمينه في كل نشاط (titlebar.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

يجب أن يكون View الجذر مطابقًا تمامًا لما تريد أن يظهر به في كل تنسيق تنوي إضافة هذا التنسيق إليه.

استخدام العلامة <include>

أضِف العلامة <include> داخل التنسيق الذي تريد إضافة المكوّن القابل لإعادة الاستخدام إليه. على سبيل المثال، في ما يلي تنسيق يتضمّن شريط العنوان من المثال السابق:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>

يمكنك أيضًا إلغاء جميع مَعلمات التنسيق، أيّ سمات android:layout_* ، لعرض الجذر للتنسيق المضمّن من خلال تحديدها في علامة <include>. يظهر ذلك في المثال التالي:

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

ومع ذلك، إذا أردت إلغاء سمات التنسيق باستخدام علامة <include>، ألغِ أيضًا android:layout_height وandroid:layout_width لتطبيق سمات التنسيق الأخرى.

استخدام العلامة <merge>

تساعد علامة <merge> في إزالة مجموعات طرق العرض المكرّرة في التسلسل الهرمي لطرق العرض عند تضمين تنسيق واحد ضمن تنسيق آخر. من حالات استخدام <merge> هو عند تنفيذ عرض مخصّص من خلال توسيع ViewGroup.

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

بدلاً من ذلك، يمكنك توسيع LinearLayout لإنشاء عرض مخصّص واستخدام تنسيق XML لوصف التنسيق لوصف العروض الفرعية. العلامة العلوية في ملف XML هي <merge> وليس LinearLayout، كما هو موضّح في المثال التالي:

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

عند تضمين هذا التنسيق في تنسيق آخر باستخدام علامة <include> ، يتجاهل النظام عنصر <merge> ويضع الزرَّين مباشرةً في التنسيق بدلاً من علامة <include>.

لمزيد من المعلومات عن <include>، اطّلِع على مورد التنسيق.