Hal yang dipelajari:

• Cara membuat BoxLayout

Peralatan:

• Laptop/PC
• Bahasa Pemrograman Python
• Kivy Python Library

Tutorial Konten

Di tutorial kali ini kita akan membuat lima sample BoxLayout. BoxLayout digunakan untuk mengatur komponen baik secara vertikal maupun horizontal.

File yang akan dieksekusi disini adalah file yang berformat .py

Kurikulum:

1. https://steemit.com/aceh/@alucard14/cara-membuat-aplikasi-android-python-and-kivy-1-or-install-program-python-and-kivy

2. https://steemit.com/indonesia/@alucard14/cara-membuat-aplikasi-android-python-and-kivy-2-or-membuat-tombol-sederhana

BoxLayout 1

Nama file:

boxLayout1.py

# boxLayout1.py

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.app import App


Builder.load_file('boxLayout_1.kv')

class MyBox(BoxLayout):
    pass

class boxLayoutApp(App):
    def build(self):
        return MyBox()


if __name__ == '__main__':
    boxLayoutApp().run()

Nama file:

boxLayout_1.kv

# boxLayout_1.kv

<MyBox>:
    orientation: 'horizontal'
    Button:
        text: 'Hai'
        on_press: print('--> Hai')

    Button:
        text: 'Steemit'
        on_press: print('--> Steemit')

    Button:
        text: 'Indonesia'
        on_press: print('--> Indonesia')

Output1

BoxLayout 2

Nama file:

boxLayout2.py

# boxLayout2.py

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.app import App


Builder.load_file('boxLayout_2.kv')

class MyBox(BoxLayout):
    pass

class boxLayoutApp(App):
    def build(self):
        return MyBox()


if __name__ == '__main__':
    boxLayoutApp().run()

Nama File:

boxLayout_2.kv

# boxLayout_2.kv (spasi)

<MyBox>:
    orientation: 'horizontal'
    spacing: 100
    Button:
        text: 'Hai'
        on_press: print('--> Hain')

    Button:
        text: 'Steemit'
        on_press: print('--> Steemit')

    Button:
        text: 'Indonesia'
        on_press: print('--> Indonesia')

Output2

BoxLayout 3

Nama file:

boxLayout3.py

# boxLayout3.py

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.app import App


Builder.load_file('boxLayout_3.kv')

class MyBox(BoxLayout):
    pass

class boxLayoutApp(App):
    def build(self):
        return MyBox()


if __name__ == '__main__':
    boxLayoutApp().run()

Nama file:

boxLayout_3.kv

# boxLayout_3.kv (spasi, lapisan)

<MyBox>:
    orientation: 'horizontal'
    spacing: 10
    padding: [10,30,70,90]

    Button:
        text: 'Hai'
        on_press: print('--> Hai')

    Button:
        text: 'Steemit'
        on_press: print('--> Steemit')

    Button:
        text: 'Indonesia'
        on_press: print('--> Indonesia')

Output3

BoxLayout 4

Nama file:

boxLayout4.py

# boxLayout4.py

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.app import App


Builder.load_file('boxLayout_4.kv')

class MyBox(BoxLayout):
    pass

class boxLayoutApp(App):
    def build(self):
        return MyBox()


if __name__ == '__main__':
    boxLayoutApp().run()

Nama file:

boxLayout_4.kv

# boxLayout_4.kv
# pos_hint, size_hint

<MyBox>:
    orientation: 'horizontal'
    Button:
        text: 'Hai'
        on_press: print('--> Hai')
        pos_hint: {'y' : .3}
        size_hint: [.3,.0]

    Button:
        text: 'Steemit'
        on_press: print('--> Steemit')
        pos_hint: {'center_y' : .5}
        size_hint: [.0,.0]

    Button:
        text: 'Indonesia'
        on_press: print('--> Indonesia')
        pos_hint: {'left' : 5}
        size_hint: [.4,.0]

Output4

BoxLayout 5

Nama file:

boxLayout5.py

# boxLayout5.py

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.app import App


Builder.load_file('boxLayout_5.kv')

class MyBox(BoxLayout):
    pass

class boxLayoutApp(App):
    def build(self):
        return MyBox()


if __name__ == '__main__':
    boxLayoutApp().run()

Nama file:

boxLayout_5.kv

# boxLayout_5.kv (spacing,padding)
# pos_hint, size_hint

<MyBox>:
    orientation: 'horizontal'
    spacing: 100
    padding: [40,40,30,30]
    Button:
        text: 'Hai'
        on_press: print('--> Hai')
        pos_hint: {'y' : .0}
        size_hint: [.0,1]

    Button:
        text: 'Steemit'
        on_press: print('--> Steemit')
        pos_hint: {'center_y' : .2}
        size_hint: [.0,2]

    Button:
        text: 'Indonesia'
        on_press: print('--> Indonesia')
        pos_hint: {'right' : .0}
        size_hint: [.0,1]

Output5