บทที่ 4 การสร้างแอปพลิเคชัน ButtonImage

สิ่งที่ต้องเตรียมก่อนสร้างแอป : รูปภาพที่ต้องการใส่ในแอป ในตัวอย่างนี้จะเป็นรูปภาพของสุนัข แมว และหมู

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

               ขั้นตอนที่ 2 ไปที่ User Interface > Label ลากใส่ที่หน้าจอ ตรง Text ให้เปลี่ยนจากคำว่า Label เป็น เลือกรูปภาพ และตกแต่ง Font Size , Color ตามที่ต้องการ ดังภาพ

               ขั้นตอนที่ 3 ไปที่ Image > Image ลากใส่ที่หน้าจอ และทำการปรับ Height กับ Width ตามที่ต้องการ (ในตัวอย่างจะเป็นการปรับความสูงและความกว้างเป็นแบบ %) ดังภาพ

               ขั้นตอนที่ 4 ไปที่ Picture > Upload files และคลุมดำรูปภาพที่เตรียมไว้ทั้งหมด แล้วกด Open เพื่ออัปโหลดรูปภาพลงในแอป ดังภาพ

               ขั้นตอนที่ 5 ไปที่ Layout > Row ลากใส่ที่หน้าจอ และไปที่ User Interface > Button ทำการลาก Button ใส่หน้าจอ 3 อัน และทำการตกแต่งตามที่ต้องการ ดังภาพ

               ขั้นตอนที่ 6 ทำการเปลี่ยน Text ของ Button เป็น สุนัข แมว หมู ตามลำดับ ดังภาพ

               ขั้นตอนที่ 7 ทำการกำหนด Height > Relative Size (e.g. “50%”) = 100% และ Width > Relative Size (e.g. “50%”) = 30% ทั้ง 3 Button และคลิกที่ Row1 ทำการกำหนด Height > Fit contents ดังภาพ

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

               ขั้นตอนที่ 9 ต่อไปให้ไปที่ Image1 > from Image1 set Picture to ลากใส่ต่อที่บล็อก when Button1 Click do ดังภาพ

               ขั้นตอนที่ 10 ต่อไปให้ลากบล็อก Image1 > from Image1 set Height to และ Image1 > from Image1 set Width to ต่อข้างล่างบล็อก from Image1 set Picture to และทำการใส่ตัวเลขเพื่อกำหนดความสูง (Height) กับความกว้าง (Width) ของรูปภาพ ดังภาพ (สามารถใส่ได้ตามความเหมาะสม ในตัวอย่างใส่เลข 250)

               ขั้นตอนที่ 11 ให้คลิกที่บล็อกwhen Button1 Click do และคลิกขวาเลือก Duplicate 2 ครั้ง เพื่อก๊อปปี้ชุดบล็อกขึ้นมาอีก 2 ชุดบล็อก ดังภาพ

               ขั้นตอนที่ 12 ทำการเปลี่ยนเลข Button และชื่อรูปให้เข้าด้วยกัน ดังภาพ

               ขั้นตอนที่ 13 กลับมาที่หน้า Design ให้ทำการตกแต่งแอปให้สวยงามตามเหมาะสม เช่น ใส่ BackgroundColor ให้กับ Screen , ใส่ Border Image ดังภาพ

หน้าตาของแอปพลิเคชัน ButtonImage ที่เสร็จแล้ว

Leave a Comment