Layout คือรูปแบบในการจัดวาง widgets โดยแต่ละ layout ที่ทาง Kivy ได้จัดมาให้เรานั้นจะมีอยู่หลายแบบด้วยกันโดยแต่ละแบบนั้นจะมีลักษณะการจัดวางที่ต่างกันออกไปโดยในที่นี้มีอยู่ 7 แบบเริ่มที่
1.FloatLayout
Floatlayout โดย layout แบบนี้นั้นจะใช้แบบหน้าต่าง size ของจอแสดงผลการทำงานของโค้ดเรานั้นมีสเกลเริ่มต้นที่ 0 และสุดที่ 1 โดยจะให้เราสามารถเลือกตำแหน่งที่ต้องการจัดว่าตัว widgets ได้โดยใช้ตัวเลขทศนิยม(0.0-1)เพื่อเลือกตำแหน่งที่ใช้ในการจัดวาง widgets ของเรายกตัวอย่างโค้ดเช่น
โค้ดในไฟล์ .py
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
class FloatLayoutApp(App):
def build(self):
return FloatLayout()
FloatLayoutApp().run()
โค้ดในไฟล์ .kv
<Button>:
color: .8,.9,0,1
font_size: 32
size_hint: .4, .3
<FloatLayout>:
Button:
text: 'Hello'
pos_hint: {'x': 0, 'top':1}
Button:
text: 'world!'
pos_hint: {'right': 1, 'y':0}
โดยเราจะเห็นว่ามีคำสั่งเพิ่มเติมขึ้นมาคือ pos_hint กับ size_hint ซึ้งเป็นคำสั่งที่เราใว้ใช้กำหนดตำแหน่งของ widgets โดยมีการกำหนดเป็นสเกลแบบทศนิยมนั้นเอง
จากโค้ดด้านบนผลลัพท์ที่ได้
จะเห็นได้ว่าจากไฟล์ .kv นั้นเราได้ทำการกำหนดปุ่มแรกที่มีคำว่าHello นั้นไว้ที่จุด x=0 และ top = 1 ซึ่งก็คือค่าในแนวแกน x คือ0 คือชิดขอบด้านซ้ายและ top คือแถบบนของตัวปุ่มในแนวแกน y จะชิดกันกับขอบบนสุดของหน้าต่างซึ่งอีกปุ่มนึงก็ทำในหลักการเดียวกันเลยไปอยู่ชนกับขอบล่างสุดขวาสุดของหน้าต่างซึ่งถ้าเราลองเปลี่ยนค่าในแนวแกน y ที่ไฟล์ .kv เป็น 0.5 ตัวbutton hello ก็จะถูกเลื่อนลงมาและตัว button world! ก็จะถูกเลื่อนขึ้นไปแทน
2.Relative Layout
ในส่วนของ layout นี้ก็ยังใช้หลักการเดียวกันกับ floatlayout เพียงแต่ว่าค่า 0-1 นั้นจะสัมพันธ์กับ size ของตัว layout เองไม่ได้สัมพันธ์กับค่าจอแสดงผล(window size)เหมือนอย่าง floatlayout
3.Grid Layout
จะใช้คอลั่มกับแถวเข้ามาช่วยโดยจะมีคำสั่ง col: กับ row: เพิ่มขึ้นมา
4.Box Layout
ค่าที่ใช้กำหนดในlayout นี้นั้นจะเป็นค่าที่ขึ้นอยู่กับในแนวตั้งและแนวยาว
5.Stack Layout
layout นี้มีความคล้ายคลึงกับ Box layout แต่ว่าถ้าหมดแถวนึงหรือคอลั่มนึงแล้วจะทำการขึ้นแถวหรือคอลั่มนั้นใหม่โดยที่ layout นี้มีความยืดหยุ่นในการใช้งานมากกว่า box layout โดยจะมีตัวกำหนดค่ามาช่วยให้ใช้งานได้ง่ายขึ้นคือlr(left to right),rl(right to left),tb(top to bottom),bt(bottom to top)
6.Anchor Layout
มีความสามารถในการจัดการ widgets ให้อยู่ในกรอบหรืออยู่ตรงกลางได้โดย anchor_x_property แสดงถึงตำแหน่งในแกน x และ anchor_y_property แสดงถึงพิกัดในแกน y
7.Scatter Layout
การใช้งานคล้ายคลึงกับ Relative layout แต่ว่ามีลุกเล่นเยอะกว่าตรงการใช้ multitouch ได้หรือแม้แต่กลับด้าน แปลภาษา ก็ยังสามารถทำได้ซึ่งในหนังสือไม่ได้เจาะรายละเอียดมาให้
Embeding layouts
คือการฝังตัวของ layouts โดยจะให้โค้ดตัวอย่างที่ใช้ทดสอบมาคือ
โค้ดในไฟล์ .py
from kivy.app import App
from kivy.uix.gridlayout import GridLayout
class MyGridLayout(GridLayout):
pass
class LayoutsApp(App):
def build(self):
return MyGridLayout()
LayoutsApp().run()
จะเห็นได้ว่าโค้ดด้านบนนั้นไม่ได้มีอะไรแตกต่างจากโค้ดก่อนๆเท่าไหร่เพียงแต่ว่าเราได้ทำการนำ Gridlayouts เข้ามาใช้งานเเพื่อช่วยแสดงผลตัวอย่าง layouts ทั้งหมดนั้นเองโดยจะแบ่งได้เป็นส่วนๆ 5ส่วนย่อยโดยจะประกอบด้วย
โค้ดในไฟล์ .kv
ส่วนที่:1
<MyGridLayout>:
rows: 2
FloatLayout:
Button:
text: 'F1'
size_hint: .3, .3
pos:0, 0
RelativeLayout:
Button:
text: 'R1'
size_hint: .3, .3
pos: 0,0
ส่วนที่:2
GridLayout:
cols: 2
spacing: 10
Button:
text: 'G1'
size_hint_x: None
width: 50
Button:
text: 'G2'
Button:
text: 'G3'
size_hint_x: None
width: 50
ส่วนที่:3
AnchorLayout:
anchor_x: 'right'
anchor_y: 'top'
Button:
text: 'A1'
size_hint:[.5, .5]
Button:
text: 'A2'
size_hint: [.2, .2]
ส่วนที่:4
BoxLayout:
orientation: 'horizontal'
Button:
text: 'B1'
Button:
text: 'B2'
size_hint: [2,.3]
pos_hint: {'y',.4}
Button:
text 'B3'
ส่วนที่:5
StackLayout:
orientation: 'rl-tb'
padding: 10
Button:
text: 'S1'
size_hint: [.6,.2]
Button:
text: 'S2'
size_hint: [.4,.4]
Button:
text: 'S3'
size_hint: [.3,.2]
Button:
text: 'S4'
size_hint: [.4,.3]
จากโค้ดจากด้านบนทั้งหมดจะได้ผลลัพธ์แสดงเป็นตัวอย่างของแต่ละ layouts ให้เราเห็นคือ
(ภาพจากหนังสือKivy-Interactive-Applications-in-Python)
จากผลลัพท์ที่เราได้นั้น(ยืมภาพมาจากหนังสือ)จะเห็นได้ว่าแต่ละรูปนั้นแสดงถึง layout แต่ละแบบว่ามีคุณสมบัติ ลักษณะอย่างไรบ้างซึ่งสามารถนำไปปรับใช้ได้ในต่อๆไป
Comic-Creator
เราได้รู้เกี่ยวกับคุณสมบัติที่จะใช้ในการสร้าง interface ไปทั้งหมดแล้วในส่วนนี้จะเกี่ยวกับการสร้างพื้นฐานคือการวาด stickman แล้วมี interface ไว้รับค่า sketch คือในรูปด้านล่างนี้
(ภาพจากหนังสือKivy-Interactive-Applications-in-Python)
โดนจากภาพ sketch เบื้องต้นด้านบนเราควรจะเลือก layouts ที่ใช้งานให้เหมาะสมเพื่อสะดวกในการจัดการโดยทางหนังสือที่อ่านแนะนำให้เลือกดังนี้
Anchor layouts ใช้กับกล่องเครื่องมือด้านบนซ้ายมือ
Grid layouts สำหรับคอลั่มเลือกฟังก์ชั่นด้านล่าง
Anchor layouts ใช้สำหรับช่องว่างข้างบนขวามือ
Relative layouts ใช้สำหรับจัดการตำแหน่งในช่องขวาบนเพื่อจัดตำแหน่ง stickman
Anchor layouts ใช้สำหรับการสร้างกล่องแสดงสถานะด้านล่างสุด
Box layouts ใช้สำหรับสร้างกล่องข้อความฟังก์ชั่นด้านล่างเพื่อให้เราสามารถกำหนดอัตราส่วน
โดยจากการร่างก่อนว่าจะทำอะไรด้านบนนั้นทางหนังสือก็มีตัวอย่างโค้ดมาให้ลองว่าจะได้ผลลัพท์หรือไม่
โค้ดจากไฟล์ .py
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()
ComicCreatorApp().run()
โค้ดจากไฟล์.kv
<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
โค้ดจากไฟล์ toolbox.kv
<ToolButton@ToggleButton>:
size_hint: None,None
size: 48,48
group: 'tool'
<ToolBox@GridLayout>:
cols:2
padding:2
ToolButton:
text: 'O'
toolButton:
text: '/'
ToolButton:
text: '?'
โค้ดจากไฟล์ drawingspace.kv
<DrawingSpace@RelativeLayout>:
Label:
markup: True
text: '[size=32px][color=#3e6643]The[/color] [sub]Comic[/sub]
[i][b]Creator[/b][/i][/size]'
โค้ดจากไฟล์ generaloptions.kv
<GenaralOptions@BoxLayout>:
oriention: 'horizontal'
padding: 2
Button:
text: 'Clear'
Button:
text: 'Remove'
Button:
text: 'Group'
Button:
text: 'Color'
Button:
text: 'Gestures'
โค้ดจากไฟล์ statusbar.kv
<StatusBar@BoxLayout>:
orientation: 'horizontal'
Label:
text: 'Total Figures: ?'
Label:
text: "Kivy started"
และจากโค้ดข้างบนทั้งหมดจะได้ผลลัพท์ออกมาดังรูปภาพด้านล่างนี้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น