หลักพื้นฐานของ Android Kotlin 07.3: GridLayout พร้อม RecyclerView

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

บทนำ

ข้อดีหลักอย่างหนึ่งของ RecyclerView คือการอนุญาตให้คุณใช้เครื่องมือจัดการเลย์เอาต์เพื่อควบคุมและแก้ไขกลยุทธ์เลย์เอาต์ LayoutManager จะจัดการวิธีจัดเรียงรายการใน RecyclerView

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

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

สิ่งที่คุณควรทราบอยู่แล้ว

คุณควรคุ้นเคยกับสิ่งต่อไปนี้

  • การสร้างอินเทอร์เฟซผู้ใช้พื้นฐานโดยใช้ Activity, Fragments และ Views
  • การไปยังมาระหว่าง Fragment และการใช้ safeArgs เพื่อส่งข้อมูลระหว่าง Fragment
  • ดูโมเดล ดูโรงงานโมเดล และการเปลี่ยนรูปแบบ
  • LiveData และผู้สังเกตการณ์
  • วิธีสร้างRoomฐานข้อมูล สร้าง DAO และกำหนดเอนทิตี
  • วิธีใช้โครูทีนสำหรับงานฐานข้อมูลและงานอื่นๆ ที่ใช้เวลานาน
  • วิธีใช้ RecyclerView พื้นฐานกับ Adapter, ViewHolder และเลย์เอาต์ของสินค้า
  • วิธีใช้การเชื่อมโยงข้อมูลสำหรับ RecyclerView
  • วิธีสร้างและใช้อะแดปเตอร์การเชื่อมโยงเพื่อเปลี่ยนรูปแบบข้อมูล

สิ่งที่คุณจะได้เรียนรู้

  • วิธีใช้LayoutManagerอื่นเพื่อเปลี่ยนวิธีแสดงข้อมูลในRecyclerView
  • วิธีสร้างเลย์เอาต์ตารางกริดสำหรับข้อมูลการนอนหลับ

สิ่งที่คุณต้องดำเนินการ

  • สร้างต่อจากแอปติดตามการนอนหลับจาก Codelab ก่อนหน้าในชุดนี้
  • แทนที่รายการข้อมูลการนอนหลับที่แสดงโดย RecyclerView ในแอปด้วยตารางข้อมูลการนอนหลับ

แอปติดตามการนอนหลับมี 2 หน้าจอซึ่งแสดงด้วย Fragment ดังที่แสดงในรูปภาพด้านล่าง

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

แอปนี้ใช้สถาปัตยกรรมที่เรียบง่ายพร้อมตัวควบคุม UI, ViewModel และ LiveData รวมถึงฐานข้อมูล Room เพื่อจัดเก็บข้อมูลการนอนหลับ

ข้อมูลการนอนหลับจะแสดงในRecyclerView ในโค้ดแล็บนี้ คุณจะเปลี่ยนแอปให้ใช้ GridLayout หน้าจอสุดท้ายจะมีลักษณะเหมือนภาพหน้าจอด้านล่าง

ในโค้ดแล็บก่อนหน้านี้ เมื่อคุณเพิ่ม RecyclerView ลงใน fragment_sleep_tracker.xml คุณได้เพิ่ม LinearLayoutManager โดยไม่มีการปรับแต่งใดๆ โค้ดนี้จะแสดงข้อมูลเป็นรายการแนวตั้ง

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

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

GridLayout

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

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

วิธีที่ GridLayout จัดวางรายการ

GridLayout จัดเรียงรายการในตารางกริดของแถวและคอลัมน์ โดยค่าเริ่มต้น เมื่อเลื่อนแนวตั้ง รายการแต่ละรายการในแถวจะใช้ "ช่วง" 1 ช่วง (ในกรณีนี้ ช่วง 1 ช่วงจะเท่ากับความกว้างของ 1 คอลัมน์)

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

โดยค่าเริ่มต้น แต่ละรายการจะใช้ 1 ช่วง แต่คุณสามารถทำให้รายการกว้างขึ้นได้โดยการระบุจำนวนช่วงที่จะใช้ เช่น รายการบนสุดในหน้าจอขวาสุด (แสดงด้านล่าง) จะใช้ 3 ช่วง

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

ขั้นตอนที่ 1: เปลี่ยน LayoutManager

  1. หากจำเป็น ให้ดาวน์โหลดแอป RecyclerViewGridLayout-Starter สำหรับโค้ดแล็บนี้จาก GitHub แล้วเปิดโปรเจ็กต์ใน Android Studio
  2. เปิดไฟล์เลย์เอาต์ fragment_sleep_tracker.xml
  3. นำ Layout Manager ออกจากคำจำกัดความของ sleep_list RecyclerView

โค้ดที่จะลบ

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. เปิด SleepTrackerFragment.kt
  2. ใน OnCreateView() ให้สร้าง GridLayoutManager ใหม่ในแนวตั้งจากบนลงล่างโดยมี 3 ช่วง

    ก่อนคำสั่ง return เพียงเล็กน้อย ตัวสร้าง GridLayoutManager รับอาร์กิวเมนต์ได้สูงสุด 4 รายการ ได้แก่ บริบท ซึ่งก็คือ activity จำนวนช่วง (คอลัมน์ในเลย์เอาต์แนวตั้งเริ่มต้น) การวางแนว (ค่าเริ่มต้นคือแนวตั้ง) และเลย์เอาต์ย้อนกลับ (ค่าเริ่มต้นคือ false) 
val manager = GridLayoutManager(activity, 3)
  1. ใต้บรรทัดนั้น ให้บอก RecyclerView ว่าให้ใช้ GridLayoutManager นี้ RecyclerView อยู่ในออบเจ็กต์การเชื่อมโยงและเรียกว่า sleepList (ดูfragment_sleep_tracker.xml)
