KivyのFloatLayoutとは？Pythonでボタンを絶対位置・相対位置に配置する方法

KivyのFloatLayout（フロートレイアウト）とは？

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

本記事では、FloatLayoutウィジェットを使って、ウィンドウ内のさまざまな位置にボタンを配置する方法を解説します。ボタンの位置指定には「絶対位置」と「相対位置」の2つのアプローチがあり、それぞれ挙動が異なる点に注目してください。

絶対位置（pos）でボタンを配置する方法

この方法では、posプロパティを使ってボタンの位置をピクセル単位の固定座標で指定します。ウィンドウのサイズを変更してもボタンの位置は変わりません。そのため、ウィンドウを縮小していくと、状況によってはボタンが画面の外に出てしまい、見えなくなることがあります。

サンプルコード

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
#from kivy.config import Config

#Config.set('graphics', 'resizable', True)

# Appクラスを作成
class FloatApp(App):

    def build(self):
        # FloatLayoutを生成
        Flt = FloatLayout()

        btn = Button(text='Hello world',
            size_hint=(0.5 ,0.2),
            pos=(100, 200),
            background_normal='',
            background_color=(1, 0, 1, 1))

        # ボタンウィジェットを追加
        Flt.add_widget(btn)

        return Flt

# アプリを実行
FloatApp().run()

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

相対位置（pos_hint）でボタンを配置する方法

こちらの方法では、pos_hintを使ってボタンの位置を指定します。ウィンドウのサイズが変更されると、ボタンのサイズだけでなく、位置もウィンドウの相対的な大きさに応じて自動的に再計算されます。そのため、ウィンドウをどれだけ縮小してもボタンが画面から隠れることはありません。

サンプルコード

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.config import Config

Config.set('graphics', 'resizable', True)

# Appクラスを作成
class FloatApp(App):

    def build(self):
        # FloatLayoutを生成
        Flt = FloatLayout()

        btn = Button(text='Hello world',
            size_hint=(0.2 ,0.2),
            pos_hint={'x':.2, 'y':.2 },
            background_normal='',
            background_color=(1, 1, 0, 0.8)
            )

        # ボタンウィジェットを追加
        Flt.add_widget(btn)

        return Flt

# アプリを実行
FloatApp().run()

実行結果

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

まとめ：絶対位置と相対位置の使い分け

レスポンシブなUIを目指すならpos_hint、特定の座標に正確に配置したいならposを使う、といった具合に、目的に応じて使い分けるのがおすすめです。