เลย์เอาต์แบบสัมพัทธ์

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

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

ConstraintLayout ใน Compose →

RelativeLayout คือกลุ่มการแสดงผลที่แสดงมุมมองย่อยในตำแหน่งที่สัมพันธ์กัน ตำแหน่งของแต่ละมุมมองสามารถระบุเป็นตำแหน่งที่สัมพันธ์กับองค์ประกอบที่อยู่ระดับเดียวกัน (เช่น อยู่ทางด้านซ้ายหรือด้านล่างของมุมมองอื่น) หรือในตำแหน่งที่สัมพันธ์กับRelativeLayoutพื้นที่ระดับบน (เช่น จัดแนวไปที่ด้านล่าง ด้านซ้าย หรือตรงกลาง)

หมายเหตุ: คุณควรสร้างเลย์เอาต์ด้วย ConstraintLayout แทนเพื่อให้ได้ประสิทธิภาพและการรองรับเครื่องมือที่ดีขึ้น

RelativeLayout เป็นเครื่องมือที่มีประสิทธิภาพมากในการออกแบบอินเทอร์เฟซผู้ใช้ เนื่องจากช่วยลดกลุ่มมุมมองที่ซ้อนกันและทำให้ลำดับชั้นของเลย์เอาต์แบนราบ ซึ่งจะช่วยปรับปรุง ประสิทธิภาพ หากพบว่าคุณใช้LinearLayoutกลุ่มที่ซ้อนกันหลายกลุ่ม คุณอาจแทนที่กลุ่มเหล่านั้นด้วยRelativeLayoutกลุ่มเดียวได้

การจัดตำแหน่งมุมมอง

RelativeLayout ช่วยให้มุมมองย่อยระบุตำแหน่งของตนเองที่สัมพันธ์กับ มุมมองหลักหรือสัมพันธ์กัน (ระบุโดยรหัส) คุณจึงจัดแนวองค์ประกอบ 2 รายการตามเส้นขอบด้านขวา หรือ วางรายการหนึ่งไว้ใต้รายการอื่น โดยจัดกึ่งกลางหน้าจอ จัดกึ่งกลางด้านซ้าย และอื่นๆ ได้ โดยค่าเริ่มต้น ระบบจะวาดมุมมองย่อยทั้งหมดที่ด้านซ้ายบนของเลย์เอาต์ ดังนั้นคุณต้องกำหนดตำแหน่งของแต่ละมุมมองโดยใช้พร็อพเพอร์ตี้เลย์เอาต์ต่างๆ ที่มีจาก RelativeLayout.LayoutParams

พร็อพเพอร์ตี้เลย์เอาต์จำนวนมากที่ใช้ได้กับมุมมองใน RelativeLayout มีดังนี้

android:layout_alignParentTop

หาก "true" จะทำให้ขอบด้านบนของมุมมองนี้ตรงกับขอบด้านบนขององค์ประกอบหลัก

android:layout_centerVertical

หาก "true" ให้จัดกึ่งกลางวิดเจ็ตย่อยนี้ในแนวตั้งภายในวิดเจ็ตระดับบน

android:layout_below

กำหนดตำแหน่งขอบด้านบนของมุมมองนี้ใต้มุมมองที่ระบุด้วยรหัสทรัพยากร

android:layout_toRightOf

กำหนดตำแหน่งขอบด้านซ้ายของมุมมองนี้ไปทางขวาของมุมมองที่ระบุด้วยรหัสทรัพยากร

ข้างต้นเป็นเพียงตัวอย่างบางส่วนเท่านั้น ดูเอกสารประกอบเกี่ยวกับแอตทริบิวต์เลย์เอาต์ทั้งหมดได้ที่ RelativeLayout.LayoutParams

ค่าของพร็อพเพอร์ตี้เลย์เอาต์แต่ละรายการจะเป็นบูลีนเพื่อ เปิดใช้ตำแหน่งเลย์เอาต์ที่สัมพันธ์กับองค์ประกอบหลัก RelativeLayout หรือรหัสที่ อ้างอิงถึงอีกมุมมองหนึ่งในเลย์เอาต์ซึ่งควรวางตำแหน่งมุมมอง

ในเลย์เอาต์ XML คุณสามารถประกาศการอ้างอิงกับมุมมองอื่นๆ ในเลย์เอาต์ได้โดยไม่ต้องเรียงลำดับ เช่น คุณประกาศให้ "view1" อยู่ใต้ "view2" ได้แม้ว่า "view2" จะเป็น มุมมองสุดท้ายที่ประกาศในลำดับชั้นก็ตาม ตัวอย่างด้านล่างแสดงสถานการณ์ดังกล่าว

ตัวอย่าง

แอตทริบิวต์แต่ละรายการที่ควบคุมตำแหน่งสัมพัทธ์ของแต่ละมุมมองจะได้รับการเน้น

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

ดูรายละเอียดเกี่ยวกับแอตทริบิวต์เลย์เอาต์ทั้งหมดที่ใช้ได้กับแต่ละมุมมองย่อยของ RelativeLayout ได้ที่ RelativeLayout.LayoutParams