Kivyのボックスレイアウトの使い方とその仕様

2020年1月20日

みなさまおはこんばんにちは、せなです

今回はKivyのボックスレイアウトの基本的な使い方から、どのようにパーツ分けされているのかを説明したいと思います

環境

Python：3.7
Kivy：1.11.1

BoxLayoutの基本構文

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


class RootWidget(BoxLayout):
    pass


class TestBoxLayoutApp(App):
    def build(self):
        return RootWidget()


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

<RootWidget>
    canvas:
        Color:
            rgba: 1,0,0,1
        Rectangle:
            size: self.size
            pos: self.pos

実行すると以下のようになります

RootWidgetクラスがBoxLayoutを継承しているので、KvLanguageではBoxLayoutを使用していません

BoxLayoutを分割してみる

BoxLayoutはデフォルトでは親のボックスに対して横にボックスを配置していく（水平）、レイアウトです

以下は分かりやすく色分けしています

<RootWidget>
    orientation: 'vertical'
    BoxLayout:
        BoxLayout:
            canvas:
                Color:
                    rgba: 1,0,0,1
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'RED'
        BoxLayout:
            canvas:
                Color:
                    rgba: 0,1,0,1
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'GREEN'
    BoxLayout:
        BoxLayout:
            canvas:
                Color:
                    rgba: 0,0,1,1
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'BLUE'
        BoxLayout:
            canvas:
                Color:
                    rgba: 1,0,1,1
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'PURPLE'

実行すると以下のように分けられていることがわかります

「RED」と「GREEN」が一つ目のBoxLayout内に設置され、「BLUE」と「PURPLE」は二つ目のBoxLayout内へ設置されています

レイアウトでよく使用するキーワード引数

レイアウトの方向を変更

レイアウトはデフォルトでは「orientation」に「horizontal」が設定されているので、横にボックスが追加されていきます
ボックスを縦に設定したい場合は、「vertical」を設定します

設定するときには必ずBoxLayoutの一番上に記述してください

BoxLayout:
    orientation: 'vertical'

サイズを変更

サイズの調整には、「size_hint」を使用します
size_hintは「0.00~1」の間でパーセンテージで設定します

BoxLayout:
    size_hint: 0.8, 0.8

size_hintが設定されていない時には、デフォルトでNoneが設定されています

配置を変更

配置場所を指定したい時には、「pos_hint」を使用します

BoxLayout:
    pos_hint: {'x': 0.5, 'y': 0.5}

pos_hintが設定されていない時には、デフォルトでNoneが設定されています