2. Layout Components องค์ประกอบเค้าโครง
จัดทำโดย นางสาวชลธิชา เสือคง รหัส 5931280052 ชทค. ปวส.2 กลุ่ม 3
สารบัญเค้าโครง
1. HorizontalArrangement
2. HorizontalScrollArrangement
3. TableArrangement
4. VerticalArrangement
5. VerticalScrollArrangement
1. HorizontalArrangement (การจัดการตามแนวนอน)
เป็นองค์ประกอบใช้สำหรับจัดเค้าโครงให้อยู่ในแนวนอนเพื่อแสดงกลุ่มขององค์ประกอบที่วางจากซ้ายไปขวา คอมโพเนนต์นี้เป็นองค์ประกอบการจัดรูปแบบที่ใช้วางส่วนประกอบที่ควรจะแสดงจากซ้ายไปขวา ถ้าหากต้องการให้คอมโพเนนต์แสดงผลอยู่ติดกันในแนวตั้งให้ใช้ VerticalArrangementแทน ใน HorizontalArrangement ส่วนประกอบจะจัดเรียงตามแกนนอนแนวตั้งตรงกลางการตั้งค่า
- หากผู้ใช้ตั้งค่าความสูงของ HorizontalArrange เป็น Automatic ความสูงที่แท้จริงของการจัดเรียงจะถูกกำหนดจากวัตถุที่อยู่ใน HorizontalArrange
ซึ่งไม่มีการตั้งค่าคุณสมบัติ Height เป็น Fill Parent ถ้าคุณสมบัติ HeightArrangment's Height ถูกตั้งค่าเป็น Automatic และมีเฉพาะคอมโพเนนต์ที่มีการกำหนดคุณสมบัติ Height ไว้ที่ Fill Parent ความสูงที่แท้จริงของการจัดเรียงจะคำนวณโดยใช้ความสูงโดยอัตโนมัติของส่วนประกอบ หากคุณสมบัติ HeightArrangement's Height ถูกตั้งค่าเป็น Automatic และว่างเปล่าความสูงจะเท่ากับ 100
- หากผู้ใช้ตั้งค่าความกว้างของ HorizontalArrange เป็น Automatic ความกว้างจริงของการจัดเรียงจะพิจารณาจากผลรวมของความกว้างของส่วนประกอบ หากคุณสมบัติ HorizontalArrangement's Width ถูกตั้งค่าเป็น Automatic ส่วนประกอบใด ๆ ที่มีการกำหนดคุณสมบัติ Width ไว้ที่ Fill Parent จะทำหน้าที่เหมือนกับที่ได้ตั้งค่าไว้เป็น Automatic
- หากผู้ใช้ตั้งค่าความกว้างของ HorizontalArrange เป็น Fill Parent หรือระบุเป็นพิกเซลคอมโพเนนต์
ใด ๆ ที่มีการกำหนดคุณสมบัติ Width เป็น Fill Parent จะใช้ความกว้างที่ไม่ได้ครอบครองโดยองค์ประกอบอื่น ๆ
คุณสมบัติ
AlignHorizontal
การตั้งค่าจัดวางเรียงตามแนวนอน มีค่าดังนี้ 1 = จัดชิดซ้าย, 2 = ชิดขวา, 3 = แนวนอนกึ่งกลาง
การจัดตำแหน่งจะไม่มีผลหากความกว้างของการจัดเรียงเป็นไปโดยอัตโนมัติ
AlignVertical
การตั้งค่าจัดวางเรียงตามแนวตั้ง มีค่าดังนี้ 1 = เรียงชิดกันที่ด้านบน, 2 = เรียงชิดกันที่ด้านล่าง, 3 = ตรงกลาง
การจัดตำแหน่งไม่มีผลหากความสูงของการจัดเรียงเป็นไปโดยอัตโนมัติ
BackgroundColor
สีพื้นหลังสำหรับส่วนประกอบต่างๆ
Height
ความสูงของการจัดวางแนวนอน
Width
ความกว้างของการจัดวางแนวนอน
Image
ภาพพื้นหลังของส่วนประกอบต่างๆ
Visible
ถ้าเป็นจริง (Checkbox) ส่วนประกอบและเนื้อหาจะปรากฎให้เห็น
2. HorizontalScrollArrangement (การจัดการตามแนวตั้งที่สามารถเลื่อนซ้ายขวาได้ตามจำนวนของส่วนประกอบ)
องค์ประกอบการจัดรูปแบบที่จะวางส่วนประกอบที่สามารถแสดงจากซ้ายไปขวา คือสามารถสามารถเลื่อนซ้าย-ขวา ได้คุณสมบัติ
การตั้งค่าจัดวางเรียงตามแนวนอน มีค่าดังนี้ 1 = จัดชิดซ้าย, 2 = ชิดขวา, 3 = แนวนอนกึ่งกลาง
การจัดตำแหน่งจะไม่มีผลหากความกว้างของการจัดเรียงเป็นไปโดยอัตโนมัติ
AlignVertical
การตั้งค่าจัดวางเรียงตามแนวตั้ง มีค่าดังนี้ 1 = เรียงชิดกันที่ด้านบน, 2 = เรียงชิดกันที่ด้านล่าง, 3 = ตรงกลาง
การจัดตำแหน่งไม่มีผลหากความสูงของการจัดเรียงเป็นไปโดยอัตโนมัติ
BackgroundColor
สีพื้นหลังสำหรับส่วนประกอบต่างๆ
Height
ความสูงของการจัดวางแนวนอนเป็นเปอร์เซ็น
Width
ความกว้างของการจัดวางแนวนอนเป็นเปอร์เซ็น
Image
ภาพพื้นหลังของส่วนประกอบต่างๆ
Visible
ระบุว่าจะให้คอมโพเนนต์ปรากฏบนหน้าจอหรือไม่ ค่าเป็นจริงถ้าคอมโพเนนต์แสดงและเท็จถ้าซ่อนไว้
3. TableArrangement (การจัดเรียงแบบตาราง)
ใช้ส่วนประกอบการจัดตารางเพื่อแสดงกลุ่มขององค์ประกอบในแบบตารางใน TableArrangement ส่วนประกอบจะถูกจัดเรียงเป็นตารางแถวและคอลัมน์โดยจะไม่สามารถมองเห็นได้มากกว่าหนึ่งองค์ประกอบในแต่ละเซลล์ หากคอมโพเนนต์หลายตัวอยู่ในเซลล์เดียวกันจะเห็นเฉพาะส่วนสุดท้ายเท่านั้น
ความกว้างของคอลัมน์จะถูกกำหนดโดยคอมโพเนนต์ที่กว้างที่สุดในคอลัมน์นั้น เมื่อคำนวณความกว้างของคอลัมน์ความกว้างอัตโนมัติจะใช้สำหรับคอมโพเนนต์ที่มีการตั้งค่า Width ไว้เป็น Fill Parent
อย่างไรก็ตามแต่ละคอมโพเนนต์จะเติมเต็มความกว้างเต็มของคอลัมน์ที่ใช้
ความสูงของแถวถูกกำหนดโดยส่วนประกอบที่สูงที่สุดในแถวที่ไม่มีการตั้งค่าคุณสมบัติความสูงไว้เป็น Fill Parent ถ้าแถวประกอบด้วยเฉพาะคอมโพเนนต์ที่มีการตั้งค่าความสูงเป็น Fill Parent ความสูงของแถวจะคำนวณโดยใช้ความสูงโดยอัตโนมัติของคอมโพเนนต์
คุณสมบัติ
Columns
จำนวนของคอลัมน์ ในตาราง
Height
ความสูงของการจัดตาราง
Width
ความกว้างของการจัดตาราง
Rows
จำนวนของแถว ในตาราง
Visible
ถ้าเป็นจริงส่วนประกอบและเนื้อหาจะปรากฏให้เห็น
4. VerticalArrangement (การจัดระเบียบในแนวตั้ง)
ใช้องค์ประกอบการจัดเรียงแบบแนวตั้งเพื่อแสดงกลุ่มขององค์ประกอบที่วางจากบนลงล่างจัดชิดซ้ายคอมโพเนนต์นี้เป็นองค์ประกอบการจัดรูปแบบที่คุณวางคอมโพเนนต์ที่ควรจะแสดงด้านล่าง คอมโพเนนต์ลูกแรกจะถูกเก็บไว้ที่ด้านบนสุดส่วนลูกที่สองจะถูกเก็บไว้ที่ด้านล่างถัดไปเรื่อยๆหากต้องการให้มีคอมโพเนนต์แสดงอยู่ติดกันให้ใช้ HorizontalArrangement แทน
การตั้งค่า
- หากผู้ใช้ตั้งค่าความกว้างของ VerticalArrangement's เป็น Automatic ความกว้างที่แท้จริงของการจัดเรียงจะถูกกำหนดโดยคอมโพเนนต์ที่กว้างที่สุดในการจัดเรียงซึ่งคุณสมบัติ Width ไม่ได้กำหนดให้เป็น Fill Parent ถ้าคุณสมบัติ VerticalArrangement's Width ถูกตั้งค่าเป็น Automatic และมีเฉพาะคอมโพเนนต์ที่มีการกำหนดคุณสมบัติ Width ไว้ที่ Fill Parent ความกว้างจริงของการจัดเรียงจะคำนวณโดยใช้ความกว้างอัตโนมัติของส่วนประกอบ ถ้าคุณสมบัติ VerticalArrangement Width ถูกตั้งค่าเป็น Automatic และว่างเปล่าความกว้างจะเท่ากับ 100
- ถ้าผู้ใช้ตั้งค่าความสูงของ VerticalArrangement's เป็น Automatic ความสูงที่แท้จริงของการจัดเรียงจะถูกกำหนดโดยผลรวมของความสูงของส่วนประกอบ ถ้าคุณสมบัติ VerticalArrangement's Height ถูกตั้งค่าเป็น Automatic ส่วนประกอบใด ๆ ที่มีคุณสมบัติ Height ถูกตั้งค่าเป็น Fill Parent จะทำงานเหมือนกับว่าได้ตั้งค่าเป็น Automatic
หากความสูงของ VerticalArrangement ถูกตั้งค่าเป็น Fill Parent หรือระบุเป็นพิกเซลส่วนประกอบใด ๆ ที่มีคุณสมบัติ Height ถูกตั้งค่าเป็น Fill Parent จะใช้ค่าความสูงที่ไม่ได้ครอบครองโดยคอมโพเนนต์อื่น ๆ
คุณสมบัติ
AlignHorizontal
การตั้งค่าจัดวางเรียงตามแนวนอน มีค่าดังนี้ 1 = จัดชิดซ้าย, 2 = ชิดขวา, 3 = แนวนอนกึ่งกลาง
การจัดตำแหน่งจะไม่มีผลหากความกว้างของการจัดเรียงเป็นไปโดยอัตโนมัติ
AlignVertical
การตั้งค่าจัดวางเรียงตามแนวตั้ง มีค่าดังนี้ 1 = เรียงชิดกันที่ด้านบน, 2 = เรียงชิดกันที่ด้านล่าง, 3 = ตรงกลาง
การจัดตำแหน่งไม่มีผลหากความสูงของการจัดเรียงเป็นไปโดยอัตโนมัติ
BackgroundColor
สีพื้นหลังสำหรับส่วนประกอบต่างๆ
Height
ความสูงของการจัดวางแนวตั้ง
Width
ความกว้างของการจัดวางแนวตั้ง
Image
ภาพพื้นหลังของส่วนประกอบต่างๆ
Visible
ระบุว่าจะให้คอมโพเนนต์ปรากฏบนหน้าจอหรือไม่ ค่าเป็นจริงถ้าคอมโพเนนต์แสดงและเท็จถ้าซ่อนไว้
5. VerticalScrollArrangement (การจัดระเบียบในแนวตั้งที่สามารถเลื่อนซ้ายขวาได้ตามจำนวนของส่วนประกอบ)
องค์ประกอบการจัดรูปแบบที่จะวางคอมโพเนนต์ที่ควรจะแสดงด้านล่าง (คอมโพเนนต์ลูกแรกจะถูกเก็บไว้ที่ด้านบนส่วนที่สองด้านล่าง ฯลฯ ) ถ้าคุณต้องการให้ส่วนประกอบแสดงอยู่ติดกันให้ใช้ HorizontalArrangement แทน สามารถสามารถเลื่อนซ้าย-ขวา ได้
คุณสมบัติ
AlignHorizontal
การตั้งค่าจัดวางเรียงตามแนวนอน มีค่าดังนี้ 1 = จัดชิดซ้าย, 2 = ชิดขวา, 3 = แนวนอนกึ่งกลาง
การจัดตำแหน่งจะไม่มีผลหากความกว้างของการจัดเรียงเป็นไปโดยอัตโนมัติ
AlignVertical
การตั้งค่าจัดวางเรียงตามแนวตั้ง มีค่าดังนี้ 1 = เรียงชิดกันที่ด้านบน, 2 = เรียงชิดกันที่ด้านล่าง, 3 = ตรงกลาง
การจัดตำแหน่งไม่มีผลหากความสูงของการจัดเรียงเป็นไปโดยอัตโนมัติ
BackgroundColor
สีพื้นหลังสำหรับส่วนประกอบต่างๆ
Height
ความสูงของการจัดวางแนวตั้ง เป็นเปอร์เซ็นต์
Width
ความกว้างของการจัดวางแนวตั้ง เป็นเปอร์เซ็นต์
Image
ระบุเส้นทางของรูปภาพของคอมโพเนนต์ หากมีภาพและ BackgroundColor มีเพียงภาพเท่านั้นที่สามารถมองเห็นได้
Visible
ระบุว่าจะให้คอมโพเนนต์ปรากฏบนหน้าจอหรือไม่ ค่าเป็นจริงถ้าคอมโพเนนต์แสดงและเท็จถ้าซ่อนไว้
แหล่งที่มาของเนื้อหาหลัก
http://ai2.appinventor.mit.edu/reference/components/layout.html#VerticalScrollArrangement
