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

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

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

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

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

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

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

  • สร้างอินสแตนซ์องค์ประกอบเลย์เอาต์ขณะรันไทม์ แอปของคุณสามารถสร้าง View และ ViewGroup วัตถุและจัดการ แบบเป็นโปรแกรมได้

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

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

เขียน XML

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

ไฟล์เลย์เอาต์แต่ละไฟล์ต้องมีองค์ประกอบรากเพียง 1 องค์ประกอบเท่านั้น 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 รายการ โหลดทรัพยากรเลย์เอาต์ในองค์ประกอบ Activity.onCreate() Callback โดยการโทร 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 ภายในแผนผังได้โดยไม่ซ้ำกัน เมื่อแอป คอมไพล์แล้ว ID นี้จะหมายถึงจำนวนเต็ม แต่โดยปกติแล้วจะมีการกำหนดให้ ID ในไฟล์ XML ของเลย์เอาต์เป็นสตริงในแอตทริบิวต์ id นี่คือ แอตทริบิวต์ XML ที่เหมือนกันกับออบเจ็กต์ View ทั้งหมดและกำหนดโดยแอตทริบิวต์ View ชั้นเรียน คุณใช้เบราว์เซอร์นี้บ่อยมาก ไวยากรณ์สำหรับรหัสภายในแท็ก แท็ก XML มีดังนี้

android:id="@+id/my_button"

สัญลักษณ์ at (@) ที่ต้นสตริงหมายความว่า โปรแกรมแยกวิเคราะห์ XML จะแยกวิเคราะห์และขยายสตริงรหัสที่เหลือและระบุเป็น ทรัพยากร ID เครื่องหมายบวก (+) หมายความว่านี่เป็นชื่อทรัพยากรใหม่ ที่ต้องสร้างและเพิ่มลงในทรัพยากรของคุณใน 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 ที่อยู่

ทุกคลาส 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 เรียกว่า width และ height หรือบางครั้ง ความกว้างในการวาดและความสูงในการวาด มิติข้อมูลเหล่านี้จะกำหนด ขนาดจริงของมุมมองบนหน้าจอ ในเวลาวาด และหลังจากการจัดวาง เหล่านี้ ค่าต่างๆ อาจแตกต่างไปจากความกว้างและความสูงที่วัดได้ แต่ไม่จำเป็นต้องทำเช่นนั้น คุณ สามารถดูความกว้างและความสูงได้โดยการเรียก 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 ของ Google เช่น

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);

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

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