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