แม้ว่า 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> ได้ที่แหล่งข้อมูลของเลย์เอาต์