Python + Kivy GUI アプリ開発 #007 Layout

Pythonのフレームワーク Kivy を利用したWidgetのレイアウトついてまとめる。

プログラムの構成

1. Pythonコード
2. Kivyコード

---

1. Python: main_layout_s.py

main_lebel_s.py などと同じで良い。

---

---

2. Kivy: gui_layout_s.py

BoxLayout(左右/上下に画面を分割)

#: kivy 2.1.0

#: import get_color_from_hex kivy.utils.get_color_from_hex


<MainScreen>:
    BoxLayout:
        # orientation: "horizontal"
        # orientation: "vertical"

        Label:
            text: "label1"
        Button:
            text: "button2"

        Label:
            text: "label3"
        Button:
            text: "button4"

GridLayout(画面を格子状に分割)

#: kivy 2.1.0

#: import get_color_from_hex kivy.utils.get_color_from_hex


<MainScreen>:
    GridLayout:
        cols: 2
        rows: 2

        Label:
            text: "label1"
        Button:
            text: "button2"

        Label:
            text: "label3"
        Button:
            text: "button4"

ScrollView(画面にスクロール機能を追加)

#: kivy 2.1.0

#: import get_color_from_hex kivy.utils.get_color_from_hex


<MainScreen>:
    BoxLayout:
        orientation: "horizontal"
        # orientation: "vertical"

       
        Label:
            text: "label1"
        Button:
            text: "button2"

        Label:
            text: "label3"
        Button:
            text: "button4"

        
        ScrollView:
            BoxLayout:
                height: "1000px"
                size_hint: (None, None)
                orientation: "vertical"
                Button:
                    size_hint: (None, None)
                    height: "500px"
                    text: "button5"
                Button:
                    size_hint: (None, None)
                    height: "500px"
                    text: "button6"

AnchorLayout(位置を四隅などに固定)

#: kivy 2.1.0

#: import get_color_from_hex kivy.utils.get_color_from_hex

<MainScreen>:
    AnchorLayout:
        anchor_x: 'center' #"right", "left"
        anchar_y: 'center' #"top",    "bottom"
        size: ("420px", "30px")
        size_hint: (None, None)
        
        Button:
            text: "button1"
            size: ("420px", "30px")
            size_hint: (None, None)
        # Image:
        #     source: './elements/GUI_01_top.png'
        #     width: "520px"
        #     height:"490px"
        #     size_hint: (None, None)
        #     # allow_stretch: True
        #     # keep_ratio: False

https://kivy.org/doc/stable/api-kivy.uix.anchorlayout.html?highlight=anchorlayout