Android Kotlin Fundamentals 07.3: GridLayout พร้อม RecyclerView

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

ข้อมูลเบื้องต้น

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

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

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

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

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

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

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

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

สิ่งที่คุณจะทํา

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

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

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

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

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

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

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

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

เลย์เอาต์ตารางกริด

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

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

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

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

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

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

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

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

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

รหัสที่จะลบ:

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

    เครื่องมือสร้าง 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 มาพร้อมตัวจัดการเลย์เอาต์แบบทันทีสําหรับการใช้งานทั่วไป เช่น LinearLayout สําหรับรายการแนวนอนและแนวตั้ง และ GridLayout สําหรับตารางกริด
  • สําหรับกรณีการใช้งานที่ซับซ้อนมากขึ้น ให้ใช้ LayoutManager ที่กําหนดเอง
  • จากมุมมองด้านการออกแบบ GridLayout จะใช้ได้ดีที่สุดกับรายการที่สามารถแสดงเป็นไอคอนหรือรูปภาพได้
  • GridLayout จัดเรียงรายการในตารางแถวและคอลัมน์ สมมติว่ามีการเลื่อนแนวตั้ง แต่ละรายการในแถวจะใช้สิ่งที่เรียก &&39; เรียกว่า "span."
  • คุณปรับแต่งระยะเวลาที่ครอบคลุมของรายการได้ สร้างตารางกริดที่น่าสนใจมากขึ้นโดยไม่ต้องใช้ตัวจัดการเลย์เอาต์ที่กําหนดเอง
  • สร้างเลย์เอาต์รายการสําหรับสินค้า 1 รายการในตารางกริด และผู้จัดการเลย์เอาต์จะดูแลการจัดเรียงรายการ
  • คุณสามารถตั้งค่า LayoutManager สําหรับ RecyclerView ในไฟล์เลย์เอาต์ XML ที่มีองค์ประกอบ <RecyclerView> หรือแบบเป็นโปรแกรม

หลักสูตร Udacity:

เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android

ส่วนนี้จะอธิบายการบ้านและรายงานสําหรับนักเรียนที่ทํางานผ่าน Codelab นี้ซึ่งเป็นส่วนหนึ่งของหลักสูตรที่นําโดยผู้สอน สิ่งที่ผู้สอนต้องทํามีดังนี้

  • มอบหมายการบ้านหากจําเป็น
  • สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานทําการบ้าน
  • ตัดเกรดการบ้าน

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

หากคุณใช้ Codelab ด้วยตัวเอง ก็ให้ใช้การบ้านเพื่อทดสอบความรู้ของคุณได้

ตอบคําถามเหล่านี้

คำถามที่ 1

ข้อใดต่อไปนี้คือผู้จัดการเลย์เอาต์ที่ Android มีให้ เลือกได้มากกว่า 1 ข้อ

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

คำถามที่ 2

"span"?

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

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

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

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

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