สร้างเลย์เอาต์เชิงเส้น

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

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

คอลัมน์หรือแถว →

LinearLayout เป็นกลุ่มการแสดงผลที่จัดแนวองค์ประกอบย่อยทั้งหมดในทิศทางเดียว ไม่ว่าจะเป็นแนวตั้งหรือ แนวนอน คุณระบุทิศทางเลย์เอาต์ได้ด้วยแอตทริบิวต์ android:orientation

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

น้ำหนักเลย์เอาต์

LinearLayout ยังรองรับการกำหนดน้ำหนักให้กับ บุตรหลานแต่ละคนด้วยแอตทริบิวต์ android:layout_weight แอตทริบิวต์นี้กำหนดค่า "ความสำคัญ" ให้กับมุมมองในแง่ของ พื้นที่ที่ใช้บนหน้าจอ ค่าถ่วงน้ำหนักที่มากขึ้นจะช่วยให้ขยาย เพื่อเติมพื้นที่ที่เหลือในมุมมองระดับบนได้ มุมมองย่อยระบุน้ำหนักได้ และระบบจะกำหนดพื้นที่ที่เหลือในกลุ่มการแสดงผลให้กับมุมมองย่อยตามสัดส่วน โดยอิงตามน้ำหนักที่ประกาศไว้ น้ำหนักเริ่มต้นคือ 0

การกระจายอย่างเท่าเทียม

หากต้องการสร้างเลย์เอาต์เชิงเส้นที่แต่ละองค์ประกอบย่อยใช้พื้นที่บนหน้าจอเท่ากัน ให้ตั้งค่า android:layout_height ของแต่ละมุมมองเป็น "0dp" สำหรับเลย์เอาต์แนวตั้ง หรือตั้งค่า android:layout_width ของแต่ละมุมมองเป็น "0dp" สำหรับเลย์เอาต์แนวนอน จากนั้นตั้งค่า android:layout_weightของแต่ละมุมมองเป็น "1"

การกระจายที่ไม่เท่ากัน

นอกจากนี้ คุณยังสร้างเลย์เอาต์เชิงเส้นที่องค์ประกอบย่อยใช้พื้นที่บนหน้าจอในปริมาณที่แตกต่างกันได้ด้วย ลองดูตัวอย่างต่อไปนี้

• สมมติว่าคุณมีฟิลด์ข้อความ 3 รายการ โดย 2 รายการมีค่าน้ำหนักเป็น 1 และ รายการที่ 3 มีค่าน้ำหนักเริ่มต้นเป็น 0 ช่องข้อความที่ 3 ซึ่งมีค่า weight เป็น 0 จะใช้เฉพาะพื้นที่ที่เนื้อหาต้องการเท่านั้น ส่วนฟิลด์ข้อความอีก 2 รายการที่มีค่าถ่วงน้ำหนักเป็น 1 จะขยายเท่าๆ กันเพื่อเติมเต็มพื้นที่ที่เหลือหลังจากวัดเนื้อหาของทั้ง 3 ฟิลด์แล้ว
• แต่หากคุณมีช่องข้อความ 3 ช่อง โดย 2 ช่องมีค่าน้ำหนักเป็น 1 และช่องที่ 3 มีน้ำหนักเป็น 2 ระบบจะจัดสรรพื้นที่ที่เหลือหลังจาก วัดเนื้อหาของทั้ง 3 ช่องดังนี้ ครึ่งหนึ่งให้กับช่องที่มีค่าน้ำหนักเป็น 2 และอีกครึ่งหนึ่งจะแบ่งเท่าๆ กันระหว่าง ช่องที่มีค่าน้ำหนักเป็น 1

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

ดูรายละเอียดเกี่ยวกับแอตทริบิวต์ที่ใช้ได้กับหน้าจอสำหรับเด็กแต่ละรายการของ LinearLayout ได้ที่ LinearLayout.LayoutParams