שימוש חוזר בפריסות עם <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>

ה-root 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> ראו משאב פריסה.