เลย์เอาต์ในมุมมอง

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

เลย์เอาต์กำหนดโครงสร้างสำหรับ UI ในแอป เช่น ใน an กิจกรรม องค์ประกอบทั้งหมดใน เลย์เอาต์สร้างขึ้นโดยใช้ลำดับชั้นของ View และ ViewGroup ออบเจ็กต์ โดยปกติแล้ว View จะวาดสิ่งที่ผู้ใช้เห็นและโต้ตอบด้วย ViewGroup เป็นคอนเทนเนอร์ที่มองไม่เห็นซึ่งกำหนด โครงสร้างเลย์เอาต์สำหรับ View และออบเจ็กต์ ViewGroup อื่นๆ ดังที่แสดงในรูปที่ 1

รูปที่ 1 ภาพประกอบลำดับชั้นการแสดงผลซึ่งกำหนดเลย์เอาต์ของ UI

ออบเจ็กต์ View มักเรียกว่า วิดเจ็ต และอาจเป็นคลาสย่อยหลายคลาส เช่น Button หรือ TextView ออบเจ็กต์ ViewGroup มักเรียกว่า เลย์เอาต์ และอาจเป็นประเภทต่างๆ ที่มีโครงสร้างเลย์เอาต์ที่แตกต่างกัน เช่น LinearLayout หรือ ConstraintLayout

คุณประกาศเลย์เอาต์ได้ 2 วิธีดังนี้

  • ประกาศองค์ประกอบ UI ใน XML Android มีคำศัพท์ XML ที่ตรงไปตรงมาซึ่งสอดคล้องกับคลาสและคลาสย่อยView เช่น คลาสสำหรับวิดเจ็ตและเลย์เอาต์ นอกจากนี้ คุณยังใช้เครื่องมือแก้ไข เลย์เอาต์ของ Android Studio เพื่อสร้างเลย์เอาต์ XML โดยใช้อินเทอร์เฟซแบบลากและวางได้ด้วย

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

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

เฟรมเวิร์ก Android ช่วยให้คุณมีความยืดหยุ่นในการใช้วิธีการเหล่านี้วิธีใดวิธีหนึ่งหรือทั้งสองวิธีเพื่อสร้าง UI ของแอป เช่น คุณสามารถประกาศเลย์เอาต์เริ่มต้นของแอปใน XML แล้วแก้ไขเลย์เอาต์ในรันไทม์ได้

เขียน XML

การใช้คำศัพท์ XML ของ Android ช่วยให้คุณออกแบบเลย์เอาต์ UI และองค์ประกอบหน้าจอที่เลย์เอาต์นั้นมีได้อย่างรวดเร็วในลักษณะเดียวกับการสร้างหน้าเว็บใน HTML ด้วยชุดองค์ประกอบที่ซ้อนกัน

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

<?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:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

หลังจากประกาศเลย์เอาต์ใน XML แล้ว ให้บันทึกไฟล์ด้วยนามสกุล .xml ในไดเรกทอรี res/layout/ ของโปรเจ็กต์ Android เพื่อให้คอมไพล์ได้อย่างถูกต้อง

ดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์ของไฟล์ XML เลย์เอาต์ได้ที่ ทรัพยากรเลย์เอาต์

โหลดแหล่งข้อมูล XML

เมื่อคุณคอมไพล์แอป ระบบจะคอมไพล์ไฟล์ XML เลย์เอาต์แต่ละไฟล์เป็นแหล่งข้อมูล View โหลดทรัพยากรเลย์เอาต์ในการใช้งาน Callback Activity.onCreate() ของแอป โดยเรียกใช้ setContentView() และส่งการอ้างอิงไปยังแหล่งข้อมูลเลย์เอาต์ในรูปแบบ R.layout.layout_file_name ตัวอย่างเช่น หากบันทึกเลย์เอาต์ XML เป็น main_layout.xml ให้โหลดเลย์เอาต์สำหรับ Activity ดังนี้

Kotlin

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

Java

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

