レイアウト

Kivy では、ウィジェットツリーを構築することによってGUIを構成することを、前回の記事で述べました。最小単位の部品としてのウィジェットには、

Label (文字列の表示)
Button (「押す」操作を受け付けるためのボタン)
CheckBox (チェックボックス, ラジオボタンとしての使用も可能)
Slider (スライド操作による数値入力が可能)
TextInput (文字列入力)

などがあります。詳しくは公式サイトのドキュメンテーション Widgets — Kivy 1.10.1.dev0 documentation などをご覧ください。

本稿では、このウィジェットを画面に配置するためのレイアウトについて述べます。

詳しくは触れませんが、Kivyでは日本語を表示することはできるものの (フォントの指定が必要です)、入力することは現状では難しいようです。それでも何とかして入力できるようにすることは可能なようですが、Windowsの例はこのページなどでご覧ください。

複数のウィジェットを規則的に配置するには、レイアウトを使います。
以下の例は、3つのボタン x1, x2, x3 を縦に並べるコードです。

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

class layoutApp(App):
    def build(self):
        x1 = Button(text='x1')
        x2 = Button(text='x2', color=(1,0,0,1))
        x3 = Button(text='x3', font_size=32)
        box = BoxLayout(orientation='vertical')
        box.add_widget(x1)
        box.add_widget(x2)
        box.add_widget(x3)
        return box

layoutApp().run()

f:id:tediousdays:20180506074745p:plain

ボタンの文字の色やフォントサイズを設定できることも合わせて確認してください。

このコードにおけるレイアウトとは、BoxLayoutオブジェクトである box です。BoxLayoutはウィジェットを縦もしくは横一列に並べるためのレイアウトです。上記では縦に並べる (orientation='vertical') 設定となっていますが、

        box = BoxLayout(orientation='horizontal')

とすれば横に並べることができます。

この box に、

        box.add_widget(x1)

のようにすることで、x1 を box の子とすることができます。

したがって box は x1,x2, x3 の3つの子を持ち、ルートウィジェットとして return されていることになります。

なおレイアウトには

GridLayout (格子状にウィジェットを配置)
FloatLayout (自由にウィジェットを配置)
StackLayout (スタック状にウィジェットを配置)

などがあります。詳細は公式サイトのドキュメンテーション Layout — Kivy 1.10.1.dev0 documentation をご覧ください。

また、あるレイアウトを別のレイアウトの子にすることで (入れ子にする)、複雑な配置を実現することもできます。

しかしレイアウトだけではもの足りません。これでは単一画面のアプリしか作れないからです。次回の記事では、複数画面を保持し、切り替えるためのスクリーンマネージャを紹介します。*1

*1:ただしレイアウトだけでも複数画面のアプリをつくろうと思えば作れます。面倒くさいですが。