binding.sleepList.layoutManager = manager

ขั้นตอนที่ 2: เปลี่ยนเลย์เอาต์

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

  1. เปิด list_item_sleep_night.xml
  2. ลบ sleep_length TextView เนื่องจากดีไซน์ใหม่ไม่จำเป็นต้องใช้
  3. ย้าย quality_string TextView เพื่อให้แสดงใต้ ImageView คุณต้องอัปเดตหลายอย่างเพื่อทำเช่นนั้น นี่คือเลย์เอาต์สุดท้ายสำหรับ quality_string TextView
<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />
  1. ตรวจสอบในมุมมองการออกแบบว่า quality_string TextView อยู่ใต้ ImageView

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

  1. เรียกใช้แอปและสังเกตวิธีแสดงข้อมูลการนอนหลับในตารางกริด

    โปรดทราบว่า ConstraintLayout ยังคงใช้ความกว้างทั้งหมด GridLayoutManager จะกำหนดความกว้างคงที่ให้กับมุมมองตามช่วงของมุมมอง GridLayoutManager พยายามอย่างเต็มที่เพื่อให้เป็นไปตามข้อจำกัดทั้งหมดเมื่อจัดวางตารางกริด เพิ่มพื้นที่ว่าง หรือครอบตัดรายการ
  1. ใน SleepTrackerFragment ในโค้ดที่สร้าง GridLayoutManager ให้เปลี่ยนจำนวนช่วงสำหรับ GridLayoutManger เป็น 1 เรียกใช้แอป แล้วคุณจะเห็นรายการ
val manager = GridLayoutManager(activity, 1)
  1. เปลี่ยนจำนวนช่วงสำหรับ GridLayoutManager เป็น 10 แล้วเรียกใช้แอป สังเกตว่า GridLayoutManager จะพอดีกับ 10 รายการในแถว แต่ตอนนี้รายการต่างๆ ถูกตัดออก
  2. เปลี่ยนจำนวนช่วงเป็น 5 และทิศทางเป็น GridLayoutManager.VERTICAL เรียกใช้แอปและสังเกตว่าคุณเลื่อนในแนวนอนได้อย่างไร คุณจะต้องใช้เลย์เอาต์อื่นเพื่อให้ดูดี
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. อย่าลืมตั้งค่าจำนวนช่วงกลับเป็น 3 และการวางแนวเป็นแนวตั้ง

โปรเจ็กต์ Android Studio: RecyclerViewGridLayout
  • ตัวจัดการเลย์เอาต์จะจัดการวิธีจัดเรียงรายการใน RecyclerView
  • RecyclerView มาพร้อมกับเครื่องมือจัดการเลย์เอาต์สำเร็จรูปสำหรับ Use Case ทั่วไป เช่น LinearLayout สำหรับรายการแนวนอนและแนวตั้ง และ GridLayout สำหรับตารางกริด
  • สำหรับ Use Case ที่ซับซ้อนมากขึ้น ให้ใช้ LayoutManager ที่กำหนดเอง
  • ในมุมมองการออกแบบ GridLayout เหมาะที่สุดสำหรับรายการที่แสดงเป็นไอคอนหรือรูปภาพได้
  • GridLayout จัดเรียงรายการในตารางกริดของแถวและคอลัมน์ เมื่อเลื่อนในแนวตั้ง แต่ละรายการในแถวจะใช้สิ่งที่เรียกว่า "ช่วง"
  • คุณปรับแต่งจำนวนช่องที่รายการใช้ได้เพื่อสร้างตารางกริดที่น่าสนใจยิ่งขึ้นโดยไม่ต้องใช้เครื่องมือจัดการเลย์เอาต์ที่กำหนดเอง
  • สร้างเลย์เอาต์ของรายการสำหรับ 1 รายการในตารางกริด แล้วตัวจัดการเลย์เอาต์จะดูแลการจัดเรียงรายการ
  • คุณตั้งค่า LayoutManager สำหรับ RecyclerView ได้ทั้งในไฟล์เลย์เอาต์ XML ที่มีองค์ประกอบ <RecyclerView> หรือแบบเป็นโปรแกรม

หลักสูตรของ Udacity

เอกสารประกอบสำหรับนักพัฒนาแอป Android

ส่วนนี้แสดงรายการการบ้านที่เป็นไปได้สำหรับนักเรียน/นักศึกษาที่กำลังทำ Codelab นี้เป็นส่วนหนึ่งของหลักสูตรที่สอนโดยผู้สอน ผู้สอนมีหน้าที่ดำเนินการต่อไปนี้

  • มอบหมายการบ้านหากจำเป็น
  • สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานที่ได้รับมอบหมาย
  • ให้คะแนนงานการบ้าน

ผู้สอนสามารถใช้คำแนะนำเหล่านี้ได้มากน้อยตามที่ต้องการ และควรมีอิสระในการมอบหมายการบ้านอื่นๆ ที่เห็นว่าเหมาะสม

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

ตอบคำถามต่อไปนี้

คำถามที่ 1

ข้อใดต่อไปนี้คือ Layout Manager ที่ Android มีให้ เลือกได้มากกว่า 1 ข้อ

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

คำถามที่ 2

"ช่วง" คืออะไร

▢ ขนาดของตารางกริดที่สร้างโดย GridLayoutManager

▢ ความกว้างของคอลัมน์ในตารางกริด

▢ ขนาดของรายการในตารางกริด

▢ จำนวนคอลัมน์ในตารางกริดที่มีการวางแนวตั้ง

เริ่มบทเรียนถัดไป: 7.4: การโต้ตอบกับรายการ RecyclerView