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

تجربة طريقة Compose

‫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 الجذر تمامًا كما تريدون أن يظهر في كل تنسيق تخطّطون لإضافة هذا التنسيق إليه.

ملاحظة: السمة tools:showIn في ملف XML السابق هي سمة خاصة لا تُستخدَم إلا في وقت التصميم في "استوديو Android" وتتم إزالتها أثناء التجميع. تحدّد هذه السمة تنسيقًا يتضمّن هذا الملف، ما يتيح لكم معاينة هذا الملف وتعديله كما يظهر أثناء تضمينه في تصميم العنصر الرئيسي.

استخدام علامة <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>، يُرجى الاطّلاع على مورد التنسيق.