Python Kivy入門：BoxLayoutウィジェットでボタンの配置と色を自在にカスタマイズする方法

Kivyは、マルチタッチアプリなど革新的なユーザーインターフェースを備えたアプリケーションを迅速に開発するために設計された、オープンソースのPythonライブラリです。Androidアプリはもちろん、WindowsやmacOSなどのデスクトップアプリケーション開発にも幅広く活用されています。

本記事では、BoxLayoutウィジェットを使用して、異なる向き（orientation）や色を持つ複数のボタンを配置する方法を、具体的なサンプルコードとともに解説します。

BoxLayoutの基本的な考え方

以下のコードでは、まず縦方向（vertical）の外側のボックス（outerBox）を作成します。次に、横方向（horizontal）の1行目（Row1）を定義し、その下に縦方向で積み重なる2行目・3行目に相当する領域（Row_2_3）を作成します。これらすべての行を外側のボックスに格納し、途中で作成した各ボタンウィジェットには、それぞれ異なるテキストと背景色を設定していきます。

サンプルコード

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

# メインのKivyクラス
class BoxLayoutApp(App):

    def build(self):
        # 外側の縦方向ボックス
        outerBox = BoxLayout(orientation='vertical')

        # 横並びのウィジェット用のレイアウト
        Row1 = BoxLayout(orientation='horizontal')

        # 1行目に配置するボタンを作成
        btn1 = Button(text="One",
            background_normal='',
            background_color=(1, 0, 1, 1),
            font_size=25,
            size_hint=(0.7, 1))
        btn2 = Button(text="Two",
            background_normal='',
            background_color=(1, 1, 0, 0.8),
            font_size=25,
            size_hint=(0.7, 1))

        # ボタンを1行目に追加
        Row1.add_widget(btn1)
        Row1.add_widget(btn2)

        # 2行目・3行目用のボタン
        Row_2_3 = BoxLayout(orientation='vertical')

        btn3 = Button(text="Three",
            background_normal='',
            background_color=(1,0,0,0.75),
            font_size=25,
            size_hint=(1, 10))
        btn4 = Button(text="Four",
            background_normal='',
            background_color=(0,1,0,0.75),
            font_size=25,
            size_hint=(1, 15))

        # ボタンを2行目・3行目に追加
        Row_2_3.add_widget(btn3)
        Row_2_3.add_widget(btn4)

        # すべてのウィジェットを外側のボックスに追加
        outerBox.add_widget(Row1)
        outerBox.add_widget(Row_2_3)
        return outerBox

# BoxLayoutApp()クラスのルートオブジェクトを作成して実行
main_layout = BoxLayoutApp()
main_layout.run()

実行結果

上記のコードを実行すると、次のような画面が表示されます。

コードのポイント解説

orientationプロパティ

BoxLayoutの最も重要な設定がorientationです。'vertical'を指定すると子ウィジェットが上から下へ縦に並び、'horizontal'を指定すると左から右へ横に並びます。この性質を組み合わせることで、ネストしたレイアウトでも柔軟なUI構成が可能になります。

size_hintによる相対サイズ指定

size_hintは、親レイアウトに対する子ウィジェットのサイズ比率を指定するプロパティです。例えばsize_hint=(0.7, 1)は、横幅を親の70%にすることを意味します。絶対座標ではなく比率で指定できるため、ウィンドウサイズが変わってもレイアウトが崩れにくいのが特徴です。

background_colorでのRGBA指定

ボタンの背景色はbackground_colorでRGBA形式（赤・緑・青・透明度）のタプルとして指定します。各値は0〜1の範囲で設定され、例えば(1, 0, 1, 1)は不透明なマゼンタ、(1, 1, 0, 0.8)は少し透けた黄色になります。なお、デフォルトのテクスチャ画像が色変更を妨げる場合があるため、background_normal=''を設定して空のテクスチャに置き換えている点にも注目してください。