[Kivy] BoxLayoutの設定

BoxLayoutについて

　KivyのBoxLayoutは子を載せるレイアウトクラスの一つであり、子を垂直もしくは水平に並べて配置します。BoxLayoutは、kvファイルに記入した順番に配置されるため完成した場合の配置をイメージしやすく、複数のBoxLayoutを使用することで柔軟にレイアウトを変更でる使い易いレイアウトです。

　今回は、BoxLayoutをKv languageで記入する方法とBoxLayoutの装飾関係について紹介します。

今回紹介する内容
　・ Kv languageでBoxLayoutを使用する。
　・ BoxLayoutに載せるWidget(子)を並べる方向を指定する。
　・ BoxLayoutの子同士の間隔を指定する
　・ BoxLayoutの子のまわりの隙間を指定する。
　・ BoxLayoutの背景色を指定する。

BoxLayoutの設定

Kv languageでBoxLayoutを使用する。

　Kv languageでBoxLayoutを定義する場合、まずBoxLayout:を記入してその下に以下のように、BoxLayoutのプロパティやイベントの設定と子（Widget）を記入します。

<BoxLayoutTestWidget>:
    BoxLayout:
        # BoxLayoutのプロパティやイベントを記入
        size: root.size
        orientation: 'vertical'
        spacing: 20
        padding: 20
        canvas.before:
            Color:
                rgba: 0.7, 0.7, 0.7, 1
            Rectangle:
                size: self.size
                pos: self.pos

　　　　# 子（Widget）を記入        
        Button:
            id: button1
            text: 'Button1'
            on_press: root.on_button_press(1)

BoxLayoutに載せるWidget(子)を並べる方向を指定する。

　BoxLayoutに載せる子の並び方向は、プロパティorientationによって指定します。orientationの値は、水平方向：’horizontal’と垂直方向：’vertical’であり、デフォルトは’horizontal’です。

<BoxLayoutTestWidget>:
    BoxLayout:
        size: root.size
        orientation: 'vertical'

BoxLayoutの子のまわりの隙間を指定する。

　BoxLayoutとBoxLayoutに載せたWidgetとの間隔(ピクセル単位)は、paddingにより指定します。paddingの指定には、以下の記入方法があります。
　　　①[ 左側の間隔, 上側の間隔, 右側の間隔, 下側の間隔 ]
　　　②[ 水平方向(左側、右側)の間隔, 垂直方向(上側、下側) ]
　　　③１つの値(左側、上側、右側、下側が同じ値)

    BoxLayout:
        size: root.size
        orientation: 'vertical'
        spacing: 20
        padding: 20

BoxLayoutの子同士の間隔を指定する

　BoxLayoutに載せたWidget同士の間隔(ピクセル単位)は、spacingで指定します

    BoxLayout:
        size: root.size
        orientation: 'vertical'
        spacing: 20
        padding: 20

BoxLayoutの背景色を指定する

　BoxLayoutの背景色は、kivy.graphics.Canvasのbeforeグループに対して、Colorで背景色(rgbaで指定する)、Rectangleで背景色の範囲（位置posとサイズsize）を指定します。

    BoxLayout:
        # 省略
        canvas.before:
            Color:
                rgba: 0.7, 0.7, 0.7, 1
            Rectangle:
                size: self.size
                pos: self.pos

サンプルプログラムのその他の内容

Kvファイルを指定する（load_fileの使用）

　Kvファイルの指定には、①Kvファイル名をAppクラスの名前の一部（例：MyAppならばKvファイル名はmy.kv）にしておく方法（KvファイルとPythonファイルとを同じフォルダに保存しておく必要がある）と、②kivy.lang.builder.BuilderBaseのload_fileを使用してkvファイルを指定する方法があります。

　②の方法の場合、kvファイルを別のフォルダに保管することが可能でありファイルの整理が容易になります。

How to load KV

from kivy.lang import Builder

Builder.load_file(os.path.dirname(__file__) + "/interface.kv")

ウィンドウのサイズを指定する

　Kivyのウィンドウサイズは、kivy.config.Configのsetを使用してgraphicsのwidthとheightにより指定します。

from kivy.config import Config

Config.set('graphics', 'width', '450')
Config.set('graphics', 'height', '400')

　kivy.config.Configで使用できる設定の一覧が、以下のサイトにあります。
　Available configuration tokens

サンプルプログラム

　下記の２つのファイルを同じフォルダに保存して、プログラムを実行すると下図のような画面が表示されます。表示されるButtonはBoxLayout内に配置したものであり、BoxLayoutのプロパティにより、余白部分の色、余白の幅、ボタン同士の間隔が設定されています。

#:kivy 2.0


<BoxLayoutTestWidget>:
    BoxLayout:
        size: root.size
        orientation: 'vertical'
        spacing: 20
        padding: 20
        canvas.before:
            Color:
                rgba: 0.7, 0.7, 0.7, 1
            Rectangle:
                size: self.size
                pos: self.pos

        Button:
            id: button1
            text: 'Button1'
            on_press: root.on_button_press(1)

        Button:
            id: button2
            text: 'Button2'
            on_press: root.on_button_press(2)

        Button:
            id: button3
            text: 'Button3'
            on_press: root.on_button_press(3)

        Button:
            id: button4
            text: 'Button4'
            on_press: root.on_button_press(4)

# -*- coding: utf-8 -*-

import os
import kivy

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.config import Config

kivy.require('2.2.0')

# 画面サイズの指定
Config.set('graphics', 'width', '450')
Config.set('graphics', 'height', '400')

# kvファイルの指定
Builder.load_file(os.path.dirname(__file__) + "/interface.kv")


class BoxLayoutTestWidget(Widget):

    def __init__(self, **kwargs):
        super(BoxLayoutTestWidget, self).__init__(**kwargs)

    def on_button_press(self, num):
        print(f'Button{num} is clicked')


class BoxLayoutTestApp(App):
    def __init__(self, **kwargs):
        super(BoxLayoutTestApp, self).__init__(**kwargs)
        self.title = 'BoxLayout Test'

    def build(self):
        return BoxLayoutTestWidget()


if __name__ == '__main__':
    app = BoxLayoutTestApp()
    app.run()