【初心者向け】KivyによるWindowsアプリ作成6 画面設計とKvファイルによる画面アウトラインの作成

今回は、前回紹介したBoxLayoutを使って、題材としている経費申請アプリの、ログイン画面アウトラインを作成します。

最終的に実装したい画面は下図の通りですが、今回はアウトラインの設計と作成のみ行い、ボタンや入力欄などのWidgetの設置や日本語化については次回以降に回したいと思います。

<スポンサーリンク>

画面設計

さて、このぐらいシンプルな画面であれば、いきなり実装に入ってもよいかもしれませんが、後に紹介する、Kvファイルの構成に対する理解を深めて頂くためにも、簡単に画面設計を行いたいと思います。

設計においては、画面に設置するWidgetを洗い出すことに加え、BoxLayoutを用いてレイアウトを作成するため、画面をどのような比で分割するかという観点を重視しました

なお、記載されているTextInputとは入力欄用のWidget、Buttonとは文字通りボタン用のWidgetですが、詳細は次回説明したいと思います。

画面アウトラインの実装

では、前述の設計に基づき、画面のアウトラインを実装していきましょう。

なお、TextInputやButtonについて、今回はこれらの代わりにLabelを設置しておきたいと思います。

まずは、expense.kvを以下のように書き換えて下さい。

BoxLayout:
    orientation: "vertical"

    Label:
        size_hint_y: 1.5
        text: "Login"

    BoxLayout:
        orientation: "vertical"
        size_hint_y: 8.5

        BoxLayout:
            Label:
                text: "User"

            Label:
                text: "User (TextInput)"

        BoxLayout:
            Label:
                text: "Password"

            Label:
                text: "Password (TextInput)"

        Label:
            text: "Message (When login error)"

        Label:
            text: "Blank"

        BoxLayout:
            Label:
                text: "Blank"
                
            Label:
                text: "Login (Button)"

では、上記のコードについて、簡単に説明します。

まず、トップのBoxLayoutは、4~6行目のブロックと8~37行目のブロックの大きく2つに分割されています。分割の方向は2行目のorientation指定により縦方向です。また、大きさの比率は「size_hint_y」により、1.5 : 8.5としています。

なお、前回size_hint_xという、BoxLayout内を横方向に分割するための属性を紹介しましたが、size_hint_yを使うと縦方向に分割することができます

次に、大きく2つに分割された各ブロックの説明に移りますが、1つ目は単純なLabelですので、2つ目のブロックについて説明します。

このブロックは3つのBoxLayoutと2つのLabelの計5つのブロックに分割されています。方向はorientationの指定により縦方向ですので、上と同様にsize_hint_yを使って分割比率を指定したいところです。

しかしながら、設計上これらブロックのサイズ比は同じであるため、size_hint_yを省略することができます。そのため、これら5つのブロックには特段size_hint_y属性を書いていません。

続いて、これら5つのブロック内容について簡単に説明します。

まず1つ目のBoxLayoutでは、orientation属性により横方向に分割されており、左右ともにLabelが設置されています。size_hint_xが無いのは、設計上、これら領域が等しいサイズで分割されているからですね。なお、右側には本来ユーザIDの入力欄を設置すべきですが、今回はLabelを仮置きしています。

2つ目のBoxLayoutはパスワードに関するものですが、構造は1つ目のBoxLayoutと同様です。

3つ目にはLabelが設置されていますが、これはログイン/パスワード入力に失敗した際にエラーメッセージを表示するためのスペースです。ここの実装も次回以降に譲るものとし、今回は通常のLabelを仮置いています。

4つ目のLabelは、何も表示しないブランク領域をLabelで示しています。

そして最後、5つ目のBoxLayoutでは、1,2つ目と同様、BoxLayoutを左右に分割しています。左側の領域はブランク、右側の領域には今後ログインボタンを設置しますが、今回はLabelを仮置きしています。

ここで、アウトラインが正しく作成されたか確かめるため、プログラムを実行してみましょう。

Atom上でmain.pyを開き、「Altキー + r」を叩いて下さい。

上図の画面が表示されたら、アウトラインの作成は完了です。

お疲れ様でした。

終わりに

今回はBoxLayoutとLabelを組み合わせて、ログイン画面のアウトラインを作成してみました。

次回、Labelを適切なWidgetに置き換える等の作業を行い、ログイン画面を完成に近づけていきたいと思います。

<スポンサーリンク>

シェアする

フォローする