เฟรมเวิร์ก Android จะเรียกใช้เมธอด Callback onCreate() ใน Activity เมื่อ Activity เปิดตัว ดูข้อมูลเพิ่มเติมเกี่ยวกับวงจรการทำงานของกิจกรรมได้ที่ ข้อมูลเบื้องต้นเกี่ยวกับ กิจกรรม

แอตทริบิวต์

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

รหัส

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

android:id="@+id/my_button"

สัญลักษณ์ at (@) ที่จุดเริ่มต้นของสตริงบ่งบอกว่า ตัวแยกวิเคราะห์ XML จะแยกวิเคราะห์และขยายสตริงรหัสที่เหลือ รวมถึงระบุสตริงนั้นเป็น แหล่งข้อมูลรหัส สัญลักษณ์ บวก (+) หมายความว่านี่คือชื่อแหล่งข้อมูลใหม่ที่ต้องสร้างและเพิ่มลงในแหล่งข้อมูลในไฟล์ R.java

เฟรมเวิร์ก Android มีแหล่งข้อมูลรหัสอื่นๆ อีกมากมาย เมื่ออ้างอิงรหัสแหล่งข้อมูล Android คุณไม่จำเป็นต้องใช้สัญลักษณ์ บวก แต่ต้องเพิ่มเนมสเปซแพ็กเกจ android ดังนี้

android:id="@android:id/empty"

เนมสเปซแพ็กเกจ android บ่งบอกว่าคุณกำลังอ้างอิง รหัสจากคลาสแหล่งข้อมูล android.R ไม่ใช่คลาสแหล่งข้อมูลในเครื่อง

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

  1. กำหนดมุมมองในไฟล์เลย์เอาต์และกำหนดรหัสที่ไม่ซ้ำกันให้กับมุมมอง ดังตัวอย่างต่อไปนี้ 
    <Button android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>
  2. สร้างอินสแตนซ์ของออบเจ็กต์มุมมองและดึงข้อมูลจากเลย์เอาต์ โดยปกติแล้วจะทำใน onCreate() เมธอด ดังที่แสดงในตัวอย่างต่อไปนี้

    Kotlin

    val myButton: Button = findViewById(R.id.my_button)

    Java

    Button myButton = (Button) findViewById(R.id.my_button);

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

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

พารามิเตอร์เลย์เอาต์

แอตทริบิวต์เลย์เอาต์ XML ที่ชื่อ layout_something กำหนด พารามิเตอร์เลย์เอาต์สำหรับ View ที่เหมาะสมกับ ViewGroup ที่ View นั้นอยู่

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

รูปที่ 2 การแสดงข้อมูลผ่านภาพของลำดับชั้นการแสดงผลที่มีพารามิเตอร์เลย์เอาต์ เชื่อมโยงกับมุมมองแต่ละรายการ

คลาสย่อย LayoutParams ทุกคลาสมีไวยากรณ์ของตัวเองสำหรับการตั้งค่า องค์ประกอบย่อยแต่ละรายการต้องกำหนด LayoutParams ที่เหมาะสมกับองค์ประกอบระดับบนสุด แม้ว่าอาจกำหนด LayoutParams อื่นสำหรับองค์ประกอบย่อยของตัวเองก็ได้

กลุ่มมุมมองทั้งหมดมีทั้งความกว้างและความสูง โดยใช้ layout_width และ layout_height และมุมมองแต่ละรายการต้องกำหนดแอตทริบิวต์เหล่านี้ LayoutParams หลายรายการมีระยะขอบและเส้นขอบที่ไม่บังคับ

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

  • wrap_content: บอกให้มุมมองปรับขนาดให้เป็นขนาดที่เนื้อหาต้องการ
  • match_parent: บอกให้มุมมองมีขนาดใหญ่เท่าที่กลุ่มการแสดงผลระดับบนสุด อนุญาต

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

ตำแหน่งเลย์เอาต์

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

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

นอกจากนี้ ยังมีเมธอดที่สะดวกเพื่อหลีกเลี่ยงการคำนวณที่ไม่จำเป็น ได้แก่ getRight() และ getBottom() เมธอดเหล่านี้จะแสดงผลพิกัดของขอบด้านขวาและด้านล่างของสี่เหลี่ยมผืนผ้าที่แสดงมุมมอง ตัวอย่างเช่น การเรียกใช้ getRight() จะคล้ายกับการคำนวณต่อไปนี้ getLeft() + getWidth()

