วิธีเพิ่มส่วนหัวติดหนึบในรายการของคุณใน Jetpack Compose

Jetpack Compose มาพร้อมกับคุณสมบัติในตัวที่เร่งการพัฒนา คุณสมบัติอย่างหนึ่งคือส่วนหัวที่ติดหนึบ แต่ก่อนที่เราจะสำรวจส่วนหัวแบบติดหนึบ มาทำความเข้าใจรายการใน Jetpack Compos กันก่อน

LazyColumn และ LazyRow

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

ทั้งสองใช้พารามิเตอร์เดียวกัน ซึ่งบางส่วนได้แก่:

  • state: LazyListState — ออบเจ็กต์สถานะที่จะใช้ควบคุมหรือสังเกตสถานะของรายการ
  • reverseLayout: Boolean — กลับทิศทางของการเลื่อนและการจัดวาง
  • horizontalArrangement: Arrangement.Horizontal — การจัดวางลูกของเลย์เอาต์ในแนวนอน
  • verticalAlignment: Alignment.Vertical — การจัดตำแหน่งแนวตั้งที่ใช้กับรายการ
  • userScrollEnabled: Boolean — อนุญาตให้เลื่อนด้วยท่าทางของผู้ใช้หรือการดำเนินการเพื่อการเข้าถึงหรือไม่
  • content: LazyListScope.() -> Unit — บล็อกที่อธิบายเนื้อหาของรายการ

ดังที่คุณอาจสังเกตเห็นว่าเนื้อหาของรายการอยู่ภายใน LazyListScope ไม่ยอมรับฟังก์ชัน @Composable โดยตรง แต่คุณจำเป็นต้องใช้ฟังก์ชันอื่นเพื่อสื่อสารเนื้อหาแทน

เนื้อหาภายในรายการสามารถอธิบายได้โดยใช้วิธีการเช่น LazyListScope.item สำหรับการเพิ่มรายการเดียว หรือ LazyListScope.items สำหรับการเพิ่มหลายรายการ จากนั้นภายในนั้นคุณสามารถเรียกใช้ฟังก์ชัน @Composable ได้

นี่คือตัวอย่างง่ายๆ ของวิธีใช้งาน:

item และ items ยอมรับพารามิเตอร์ key ซึ่งควรเป็นคีย์เฉพาะที่แสดงรายการ ไม่อนุญาตให้ใช้คีย์เดียวกันสำหรับหลายรายการในรายการ ประเภทของคีย์ควรบันทึกได้ผ่าน Bundle บน Android หากผ่าน null ตำแหน่งในรายการจะเป็นตัวแทนของคีย์

ดีมาก ตอนนี้ถึงเวลาที่จะพูดถึงสาเหตุที่เรามาที่นี่และนั่นคือ Sticky Headers

แสดงรายการส่วนหัวที่ติดหนึบ

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

โชคดีที่ Jetpack Compose ช่วยให้งานนี้ง่ายขึ้นอย่างมาก ภายในขอบเขตของเนื้อหารายการของเรา เราเพียงแทนที่การใช้วิธี item หรือ items ด้วยวิธีการ stickyHeader สำหรับส่วนหัว ฟีเจอร์อันชาญฉลาดนี้ช่วยยกภาระหนักให้กับเรา โดยสร้างส่วนหัวที่เหนียวแน่นด้วยโค้ดที่น้อยที่สุด

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

นี่เป็นตัวอย่างสั้นๆ เพื่อให้คุณเข้าใจได้ดีขึ้น:

ค่อนข้างน่ากลัวใช่ไหม? เป็นการเรียกใช้ฟังก์ชันง่ายๆ และการยกของหนักทั้งหมดก็เสร็จสิ้น

บทสรุป

โดยสรุป Jetpack Compos ยังคงปฏิวัติวิธีที่เราเข้าถึงการพัฒนา Android UI อย่างต่อเนื่อง ทำให้ใช้งานง่ายขึ้นและยุ่งยากน้อยลง ฟังก์ชัน LazyColumn และ LazyRow ทำให้การแสดงรายการเป็นเรื่องง่าย โดยไม่คำนึงถึงการวางแนวหรือขนาด นอกจากนี้ การใช้ stickyHeader ยังช่วยลดความยุ่งยากในการสร้างส่วนหัวแบบติดหนึบ ซึ่งเป็นงานที่เกี่ยวข้องกับความพยายามในการเขียนโค้ดที่สำคัญ

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

คุณสามารถค้นหาซอร์สโค้ดทั้งหมดได้ใน my GitHub repo 

Want to Connect?

GitHub
LinkedIn
Twitter
Portfolio website

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Jetpack Composer โปรดดูบทความเหล่านี้: