top of page

4.5 การสร้าง TOP TAB NAVIGATOR

10.22.png
10.33.png
10.11.png
—Pngtree—uniformed pupils_3282575.png

                 ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Top_Tab_Navigator จากนั้นไปเอาเครื่องหมายถูกในช่อง Try it out ออกแล้วกด Create

1.png

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

2.png

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

3.1.png
3.2.png

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

4.1.png
4.2.png
4.31.png

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

5.png

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

6.png

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

7.png

                ขั้นตอนที่ 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  

8.2.png
8.1.png

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

9.2.png
9.1.png
9.4.png

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

10.22.png
10.33.png
10.11.png
bottom of page