สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 2: จัดระเบียบหน้าจอ (Layout & Design)

By Admin
167
14 ส.ค. 2569

สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 2: จัดระเบียบหน้าจอ (Layout & Design)

บทเรียนการสร้างแอปพลิเคชันเบื้องต้นด้วย MIT App Inventor สำหรับนักเรียนชั้น ม.2 ในภารกิจที่ 2 นักเรียนจะได้เรียนรู้เทคนิคการจัดระเบียบหน้าจอผู้ใช้งาน (UI Layout) โดยใช้เครื่องมือ HorizontalArrangement เพื่อจัดวางช่องพิมพ์ข้อความและปุ่มกดให้อยู่ในบรรทัดเดียวกันอย่างเป็นระเบียบ พร้อมทั้งฝึกความคิดสร้างสรรค์ในการตกแต่งสีสันและปรับแต่งรูปร่างส่วนประกอบต่างๆ ให้แอปพลิเคชันมีความสวยงามและน่าใช้งานมากยิ่งขึ้น

ภารกิจที่ 2: จัดระเบียบหน้าจอแอปสมุดจดการบ้าน (Layout & Design)

🎯 ภารกิจ: นำช่องพิมพ์ข้อความและปุ่มกดมาจัดวางให้อยู่ในบรรทัดเดียวกัน และตกแต่งสีสันแอปพลิเคชันให้สวยงาม

💡 แนวคิด: การใช้ Layout เพื่อจัดระเบียบส่วนประกอบ (Components) ให้หน้าจอเป็นระเบียบและดูเป็นมืออาชีพมากขึ้น

1. นำ "กล่องจัดเรียงแนวนอน" มาวาง (HorizontalArrangement)

สร้างพื้นที่สำหรับจัดระเบียบ:

1. ไปที่เมนูซ้ายสุด เลื่อนหาหมวด Layout
2. ลาก HorizontalArrangement มาวางไว้บนสุดของหน้าจอ (เหนือช่องพิมพ์ข้อความ)
3. ไปที่ช่อง Properties ปรับค่า Width ให้เป็น Fill parent... แล้วกด OK (เพื่อขยายกล่องให้กว้างเต็มจอ)

2. จับของใส่กล่อง (ย้าย Component)

STEP 2
ย้ายช่องพิมพ์: คลิกลาก txt_Input ขึ้นไปหย่อน "ข้างใน" กล่อง HorizontalArrangement
ย้ายปุ่มกด: คลิกลาก btn_Save ขึ้นไปหย่อนในกล่องเดียวกัน โดยให้อยู่ทาง "ขวามือ" ของช่องพิมพ์

3. ปรับขนาดให้สมดุล (ขยายช่องพิมพ์)

ดันปุ่มไปชิดขอบจอ:

1. คลิกเลือกช่องพิมพ์ข้อความ (txt_Input)
2. ไปที่ช่อง Properties หาคำว่า Width
3. เลือก Fill parent... แล้วกด OK
👉 ช่องพิมพ์จะขยายกว้างสุด และดันปุ่มบันทึกไปชิดขอบขวาอย่างสวยงามลงตัวพอดี!

4. ตกแต่งสีสัน (อิสระแห่งความสร้างสรรค์)

ตกแต่งแอปในแบบของตัวเอง:

🎨 สีพื้นหลังแอป: คลิก Screen1 แล้วเปลี่ยนสีที่ BackgroundColor
🎨 ตกแต่งปุ่มกด: คลิก btn_Save แล้วปรับแต่งใน Properties ดังนี้:
  - BackgroundColor: เปลี่ยนสีปุ่ม
  - TextColor: เปลี่ยนสีตัวอักษรบนปุ่ม
  - FontBold: ติ๊กถูก ☑️ เพื่อให้ตัวอักษรหนาขึ้น
  - Shape: เลือก Rounded เพื่อให้ขอบปุ่มโค้งมนน่ากด

แชร์ :

เริ่มต้น / สิ้นสุด 💊 แคปซูล	➔	บล็อกเหตุการณ์ / ควบคุม เมื่อคลิก ⛳
รับข้อมูล / แสดงผล ▱ สี่เหลี่ยมด้านขนาน	➔	บล็อกตรวจจับ / รูปลักษณ์ ถาม ... แล้วรอ
ประมวลผล / คำนวณ ▭ สี่เหลี่ยมผืนผ้า	➔	บล็อกตัวแปร / คำนวณ ตั้งค่า [ตัวแปร] เป็น ...