หลักการนำทาง

การไปยังส่วนต่างๆ ระหว่างหน้าจอและแอปต่างๆ เป็นส่วนสำคัญของประสบการณ์ของผู้ใช้ หลักการต่อไปนี้เป็นเกณฑ์พื้นฐานสำหรับประสบการณ์ของผู้ใช้ที่สอดคล้องและใช้งานง่ายในแอปต่างๆ คอมโพเนนต์การนําทางได้รับการออกแบบมาเพื่อใช้หลักการเหล่านี้โดยค่าเริ่มต้น เพื่อให้มั่นใจว่าผู้ใช้สามารถใช้การเรียนรู้และรูปแบบเดียวกันในการนําทางเมื่อย้ายไปมาระหว่างแอป

หมายเหตุ: แม้ว่าคุณจะไม่ได้ใช้คอมโพเนนต์การนำทางในโปรเจ็กต์ แต่แอปก็ควรเป็นไปตามหลักการออกแบบเหล่านี้

ปลายทางเริ่มต้นคงที่

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

รูปที่ 1 หน้าจอรายการคือปลายทางเริ่มต้นของแอป Sunflower

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

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

สถานะการนำทางจะแสดงเป็นกลุ่มปลายทาง

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

การดำเนินการที่เปลี่ยน Back Stack จะทำงานที่ด้านบนของสแต็กเสมอ ไม่ว่าจะโดยการพุชปลายทางใหม่ไปยังด้านบนของสแต็กหรือป๊อปปลายทางบนสุดออกจากสแต็ก การไปยังปลายทางจะพุชปลายทางนั้นไปที่ด้านบนของสแต็ก

คอมโพเนนต์การนำทางจะจัดการการจัดลำดับ Back Stack ทั้งหมดให้คุณ แต่คุณก็เลือกจัดการ Back Stack ด้วยตนเองได้เช่นกัน

ปุ่มขึ้นและปุ่มย้อนกลับเหมือนกันภายในงานของแอป

รูปที่ 2 ปุ่มขึ้นและปุ่มย้อนกลับ

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

ปุ่มขึ้นจะปรากฏในแถบแอปที่ด้านบนของหน้าจอ ภายในงานของแอป ปุ่มขึ้นและปุ่มย้อนกลับจะทำงานเหมือนกัน

ปุ่มขึ้นจะไม่ออกจากแอปของคุณ

หากผู้ใช้อยู่ที่ปลายทางเริ่มต้นของแอป ปุ่มขึ้นจะไม่ปรากฏขึ้น เนื่องจากปุ่มขึ้นจะไม่ออกจากแอป แต่ปุ่มย้อนกลับจะแสดงขึ้นและออกจากแอป

เมื่อเปิดแอปโดยใช้ Deep Link ในงานของแอปอื่น ปุ่มขึ้นจะเปลี่ยนผู้ใช้กลับไปยังงานของแอปและผ่าน Back Stack จำลอง ไม่ใช่แอปที่ทริกเกอร์ Deep Link แต่ปุ่มย้อนกลับจะนำคุณกลับไปยังแอปอื่น

การทำ Deep Link จะจำลองการนำทางด้วยตนเอง

ไม่ว่าจะใช้การทำ Deep Link หรือไปยังปลายทางที่เฉพาะเจาะจงด้วยตนเอง คุณก็ใช้ปุ่มขึ้นเพื่อไปยังปลายทางต่างๆ กลับไปยังปลายทางเริ่มต้นได้

เมื่อทำ Deep Link ไปยังปลายทางภายในงานของแอป ระบบจะนำ Back Stack ที่มีอยู่สำหรับงานของแอปออกและแทนที่ด้วย Back Stack ที่ทำ Deep Link

ลองใช้แอป Sunflower เป็นตัวอย่างอีกครั้ง สมมติว่าผู้ใช้เคยเปิดแอปจากหน้าจอ Launcher และไปยังหน้าจอรายละเอียดของแอปเปิล การดูหน้าจอล่าสุดจะระบุว่ามีงานอยู่ โดยหน้าจอบนสุดเป็นหน้าจอรายละเอียดของ Apple

รูปที่ 3 การไปยังส่วนต่างๆ ของผู้ใช้ผ่านแอป Sunflower และ Back Stack ที่ได้

ในขั้นตอนนี้ ผู้ใช้สามารถแตะปุ่มหน้าแรกเพื่อนำแอปไปไว้ในเบื้องหลังได้ ต่อไป สมมติว่าแอปนี้มีฟีเจอร์ Deep Link ที่ช่วยให้ผู้ใช้เปิดหน้าจอรายละเอียดของต้นไม้ที่เฉพาะเจาะจงได้โดยตรงตามชื่อ การเปิดแอปผ่าน Deep Link นี้จะแทนที่ Back Stack ของ Sunflower ปัจจุบันที่แสดงในรูปที่ 3 ด้วย Back Stack ใหม่โดยสมบูรณ์ ดังที่แสดงในรูปที่ 4

รูปที่ 4 การติดตาม Deep Link จะแทนที่ Back Stack ที่มีอยู่สำหรับแอป Sunflower

โปรดสังเกตว่า Back Stack ของ Sunflower ถูกแทนที่ด้วย Back Stack สังเคราะห์ที่มีหน้าจอรายละเอียดอะโวคาโดอยู่ด้านบน ระบบยังเพิ่มหน้าจอ My Garden ซึ่งเป็นปลายทางเริ่มต้นลงใน Back Stack ด้วย Back Stack เดิมของ Sunflower หายไป รวมถึงความรู้ของแอปที่ว่าผู้ใช้อยู่ในหน้าจอรายละเอียดของ Apple มาก่อน ทั้งหมดนี้เป็นสิ่งสำคัญเนื่องจาก Back Stack สังเคราะห์ต้องสมจริง โดยควรตรงกับ Back Stack ที่อาจทำได้โดยการไปยังส่วนต่างๆ ของแอปโดยตรง

เพื่อตอบสนองความต้องการนี้ Back Stack สังเคราะห์ที่สร้างขึ้นจึงเป็นแบบที่เรียบง่ายซึ่งอิงตาม NavGraph สำหรับ NavGraph แบบง่ายที่ไม่มีการฝัง กราฟนี้จะประกอบด้วยปลายทางเริ่มต้นและปลายทาง Deep Link สำหรับกราฟการนำทางที่ซ้อนกันซึ่งซับซ้อนกว่า Back Stack สังเคราะห์จะมีปลายทางเริ่มต้นของกราฟที่ซ้อนกันซึ่งเป็นระดับบนของปลายทาง Deep Link ด้วย

คอมโพเนนต์การนำทางรองรับการทำ Deep Link และสร้าง Back Stack ที่สมจริงให้คุณเมื่อลิงก์ไปยังปลายทางใดๆ ในกราฟการนำทาง