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

ลองใช้วิธีแบบ Compose

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้เลย์เอาต์ใน Compose

เลย์เอาต์ตามช่อง →

แม้ว่า 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 รายการที่อยู่ติดกันสามารถนำกลับมาใช้ซ้ำในเลย์เอาต์หลายรายการได้ เลย์เอาต์ที่นำกลับมาใช้ซ้ำได้ซึ่งคุณวางมุมมอง 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> ได้ที่ ทรัพยากรเลย์เอาต์