วิธีทำความเข้าใจเลย์เอาต์ Android จำนวนมาก

Linear, Relative, Constraint, Table, Frame และอื่นๆ เป็นต้น แอปพลิเคชัน Android มีเลย์เอาต์มากมายให้เลือกเมื่อคุณต้องการออกแบบแอปพลิเคชันของคุณ คำถามคือ อันไหนดีที่สุด?

ก่อนที่เราจะลงรายละเอียดเกี่ยวกับเลย์เอาต์ต่างๆ อันดับแรก เราจะพูดถึงลำดับชั้นของออบเจ็กต์การดูและขั้นตอนการวาดของ Android

ดูและดูกลุ่ม

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

ในทางกลับกัน View เป็นส่วนประกอบพื้นฐานขององค์ประกอบ UI มุมมองสามารถเป็นส่วนหนึ่งของ ViewGroup ตัวอย่างเช่น TextView เป็น มุมมอง .

วัด -> เลย์เอาต์ -> วาด -> ทำซ้ำ

เลย์เอาต์จะถูกบันทึกเป็นไฟล์ XML ใน Android แต่จะแปลงเป็นวัตถุที่เราเห็นบนหน้าจอได้อย่างไร ไฟล์ XML แต่ละไฟล์ได้รับการสร้างอินสแตนซ์ (อ่าน:พอง) และแผนผังลำดับชั้นของมุมมองจะถูกสร้างขึ้น ซึ่งหมายความว่าหากคุณมีเลย์เอาต์ B ที่ซ้อนอยู่ในเลย์เอาต์ A พวกเขาจะมีความสัมพันธ์แบบลูกกับพาเรนต์ (เลย์เอาต์ A เป็นพาเรนต์ของเลย์เอาต์ B) เมื่อต้นไม้ก่อตัวขึ้นแล้ว จะมี 3 ระยะที่จะเกิดขึ้น:การวัด การจัดวาง และการวาด แต่ละเฟสจะตัดผ่านต้นไม้ในลำดับการค้นหาลึกก่อน

การวัด

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

เลย์เอาต์

ที่นี่ แต่ละโหนดจะกำหนดขนาดและตำแหน่งสุดท้ายของแต่ละโหนดย่อยบนหน้าจอ

วาด

เริ่มจากโหนดรูทซึ่งดึงตัวเองขึ้นมา จากนั้นบอกให้ลูกๆ ของมันวาดรูปตัวเอง ในลักษณะนี้ สิ่งที่เกิดขึ้นคือผู้ปกครองจะถูกวาดและลูกจะถูกวาดทับ

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

รายละเอียดเลย์เอาต์

เชิงเส้น

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

คุณลักษณะที่น่าสนใจอย่างหนึ่งของ Linear Layout คือ layout_weight คุณลักษณะ. ใช้เพื่อบอก Linear Layout ว่าจะแบ่งช่องว่างระหว่างมุมมองย่อยได้อย่างไร มีประโยชน์เมื่อคุณต้องการให้เลย์เอาต์ของคุณสอดคล้องกันระหว่างอุปกรณ์และการวางแนว

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        />

</LinearLayout>

สมมติว่าคุณต้องการ TextView ตัวแรกที่มีคำว่า สวัสดี เพื่อให้กินพื้นที่ 3/4 ของความกว้างหน้าจอเสมอ ในการดำเนินการนี้ เราสามารถใช้แอตทริบิวต์ layout_weight ได้

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"        // <-- We added a total weight for our layout (4)
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"   // <-- Will have a weight of 3 out of 4 (3/4)
        android:text="Hello" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:layout_weight="1"   // <-- Will have a weight of 1 out of 4 (1/4)
        />

</LinearLayout>

ญาติ

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

คุณลักษณะที่มีประโยชน์อย่างหนึ่งของ RelativeLayout คือความสามารถในการจัดกึ่งกลางมุมมองย่อยโดยใช้ centerInParent แอตทริบิวต์

ข้อจำกัด

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

เฟรม

เลย์เอาต์นี้ใช้เพื่อเก็บมุมมองย่อยเดียวเท่านั้น ดังนั้นจึงบล็อกมุมมองอื่นในเลย์เอาต์ เลย์เอาต์นั้นจะใหญ่พอๆ กับมุมมองย่อยที่ใหญ่ที่สุด (จะมองเห็นหรือไม่ก็ตาม) บวกกับช่องว่างภายในด้วย

หลีกเลี่ยงการมีมุมมองย่อยหลายมุมมองภายใน FrameLayout เนื่องจากเป็นการยากที่จะหลีกเลี่ยงไม่ให้มุมมองย่อยซ้อนทับกัน คุณสามารถควบคุมตำแหน่งของมุมมองย่อยเหล่านี้ได้โดยกำหนด layout_gravity คุณลักษณะของเด็กแต่ละคน

มุมมองรายการ/มุมมองกริด

ใช้เมื่อคุณต้องการนำเสนอหลายรายการบนหน้าจอ (เช่น ในเมนูร้านอาหาร) มุมมองรายการเป็นรายการคอลัมน์เดียวที่ผู้ใช้สามารถเลื่อนดูได้ คุณมองว่า Grid View เป็น List View ที่มีมากกว่าหนึ่งคอลัมน์ได้

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

เค้าโครงตาราง

เลย์เอาต์นี้คล้ายกับ Grid View มาก เลย์เอาต์นี้จะจัดเรียงลูกๆ ออกเป็นแถวและคอลัมน์ แต่ละเลย์เอาต์จะมีอ็อบเจ็กต์ TableRow หลายอัน โดยแต่ละอันกำหนดแถว

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