שימוש חוזר בפריסות עם <include>

אפשר לנסות את הדרך של כתיבת הודעה
‫Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך עובדים עם פריסות בכתיבת אימייל
פריסות מבוססות-משבצות →

למרות שמערכת 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> זמין במאמר בנושא משאבי פריסה.