【初心者向け】KivyによるWindowsアプリ作成5 Kvファイルによる基本的なレイアウト作成

今回の記事では、前回作成したKvファイルを拡張することにより、Kivyでどのようにレイアウトを作成していくかについて紹介したいと思います。

レイアウト定義の方法は色々ありますが、今回は「BoxLayout」というWidgetを使用する方法について紹介します。

<スポンサーリンク>

BoxLayoutによる基本的なレイアウト作成例

イメージをつかんで頂くため、6つほど、プログラムを作成/実行して頂きたいと思います。

①ウインドウを横方向に分割するレイアウト

まずは前回作成したexpense.kvを以下のように書き換えて、実行してみて下さい。Atom-runnerを実行する際には、KvファイルではなくPythonファイルであるmain.py上で「Altキー + r」を押す必要があることに気を付けて下さい。

BoxLayout:
    Label:
        text: "test1"
    Label:
        text: "test2"

ウインドウが横方向に分割され、左右両方の領域にラベルが配置されました。

前述の通り、Kvファイルによるレイアウト作成方法はいくつかあるのですが、最も基本的な方法は「BoxLayout」というWidgetを使う方法です。

「BoxLayout」は、ウインドウを横方向または横方向に分割し、分割された領域内にLabelなどのWidgetを配置していくものです。デフォルトでは、ウインドウを横方向に分割します。

今回の場合、BoxLayoutにぶら下がっているLabel Widgetの個数分(=2つ)、ウインドウが横方向に分割されます。

②ウインドウを縦方向に分割するレイアウト

今度はウインドウを縦方向に分割してみましょう。

BoxLayoutの属性の1つに「orientation」を加え、値を「vertical」と設定します。

BoxLayout:
    orientation: "vertical" #追加
    Label:
        text: "test1"
    Label:
        text: "test2"

ご覧の通り、ウインドウが縦方向に分割されました。

分割の方向を指定するためには、BoxLayoutに「orientation」属性を加え、値に「vertical」(縦方向)または「horizontal」(横方向)を指定します。この属性を省略した場合、「horizontal」が自動的に指定されます。

また、ファイル中に「#追加」という箇所がありますが、Kvファイルでは「#」の後に文字列を入れることで、コンピュータには処理させない注釈を入れることができます。これを「コメント」と言い、処理の概要説明を入れたり、古いコードを消さずに残しておきたい時などに使います

③縦/横方向分割の組み合わせ

次に、縦方向のBoxLayoutと横方向のBoxLayoutを組み合わせて、少し複雑なレイアウトを作成してみましょう。

②のレイアウトでは、縦方向に2つのLabelを配置しましたが、この2つの間に、横方向にLabelを並べるBoxLayoutを挟みます。

BoxLayout:
    orientation: "vertical"
    Label:
        text: "test1"
    BoxLayout: #このブロックを追加
        Label:
            text: "test3-1"
        Label:
            text: "test3-2"
        Label:
            text: "test3-3"
    Label:
        text: "test2"

少し分かりづらいですが、中段に3つのLabelを横並びに持つBoxLayoutを追加することができました。

④Label領域への色付け

③ではBoxLayoutで区切られた領域の境目がよく分からないため、実際にどのように区切られているのかがイメージしづらい形になっていました。そこで、中央のBoxLayout内の各Label領域に、それぞれ異なる色を付けてみたいと思います。

BoxLayout:
    orientation: "vertical"
    Label:
        text: "test1"
    BoxLayout:
        Label:
            text: "test3-1"
            canvas.before: #このブロックを追加
                Color:
                    rgba: 1, 0, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: "test3-2"
            canvas.before: #このブロックを追加
                Color:
                    rgba: 0, 1, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: "test3-3"
            canvas.before: #このブロックを追加
                Color:
                    rgba: 0, 0, 1, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
    Label:
        text: "test2"

各Labelの下に、「canvas」から始まるブロックが追加されています。このcanvasとは、図形を描画するための描画板を表しており、この中に描画したい図形やその色などの描画命令を記載することによって図形を描画することができるようになります

