 |
| ตัวอย่างการออกแบบ GUIภาพจากหนังสือ Kivy : Interactive Applications in Python |
- ใช้ AnchorLayout สำหรับ toolbox area ตรงส่วน มุมซ้ายบน
- ใช้ Gridlayout สำหรับ drawing tools 2 columns
- ใช้ AnchorLayout สำหรับ drawing space ตรงส่วน มุมขวาบน
- ใช้ RelativeLayout สำหรับ พื้นที่ที่เกี่ยวข้องกับการวาด
- ใช้ AnchorLayout สำหรับ general options และ status bar ตรงส่วนล่าง
- ใช้ BoxLayout ในแนวตั้งเพื่อจัดตำแหน่งของ general option ที่ด้านบนของ status bar และ ใช้ BoxLayout ในแนวนอนสำหรับ ปุุ่มกดของ general option และ label ของ status bar
หลังจากที่เราได้กำหนดส่วนต่างแล้ว ก็ทำการสร้างไฟล์ของพื้นที่ส่วนต่างขึ้นมา comiccreator.
py , comiccreator.kv , toolbox.kv , generaltools.kv , drawingspace.kv , และ
statusbar.kv
โค้ดในส่วนของ commiccreator.py
# File name: comiccreator.py
import kivy
kivy.require('1.7.0')
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.anchorlayout import AnchorLayout
Builder.load_file('toolbox.kv')
Builder.load_file('drawingspace.kv')
Builder.load_file('generaloptions.kv')
Builder.load_file('statusbar.kv')
class ComicCreator(AnchorLayout):
pass
class ComicCreatorApp(App):
def build(self):
return ComicCreator()
if __name__=="__main__":
ComicCreatorApp().run()
Builder.load_file('....') คือการโหลดไฟล์ ซึ่งจะเห็นได้ว่าไม่จำเป็นต้องโหลดไฟล์ commiccreator.kv เนื่องจากไฟล์นี้จะถูกโหลดโดยอัตโนมัติจากการเรียกใช้ ComicCreatorApp
สำหรับ Comiccreator เราเลือกใช้ AnchorLayout ซึ่งไม่ใช่ทางเลือกเดียว แต่ว่าถ้าถึงขั้นตอนในการเขียน code ขั้นต่อไปจะสามารถทำได้ดีกว่า
โค้ดในส่วนของ commiccreator.kv
# File name: comiccreator.kv
#:kivy 1.7.0
<ComicCreator>:
AnchorLayout:
anchor_x: 'left'
anchor_y: 'top'
ToolBox:
id: _tool_box
size_hint: None,None
width: 100
AnchorLayout:
anchor_x: 'right'
anchor_y: 'top'
DrawingSpace:
size_hint: None,None
width: root.width - _tool_box.width
height: root.height - _general_options.height - _status_bar.height
AnchorLayout:
anchor_x: 'center'
anchor_y: 'bottom'
BoxLayout:
orientation: 'vertical'
GeneralOptions:
id: _general_options
size_hint: 1,None
height: 48
StatusBar:
id: _status_bar
size_hint: 1,None
height: 24
สิ่งที่แตกต่างจาก button ปกติก็คือ มันจะคลิกใช้ไปเรื่อยๆจนกว่าเราจะกดคลิกที่ตัวมันอีกที ตัวอย่าง
 |
| Toolbox area with an active ToggleButton |
โค้ดในส่วนของ toolbox.kv
# File name: toolbox.kv
#:kivy 1.7.0
<ToolButton@ToggleButton>:
size_hint: None,None
size: 48,48
group: 'tool' #คำสั่งรวมกลุ่ม button
<ToolBox@GridLayout>:
cols: 2
padding: 2
ToolButton:
text: 'O'
ToolButton:
text: '/'
ToolButton:
text: '?'
โค้ดในส่วนของ generaloptions.kv
# File name: generaloptions.kv
#:kivy 1.7.0
<GeneralOptions@BoxLayout>:
orientation: 'horizontal'
padding: 2
Button:
text: 'Clear'
Button:
text: 'Remove'
ToggleButton:
text: 'Group'
Button:
text: 'Color'
ToggleButton:
text: 'Gestures'
ตรงส่วนนี้เราไม่ต้องการให้ button อยู่ใน group เดียวกัน เนื่องจาก button แต่ละอันไม่ได้มีการทำงานที่เกี่ยวข้องกัน ในโค้ดนี้จะยังไม่มีการทำงานใดๆเมื่อกดปุ่ม เป็นเพียงแค่ส่วนของ interface เท่านั้น
 |
| General Option area |
# File name: statusbar.kv
#:kivy 1.7.0
<StatusBar@BoxLayout>:
orientation: 'horizontal'
Label:
text: 'Total Figures: ?'
Label:
text: "Kivy started"
ผลที่ได้จากการใช้ BoxLayout ก็คือตรงส่วนที่เป็น buttons จะเป็น labels แทน
 |
| Status Bar area |
โค้ดในส่วนของ drawingspace.kv
# File name: drawingspace.kv
#:kivy 1.7.0
<DrawingSpace@RelativeLayout>:
Label:
markup: True
text: "[size=32px][color=#3e6643]The[/color] [sub]Comic[/sub] [i][b]Creator[/b][/i][/size]"
DrawingSpace เป็น subclass ของ RelativeLayout แนะนำให้ใช้ Kivy markup ซึ่งเป็น feature ในการออกแบบ Label class การทำงานของมันจะคล้ายๆกับ XML based languages
เมื่อทำการรันไฟล์ commiccreator.py จะได้หน้าตา GUI ออกมาเป็นแบบนี้ ซึ่งนี่เป็นเพียง GUI เท่านั้น ยังไม่มีการทำงานใดๆ
อ้างอิงข้อมูลและรูปภาพจากหนังสือ Kivy : Interactive Applications in Python
ไม่มีความคิดเห็น:
แสดงความคิดเห็น