ขนาด ระยะห่างจากขอบ และระยะขอบ

ขนาดของมุมมองแสดงด้วยความกว้างและความสูง มุมมองมีค่าความกว้างและความสูง 2 คู่

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

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

มุมมองจะพิจารณาระยะห่างจากขอบเมื่อวัดขนาด ระยะห่างจากขอบแสดงเป็นพิกเซลสำหรับส่วนด้านซ้าย ด้านบน ด้านขวา และด้านล่างของมุมมอง คุณสามารถใช้ระยะห่างจากขอบเพื่อชดเชยเนื้อหาของมุมมองตามจำนวนพิกเซลที่ระบุ เช่น ระยะห่างจากขอบด้านซ้าย 2 พิกเซลจะเลื่อนเนื้อหาของมุมมองไปทางขวา 2 พิกเซลจากขอบด้านซ้าย คุณสามารถตั้งค่าระยะห่างจากขอบได้โดยใช้เมธอด setPadding(int, int, int, int) และค้นหาได้โดยเรียกใช้ getPaddingLeft(), getPaddingTop(), getPaddingRight() และ getPaddingBottom()

แม้ว่ามุมมองจะกำหนดระยะห่างจากขอบได้ แต่ก็ไม่รองรับระยะขอบ อย่างไรก็ตาม กลุ่มมุมมองรองรับระยะขอบ ดูข้อมูลเพิ่มเติมได้ที่ ViewGroup และ ViewGroup.MarginLayoutParams

ดูข้อมูลเพิ่มเติมเกี่ยวกับขนาดได้ที่ ขนาด

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

  <?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:orientation="vertical" >
      <TextView android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:text="Hello, I am a TextView" />
      <Button android:id="@+id/button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:paddingBottom="4dp"
              android:paddingEnd="8dp"
              android:paddingStart="8dp"
              android:paddingTop="4dp"
              android:text="Hello, I am a Button" />
  </LinearLayout>

ตัวอย่างก่อนหน้าแสดงการใช้ระยะขอบและระยะห่างจากขอบ TextView มีการใช้ระยะขอบและระยะห่างจากขอบแบบสม่ำเสมอทุกด้าน และ Button แสดงวิธีใช้ระยะขอบและระยะห่างจากขอบแยกกันกับขอบต่างๆ

เลย์เอาต์ที่พบได้ทั่วไป

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

ต่อไปนี้คือเลย์เอาต์ประเภทที่พบได้ทั่วไปซึ่งสร้างขึ้นในแพลตฟอร์ม Android

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

จัดระเบียบองค์ประกอบย่อยเป็นแถวเดียวในแนวนอนหรือแนวตั้ง และสร้าง แถบเลื่อนหากความยาวของหน้าต่างเกินความยาวของหน้าจอ

สร้างเว็บแอปใน WebView

แสดงหน้าเว็บ

สร้างรายการแบบไดนามิก

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

เลย์เอาต์ที่พบได้ทั่วไปซึ่งเป็นไปได้ด้วย RecyclerView และ AdapterView มีดังนี้

รายการ

แสดงรายการแบบคอลัมน์เดียวที่เลื่อนได้

ตารางกริด

แสดงตารางกริดแบบคอลัมน์และแถวที่เลื่อนได้

RecyclerView มีความเป็นไปได้มากกว่าและ มีตัวเลือกในการ สร้างตัวจัดการ เลย์เอาต์ที่กำหนดเอง

ป้อนข้อมูลลงในมุมมองอะแดปเตอร์

คุณสามารถป้อนข้อมูลลงใน AdapterView เช่น ListView หรือ GridView ได้โดย การผูกอินสแตนซ์ AdapterView กับ Adapter, ซึ่งจะดึงข้อมูลจากแหล่งที่มาภายนอกและสร้าง View ที่แสดงรายการข้อมูลแต่ละรายการ

