ว่าง ๆ มาทำทำความรู้จักกับ Navigation Architecture Component

จากงาน Google I/O 2018 นั้นมีหลายสิ่งอย่างมาก ๆ สำหรับชาว Android จะเห็นได้ว่าทำการสรุปและรวบรวมชุดเครื่องมือต่าง ๆ ไว้ในชื่อใหม่ว่า Android Jetpack ซึ่งช่วยทำให้การพัฒนาง่ายและสะดวกขึ้น ลดจำนวน code ขยะหรือที่ไม่จำเป็นลงไป รวมทั้งช่วยพัฒนาระบบที่มีคุณภาพและเสถียรอีกด้วย บอกได้คำเดียวว่าเพียบ มีทั้งของเก่าและใหม่ มีตัวหนึ่งที่น่าสนใจคือ Navigation หรือ Navigation Architecture Component ดังนั้นมาทำความรู้จักกันหน่อย จะเข้าใจง่ายขึ้น ก็ต้องใช้งานสิ มาเริ่มกันเลย

Navigation Architecture Component คืออะไร ?

ตามชื่อมันเลย เอามาช่วยจัดการเรื่อง flow การทำงานของ app นั่นเอง โดยปกติเรามักจะออกแบบ flow การทำงานของ app ผ่านพวกเครื่องมืออื่น ๆ เช่นพวก Sketch หรือในกระดาษ ชาวพัฒนา Android app อาจจะแอบอิจฉาทางพัฒนา iOS app ที่มี Storyboard ใน XCode ให้ใช้งาน ทำให้เห็น flow การทำงานของ app ชัดเจนกว่า (ถ้าใช้งานและจัดการดี ๆ นะ) แล้วใน Android Studio ละ ไม่มีให้ใช้หรือ ? คำตอบคือ มันมีให้แล้ว แต่ต้องใช้งานผ่าน Android Studio 3.2 Canary นะ ซึ่งมีความช้า และ ความกิน Memory ไม่เป็นสองรองใครทั้งสิ้น

ปกติการจัดการ flow การทำงานของระบบ

เช่นจาก Activity ไป Activity ใช้ startActivity() ต่อจากนี้ไปไม่ต้องแล้ว มี NavController ให้เลย จากนั้นก็ระบุชื่อของปลายทาง และค่าที่จะส่งไปให้ผ่าน Argument ได้อีก สบายกันละ ถ้าใครเคยจัดการเรื่อง Flow การทำงานของ app น่าจะคุ้นกับพวก Flow หรือ Navigation หรือ Routing pattern

จากนั้นมาลองใช้งานกัน เพื่อทำความเข้าใจมันมากขึ้น

หลังจากที่ติดตั้ง Android Studio 3.2 แล้ว ก็ต้องทำการเพื่อ dependency ของ Navigation Architecture Component เข้ามายังไฟล์ /app/build.gradle ด้วย ดังนี้ [gist id="71a057ad07ac105e9b95a67ab8650b40" file="build.gradle"] ปล. มีชุด library สำหรับทดสอบให้อีกด้วยนะครับ ทำการสร้าง Android Resource File ชนิด Navigation ซึ่งจะสร้างไฟล์ใน directory navigation ขึ้นมา

เข้าสู่โลกของ Navigation กัน

ประกอบไปด้วย 3 ส่วนการทำงานหลัก คือ

1. Destination list สำหรับหน้าจอทั้งหมดที่อยู่ใน navigation ของเรา
2. Graph editor ซึ่งอยู่ตรงกลาง สามารถลากวางได้ง่าย ๆ หรือแก้ไขผ่าน XML ก็ได้
3. Attribute editor สำหรับกำหนดค่าต่าง ๆ นั่นเอง

การใช้งานก็ง่ายมาก ๆ แค่เพิ่ม Destination เข้ามาก่อน สามารถเลือก Activity/Fragment ที่มีอยู่เข้ามาได้ หรือจะสร้างขึ้นมาใหม่ก็ได้ การสร้าง Destination ใหม่ ซึ่งจะเป็น Fragment นั่นเอง

มาดูสิ่งที่อยากทำดีกว่า

ผมต้องการให้ Activity หลักมีการทำงานดังนี้ หน้าที่ 1 คือ List จะมีปุ่มให้ใช้ 2 ปุ่มคือ ไปหน้า Detail และหน้า Setting หน้าที่ 2 คือ Detail หน้าที่ 3 คือ Setting ดังนั้นก็ทำการสร้างทั้ง 3 หน้าหรือ destination ขึ้นมา แสดงดังรูป ที่สำคัญยังทำการสร้าง code ของ Fragment หรือ Destination ให้ด้วยนะ โดย code อาจจะเยอะหน่อย แต่ก็อ่านเข้าใจได้ง่าย ซึ่งถ้าปกติจะมี action, argument และ interface/listener ให้ใช้งานด้วย แต่เพียงเท่านี้ยังไม่สามารถทำงานได้ เราต้องทำการเขียน code สำหรับจัดการ action การกดปุ่มในหน้า List ก่อน ซึ่งตรงนี้ก็ใช้คำสั่งง่าย ๆ ผ่าน NavController ไปเลย ดังนี้ [gist id="71a057ad07ac105e9b95a67ab8650b40" file="List.kt"] เมื่อทุกอย่างพร้อม เราก็ run app ทดสอบกันได้เลย น่าจะทำให้การจัดการ floe การทำงานของ app ง่ายขึ้นกว่าเดิมมาก ๆ และน่าจะทำให้ขั้นตอนการ app เปลี่ยนไปด้วย ขอให้สนุกกับการเขียน code ครับ