4.4 การสร้างแอปพลิเคชัน ButtonImage

4.4 การสร้างแอปพลิเคชัน Button Image

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

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

เอาออก

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

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

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

ขั้นตอนที่ 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 > Set Image1 set Picture to ลากใส่ต่อที่บล็อก when Button1 Click do ดังภาพ

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