Android มีคลาสย่อยหลายคลาสของ Adapter ซึ่งมีประโยชน์ สำหรับการดึงข้อมูลประเภทต่างๆ และสร้างมุมมองสำหรับ AdapterView อะแดปเตอร์ 2 รายการที่พบได้ทั่วไปมากที่สุดคือ

ArrayAdapter
ใช้อะแดปเตอร์นี้เมื่อแหล่งข้อมูลเป็นอาร์เรย์ โดยค่าเริ่มต้น ArrayAdapter จะสร้างมุมมองสำหรับรายการอาร์เรย์แต่ละรายการโดยเรียกใช้ toString() ในแต่ละรายการและวางเนื้อหาใน TextView

ตัวอย่างเช่น หากคุณมีอาร์เรย์ของสตริงที่ต้องการแสดงใน ListView ให้เริ่มต้น ArrayAdapter ใหม่โดยใช้เครื่องมือสร้างเพื่อระบุเลย์เอาต์สำหรับสตริงแต่ละรายการและอาร์เรย์สตริง:

Kotlin

    val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)

Java

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, myStringArray);

อาร์กิวเมนต์สำหรับตัวสร้างนี้มีดังนี้

  • แอปของคุณ Context
  • เลย์เอาต์ที่มี TextView สำหรับสตริงแต่ละรายการใน อาร์เรย์
  • อาร์เรย์สตริง

จากนั้นเรียกใช้ setAdapter() ใน ListView

Kotlin

    val listView: ListView = findViewById(R.id.listview)
    listView.adapter = adapter

Java

    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);

หากต้องการปรับแต่งลักษณะที่ปรากฏของแต่ละรายการ คุณสามารถลบล้าง toString() เมธอดสำหรับออบเจ็กต์ในอาร์เรย์ได้ หรือหากต้องการสร้าง มุมมองสำหรับแต่ละรายการที่ไม่ใช่ TextViewเช่น หากต้องการ ImageView สำหรับรายการอาร์เรย์แต่ละรายการ ให้ขยายคลาส ArrayAdapter และ ลบล้าง getView() เพื่อแสดงผลประเภทมุมมองที่ต้องการสำหรับแต่ละรายการ

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

Kotlin

    val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                              ContactsContract.CommonDataKinds.Phone.NUMBER)
    val toViews = intArrayOf(R.id.display_name, R.id.phone_number)

Java

    String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                            ContactsContract.CommonDataKinds.Phone.NUMBER};
    int[] toViews = {R.id.display_name, R.id.phone_number};

เมื่อสร้างอินสแตนซ์ SimpleCursorAdapter ให้ส่งเลย์เอาต์ที่จะใช้สำหรับผลลัพธ์แต่ละรายการ, Cursor ที่มีผลลัพธ์ และอาร์เรย์ 2 รายการนี้

Kotlin

    val adapter = SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
    val listView = getListView()
    listView.adapter = adapter

Java

    SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
    ListView listView = getListView();
    listView.setAdapter(adapter);

จากนั้น SimpleCursorAdapter จะสร้างมุมมองสำหรับแต่ละแถวใน Cursor โดยใช้เลย์เอาต์ที่ระบุด้วยการแทรกรายการ fromColumns แต่ละรายการลงในtoViews มุมมองที่เกี่ยวข้อง

หากในระหว่างการทำงานของแอป คุณเปลี่ยนข้อมูลพื้นฐานที่อะแดปเตอร์อ่าน ให้เรียกใช้ notifyDataSetChanged() ซึ่งจะแจ้งให้มุมมองที่แนบมาทราบว่าข้อมูลมีการเปลี่ยนแปลงและรีเฟรชตัวเอง

จัดการเหตุการณ์การคลิก

คุณสามารถตอบสนองต่อเหตุการณ์การคลิกในแต่ละรายการใน AdapterView ได้โดยใช้อินเทอร์เฟซ AdapterView.OnItemClickListener ตัวอย่างเช่น

Kotlin

listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
    // Do something in response to the click.
}

Java

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click.
    }
};

listView.setOnItemClickListener(messageClickedHandler);

แหล่งข้อมูลเพิ่มเติม

ดูวิธีใช้เลย์เอาต์ในแอปเดโม Sunflower ใน GitHub