test03-1~test03-3まで構造は同じですので、test03-1を例に構造の説明します。

まず「Color」で描画したい図形の色を指定します。形式は「rgba: 赤, 緑, 青, 透明度」という形で、それぞれ0~1の値を記入します。

次に、描画したい図形の形を指定します。今回の例ではRectangle(長方形)を指定しています。指定する属性ですが、posで図形を描画する位置(図形左下の座標)を、sizeで大きさを指定します。

さらに、今回の例では、それぞれの属性に対する値にself.posとself.sizeが指定されています。この「self」というのは、「その属性が設定されているWidgetそのもの」という意味です。

今回このWidgetは、test03-1が設定されているLabelが該当しますので、self.posとself.sizeはそれぞれ、このLabel Widgetの位置と大きさそのものを指しています。つまり、今回追加したRectangleは、Label Widgetにぴったり重なる長方形を表しています。

最後に、canvasの後に続いている「before」ですが、これは、順序的に大本のWidget(今回はLabel)を描画する前に図形を描画するための指定、言い換えると、Widgetの背面に図形を描画するための指定です。逆に、前面に図形を描画したいときには「after」を指定します。

言葉ではイメージしづらいところもあると思いますので、次の例も参考にして下さい。

⑤属性の微修正

これまで説明した属性ついて理解を深めて頂くため、④のファイルを少し修正してプログラムを実行してみましょう。

BoxLayout:
    orientation: "vertical"
    Label:
        text: "test1"
    BoxLayout:
        Label:
            text: "test3-1"
            color: 0, 0, 0, 1 #フォントカラー追加
            canvas.before:
                Color:
                    rgba: 1, 0, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: "test3-2"
            canvas.before:
                Color:
                    rgba: 0, 1, 0, 0 #透明度を1→0へ
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: "test3-3"
            canvas.after: #beforeをafterへ
                Color:
                    rgba: 0, 0, 1, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
    Label:
        text: "test2"

中央の3つのラベルに対して、それぞれ1か所ずつ修正を加えてみました。1つずつ、順に説明します。

まず、test03-1については、Labelの属性にcolorを追加することにより、フォントカラーを指定しています。指定方法は、④で使ったcolorと全く同じ形式です。

次にtest03-2ですが、透明度を1から0にすることにより、Rectangleが完全に透明になり、Labelだけが見えるようになっています。

最後にtest03-3ですが、こちらはcanvas.beforeをcanvas.afterにすることにより、前面にRectangleが表示されることになります。これにより、LabelのtextがRectangleに覆い隠され、見えなくなっています。

⑥Widgetサイズの変更

最後の例として、中央のLabel3つのサイズを変更してみましょう。

BoxLayout:
    orientation: "vertical"
    Label:
        text: "test1"
    BoxLayout:
        Label:
            text: "test3-1"
            color: 0, 0, 0, 1
            size_hint_x: 0.1 #追加
            canvas.before:
                Color:
                    rgba: 1, 0, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: "test3-2"
            size_hint_x: 0.6 #追加
            canvas.before:
                Color:
                    rgba: 0, 1, 0, 0
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: "test3-3"
            size_hint_x: 0.3 #追加
            canvas.after:
                Color:
                    rgba: 0, 0, 1, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
    Label:
        text: "test2"

中央のLabel3つに対して、「size_hint_x」という属性が追加されています。size_hint_xとは、この属性が設定されたWidget間で、x方向(横方向)のサイズ比を指定するものです

今回の場合、test3-1には0.1、test3-2には0.6、test3-3には0.3を指定していますので、それぞれの横のサイズ比が0.1 : 0.6 : 0.3になるように、サイズが調整されています。

なお、今回はすべて足すと1になるようにきれいな値を指定していますが、必ずしもそうする必要はなく、例えば2 : 3 : 1のように任意の値を指定しても、それに基づきサイズ調整が行われます。

終わりに

少し長くなってしまいましたが、今回はBoxLayoutを使ったレイアウト作成の基本について説明しました。

今回の内容を踏まえ、次回よりログイン画面のレイアウト作成を行っていきたいと思います。

<スポンサーリンク>

シェアする

フォローする