ใช้การออกแบบซ้ำโดย <include>

แม้ว่า Android จะมีวิดเจ็ตหลากหลายแบบสำหรับ องค์ประกอบแบบอินเทอร์แอกทีฟที่มีขนาดเล็ก คุณอาจต้องนำคอมโพเนนต์ขนาดใหญ่ที่จำเป็นต้องใช้เลย์เอาต์พิเศษมาใช้ซ้ำ เพื่อการใช้งานซ้ำอย่างมีประสิทธิภาพ รูปแบบที่สมบูรณ์ ใช้แท็ก <include> และ <merge> เพื่อฝัง เลย์เอาต์หนึ่งไว้ภายในอีกเลย์เอาต์หนึ่ง

ตัวเลือกนี้ช่วยให้คุณสร้างเลย์เอาต์ที่ซับซ้อน เช่น แผงปุ่มใช่หรือไม่ใช่ หรือความคืบหน้าที่กำหนดเอง พร้อมข้อความอธิบาย และหมายความว่าคุณสามารถแยกองค์ประกอบใดๆ ของแอปพลิเคชันของคุณที่ เหมือนกันในเลย์เอาต์แบบต่างๆ ให้จัดการแยกกัน แล้วรวมไว้ในแต่ละเลย์เอาต์ ขณะที่ คุณจะสร้างคอมโพเนนต์ UI แต่ละรายการได้ด้วยการเขียน 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 ที่มี มุมมองที่ต่อเนื่องกันสามารถนำมาใช้ซ้ำได้ในหลายๆ เค้าโครง จากนั้นเค้าโครงที่นำมาใช้ใหม่ได้ซึ่งคุณจะต้องวาง 2 มุมมองต้องมีมุมมองรากของตัวเอง อย่างไรก็ตาม การใช้ LinearLayout อื่นเป็นรูท สำหรับเลย์เอาต์ที่นำมาใช้ใหม่ได้ จะทําให้เกิด LinearLayout แนวตั้งภายในแนวตั้ง LinearLayout LinearLayout ที่ฝังไว้ไม่มีวัตถุประสงค์ที่แท้จริงและทำงานช้า ประสิทธิภาพ UI ลดลง

แต่คุณสามารถขยาย 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> และจะวางปุ่ม 2 ปุ่มนั้น ในเลย์เอาต์โดยตรง แทนแท็ก <include>

ดูข้อมูลเพิ่มเติมเกี่ยวกับ <include> ได้ที่ แหล่งข้อมูลของเลย์เอาต์