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

ลองใช้วิธีเขียน

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

เลย์เอาต์ตามช่องโฆษณา →

แม้ว่า 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> ได้ที่ทรัพยากรเลย์เอาต์