วันจันทร์ที่ 21 กันยายน พ.ศ. 2558

Chapther 1 : GUI Basics - Building an Interface (Layouts)

Layout คือ คลาสย่อยของ Widget ที่กำหนดรูปแบบต่างๆ ของ Embedded widget
ยกตัวอย่างง่ายๆ เช่น FloatLayout เป็นการจัดการกับ widget ที่เรามีการใช้ proportional coordinates  ซึ่งมันจะดีกว่า การใช้เป็น fixed coordinates (exact pixels) จึงช่วยลดภาระการคำนวนต่างๆลงไปได้

ทดลองโค้ดดังนี้ :

floatlayer.py


floatlayer.kv


ผลที่ได้



ใน Layout เองก็มี properties เฉพาะที่ใช้ในตัวมัน เช่น size_hint และ pos_hint และมี key ต่างๆมากมายเช่น x หรือ top , y หรือ right ซึ่ง positioning และ sizing properties มีให้ศึกษาได้จากตารางดังต่อนี้ 


สิ่งหนึ่งที่ต้องระวังก็คือ แต่ละ properties นั้นจะทำงานแตกต่างกันตาม Layout นั้นๆ 
ในปัจจุบัน Kivy นั้นมีทั้งหมด 7 Layout จะอธิบายแต่ละ Layout คร่าวๆดังนี้

FloatLayout
   จัดการ widget ที่มี พิกัด(เช่น size_hint และ pos_hint) เป็นแบบสัดส่วน ค่าจะมีตั้งแต่ 0-1 จากสัดส่วนของ window size 

RelativeLayout    
   ทำงานคล้ายๆ FloatLayout แต่ในเรื่องของ positioning properties (เช่น pos, x, center_x, right) จะสัมพันธ์กับ Layout size ไม่ใช่ window size

GridLayout
   จัดการ widget ใน Grid ต้องระบุอย่างน้อย 2 properties นั่นคือ cols (หลัก) และ rows (แถว)

BoxLayout
   จัดการ widget ในแถวหนึ่ง หรือหลักหนึ่ง ขึ้นอยู่กับค่า property orientation ว่าเป็น horizontal หรือ vertical

StackLayout
   คล้ายๆ BoxLayout แต่มันจะข้ามไปทำงานในแถว และหลักต่อไปทันที เมื่อไม่มีที่ว่างเหลือแล้ว ซึ่งทำให้ Layout นี้มีความซับซ้อนมากกว่า

AnchorLayout
   จัดการกับ widget ที่รอบๆ หรือ ตรงกลาง anchor_x property หมายถึง x position (ซ้าย กลาง หรือ ขวา)  anchor_y หมายถึง  y position (บน กลาง หรือล่าง)

ScatterLayout
   ทำงานคล้าย RelativeLayout แต่มันสามารถทำ multitouch gesturing เพื่อใช้การ rotating, scaling
หรือ translating

ไม่มีความคิดเห็น:

แสดงความคิดเห็น