GridLayoutの使い方: Kivyのレイアウト4【kv言語】

GridLayoutは格子状にウィジェットを並べるKivyのレイアウトの1つです。BoxLayoutと同様にKivyによって自動整列されます。この記事ではGridLayoutの使い方とウィジェットを並べる方向の設定やウィジェットサイズを強制する方法を説明します。

Contents

GridLayoutの使い方
GridLayoutのサンプルコード

GridLayoutの使い方

GridLayoutは行と列を設定し、格子状にウィジェットを配置するレイアウトです。BoxLayoutと同様にKivyによって自動整列されます。セルを結合することはできません。

列と行の数を設定する

colsで列の数を指定し、rowsで行の数を指定します。この記述は省略できません。

<RootWidget>:
    cols: 2
    rows: 2

通常、colsかrowsのどちらかを定義すれば問題ありません。この記述を書かない場合、画面左下に重なって表示されます。

ウィジェットを並べる方向を設定する

ウィジェットの方向を設定するにはorientationプロパティで[ lr-tb , tb-lr , rl-tb , tb-rl , lr-bt , bt-lr , rl-bt , bt-rl ]を指定します。デフォルトはlr-tbです。「l」がleft、「r」がright、「t」がtop、「b」がbottomを意味します。

lr-tb : Left to Right – Top to Bottom (デフォルト)
tb-lr : Top to Bottom – Left to Right
rl-tb : Right to Left – Top to Bottom
tb-rl : Top to Bottom – Right to Left
lr-bt : Left to Right – Bottom to Top
bt-lr : Bottom to Top – Left to Right
rl-bt : Right to Left – Bottom to Top
bt-rl : Bottom to Top – Right to Left

<RootWidget>:
    orientation: 'lr-tb'

レイアウトの内側の余白とウィジェット間のスペースを設定する

レイアウトの内側の余白を設定するには、paddingを定義します。

<RootWidget>:
    padding: 20

ウィジェット間にスペースを設定するにはspacingを定義します。

<RootWidget>:
    spacing: 10

paddingとspacingについては下記の記事で書いてるので合わせてご覧ください。

ウィジェットサイズを設定する

ウィジェットのサイズを設定するにはsize_hintかsizeプロパティを定義します。他のレイアウトと違って、GridLayoutの場合は、行または列にあるウィジェット全てに同じ設定をしないと有効にならないので注意してください。例えば１行目のウィジェットサイズを変更する場合、１～5のウィジェットにsize_hintまたはsizeを定義します。１列目のウィジェットサイズを変更する場合は、1，6，11のウィジェットにsize_hintまたはsizeを定義します。

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15

size_hintまたはsizeプロパティについては下記の記事で解説しています。

ウィジェットのサイズを変更する方法は、次に説明するウィジェットサイズを強制する方法もあります。

ウィジェットサイズを強制する

*_force_defaultまたは*_default_heightを一緒に使うことでウィジェットのサイズを強制することができます。これを使用した場合、size_hintやsizeは定義されていても無効になります。

セルサイズを強制する

col_force_defaultまたはcol_default_widthを使用して、行または列のセルをデフォルトのサイズにすることができます。強制するかをTrueまたはFalseで指定します。デフォルトはFalseです。

col_force_default : 列のセルをデフォルトサイズに強制する
row_force_default : 行のセルをデフォルトサイズに強制する

これは次に説明するrow_default_heightまたはcol_default_widthと一緒に使わないと効果がありません。

行と列のデフォルト値を変更する

行と列のデフォルト値を変更することで、セルのサイズを変更します。その結果、セルのサイズに合わせてウィジェットサイズが変わります。*_force_defaultによってsize_hintなどが使えないので、ウィジェットのサイズはデフォルトになります。デフォルトは１でセルサイズに合わせられるので、その結果ウィジェットサイズも変わるといった形です。

行と列のデフォルト値を変更するには、row_default_heightまたはcol_default_widthを定義します。デフォルト値は０です。

col_default_width : 行のセルのデフォルト値を変更する
row_default_height : 列のセルのデフォルト値を変更する

<RootWidget>:
    row_force_default: True
    col_force_default: True

    row_default_height: 100
    col_default_width: 380

GridLayoutのサンプルコード

この記事で説明したGridLayoutのプロパティの書き方を示したコード例を紹介します。自由に設定を変えて試してみてください。

gridlayout1.py

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class RootWidget(GridLayout):
    pass

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

if __name__ == "__main__":
    GridLayout1().run()

gridlayout1.kv

<RootWidget>:
    canvas.before:
        Color:
            rgba: 222/255, 228/255, 215/255, 1
        Rectangle:
            size: self.size
            pos: self.pos
    
    #cols: 2
    rows: 2

    orientation: 'lr-tb' # Left to Right - Top to Bottom (default)
    #orientation: 'tb-lr' # Top to Bottom - Left to Right
    #orientation: 'rl-tb' # Right to Left - Top to Bottom
    #orientation: 'tb-rl' # Top to Bottom - Right to Left
    #orientation: 'lr-bt' # Left to Right - Bottom to Top
    #orientation: 'bt-lr' # Bottom to Top - Left to Right
    #orientation: 'rl-bt' # Right to Left - Bottom to Top
    #orientation: 'bt-rl' # Bottom to Top - Right to Left

    spacing: 10
    padding: 20

    #row_force_default: True
    #col_force_default: True

    #row_default_height: 100
    #col_default_width: 200


    Button:
        text: 'Button 1'
        background_color: 153/255, 102/255, 111/255, 0.7
        size_hint: 0.3, 0.1
    Button:
        text: 'Button 2'
        size_hint: 0.3, 0.1
    Button:
        text: 'Button 3'
        background_color: 153/255, 102/255, 111/255, 0.7
        size_hint: 0.3, 0.1
    Button:
        text: 'Button 4'
    Button:
        text: 'Button 5'
        background_color: 153/255, 102/255, 111/255, 0.7

    GridLayout:
        rows:3
        Button:
            text: 'Button 6'
        Button:
            text: 'Button 7'
            background_color: 153/255, 102/255, 111/255, 0.7
        Button:
            text: 'Button 8'

背景色の設定は下記の記事で説明しています。