App Inventor: มิถุนายน 2013

Screen Arrangement Components

เครื่องมือที่ช่วยในการจัดวางตำแหน่ง ซึ่งจะใช้ในการออกแบบหน้าตาโปรแกรม
แบ่งได้เป็น 3 รูปแบบ ดังนี้

1. Horizontal Arrangement การจัดวางเครื่องมือต่างในรูปแบบแนวนอน

2. Table Arrangement การจัดวางเครื่องมือต่างๆในรูปแบบตาราง

3. Vertical Arrangement การจัดวางเครื่องมือต่างๆในรูปแบบแนวตั้ง

1) Horizontal Arrangement การจัดวางรูปแบบของเครื่องมือในแนวนอน
เครื่องมือต่างๆที่อยู่ภายใน Horizontal Arrangement จะถูกวางเรียงต่อๆกันในแนวนอน

วางเครื่องมือ Button ไปไว้ใน Horizontal Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Horizontal Arrangement นั้นจะถูกจัดวางตำแหน่งในรูปแบบของแนวนอน

Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทำได้

Align Horizontal และ Align Vertical เป็นการจัดรูปแบบเครื่องมือต่างๆที่อยู่ใน Horizontal Arrangement ให้มีตำแหน่งตามต้องการ ค่าปกติของ Align Horizontal จะเป็น Left ชิดซ้าย ซึ่งสามารถปรับให้ Center กึ่งกลาง หรือว่า Right ชิดขวา ได้ แต่ก่อนที่จะปรับตำแหน่งให้กึ่งกลางหรือชิดขวาได้นั้น เราจำเป็นต้องปรับความกว้าง Width ให้มีขนาด Pixel ตามที่ต้องการ หรือเป็น Fill parent ก่อน

Visible การตั้งค่าการแสดงผลการทำงานของเครื่องมือ สามารถเลือกได้คือ showing แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คำสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล

Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

2) Table Arrangement การจัดวางรูปแบบของเครื่องมือในลักษณะของตาราง

เครื่องมือต่างๆที่อยู่ภายใน Table Arrangement จะถูกวางเรียงในรูปแบบของตารางคือมีทั้งแนวตั้งและแนวนอน ซึ่งเครื่องมือต่างๆที่วางได้นั้น จะวางตามจำนวนที่กำหนดไว้ใน Properties Column และ Rows

วางเครื่องมือ Button ไปไว้ใน Table Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Table Arrangement นั้นจะถูกจัดวางตำแหน่งในรูปแบบของตาราง

Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทำได้

Columns กำหนดขนาดจำนวนของคอลัมน์

Rows กำหนดขนาดจำนวนของแถว

Visible การตั้งค่าการแสดงผลการทำงานของเครื่องมือ สามารถเลือกได้คือ showing แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คำสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล

Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

3) Vertical Arrangement การจัดวางรูปแบบของเครื่องมือในแนวตั้ง
เครื่องมือต่างๆที่อยู่ภายใน Vertical Arrangement จะถูกวางเรียงต่อๆกันในแนวตั้ง

วางเครื่องมือ Button ไปไว้ใน Vertical Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Vertical Arrangement นั้นจะถูกจัดวางเรียงต่อๆกัน ในรูปแบบของแนวตั้ง

Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทำได้

Align Horizontal และ Align Vertical เป็นการจัดรูปแบบเครื่องมือต่างๆที่อยู่ใน Vertical Arrangement ให้มีตำแหน่งตามต้องการ ซึ่งค่าปกติของ Align Horizontal จะเป็น Left ชิดซ้าย ซึ่งสามารถปรับให้ Center กึ่งกลาง หรือว่า Right ชิดขวา ได้ แต่ก่อนที่จะปรับตำแหน่งให้กึ่งกลางหรือชิดขวาได้นั้น เราจำเป็นต้องปรับความกว้าง Width ให้มีขนาด Pixel ตามที่ต้องการ หรือเป็น Fill parent ก่อน

Visible การตั้งค่าการแสดงผลการทำงานของเครื่องมือ สามารถเลือกได้คือ showing สั่งให้แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คำสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล

Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

App Inventor

วันเสาร์ที่ 29 มิถุนายน พ.ศ. 2556

ลิงค์ ดาว์นโหลด

ดาวน์โหลดโปรแกรม ไฟล์จำเป็น คู่มือ

วันอังคารที่ 11 มิถุนายน พ.ศ. 2556

Screen Arrangement Components