บทที่ 5 การสร้าง TOP TAB NAVIGATOR

            ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Top_Tab_Navigator จากนั้นกด Create

           ขั้นตอนที่ 2 ใส่สี BackgroundColor ตามที่ต้องการ

           ขั้นตอนที่ 3 ให้ไปที่ User Interface > Button ลากใส่ที่หน้าจอ เปลี่ยน Text จากคำว่า Button เป็น >>> NEXT พร้อมกับตกแต่ง Text Color , BackgroundColor , Border , Font Bold ฯลฯ ให้สวยงามตามต้องการ

           ขั้นตอนที่ 4 ให้ไปที่ + เพื่อเพิ่ม Screen ขึ้นมาอีก 2 อัน พร้อมทำซ้ำตามขั้นตอนที่ 2 กับ Screen2 และ Screen3

           ขั้นตอนที่ 5 ต่อไปจะเป็นการทำให้ปุ่มกดทำงานไปหน้าถัดไปได้ โดยไปที่ Blocks แล้วไปที่ Button1 > when Button1 Click do ลากใส่ที่หน้าจอ

           ขั้นตอนที่ 6 ให้ไปที่ Control > navigate to Screen1 ลากมาต่อข้างล่างบล็อก when Button1 Click do พร้อมกับเปลี่ยนจาก navigate to Screen1 เป็น navigate to Screen2

           ขั้นตอนที่ 7 ให้ทำการคลิกชุดบล็อก when Button1 Click do navigate to Screen2 แล้วกดแป้นพิมพ์ปุ่ม Ctrl + C

           ขั้นตอนที่ 8 ให้ไปที่หน้า Screen2 และ Screen3 และกดแป้นพิมพ์ปุ่ม Ctrl + V เพื่อวางชุดบล็อก โดยหน้า Screen2 ให้ทำการเปลี่ยนจาก when Button1 Click do navigate to Screen2 เป็น when Button2 Click do navigate to Screen3 และหน้า Screen3 ให้ทำการเปลี่ยนจาก when Button1 Click do navigate to Screen2 เป็น when Button3 Click do navigate to Screen1

           ขั้นตอนที่ 9 ให้กลับมาที่ Design แล้วไปที่ Layout > Top Tab Navigator ลากใส่ที่หน้าจอ จากนั้นให้ทำการลบ Home , About , Contact , Setting ที่อยู่ข้างล่าง Top_Tab_Navigator1 ออกให้หมด แล้วลาก Screen1 Screen2 Screen3 ใส่ต่อข้างล่างแทน เป็นการจบการขั้นตอนการทำแอปพลิเคชันนี้

           ขั้นตอนที่ 10 แอปพลิเคชัน Top Tab Navigator ที่เสร็จสมบูรณ์