【初心者向け】KivyによるWindowsアプリ作成8 Widgetの外観修正

今回は前回に引き続き、ログイン画面に設置されたWidgetの見た目を修正していくことにより、画面をそれっぽいものに仕上げていきたいと思います。

なお、少しコードが長くなり、記事だけではコードの全体像が分からなくなってきましたので、ファイルをGitHubにアップしました。必要に応じてご参照下さい。

GitHub

<スポンサーリンク>

修正点の整理

一言で「見た目」といっても、修正すべき点は色々ありますので、一旦なにをやるべきか整理しておきたいと思います。

①ウインドウの色変更

②Labelのサイズと色変更

③TextInputのサイズ変更(入力欄のサイズと入力される文字列のフォントサイズ)

④Buttonのサイズと文字列の色変更

この4点の対応ができれば、見た目の修正は一通りできたことになりそうですね。

Kvファイルの修正

①ウインドウの色変更

それではさっそくKvファイルを修正していきましょう。

まずは、ウインドウ全体の色変更です。

expense.kv上、ウインドウ全体に該当するWidgetは最も上に登場するBoxLayoutです。これに対して、第5回目の記事で紹介した「canvas」属性を使えば色付けができます。

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

早速、Kvファイルの該当部分に、canvasブロックを追加します。色は、白に近い薄いグレー(RGBがそれぞれ0.9)にしてみましたが、お好みの色があれば適宜変更して下さい。

BoxLayout:
    orientation: "vertical"
    canvas.before: #このブロックを追加
        Color:
            rgba: 0.9, 0.9 ,0.9 ,1
        Rectangle:
            pos: self.pos
            size: self.size

これを実行すると、以下のウインドウになります。きちんと背景色が変更されていることが確認できましたでしょうか。

②Labelのサイズと色変更

続いてLabelをのサイズと色を変更しましょう。

Labelは「Login」、「User」、「Password」の3か所があります。サイズに関しては、「User」、「Password」を同一サイズ、「Login」をそれらよりも少し大きめに設定し、色についてはすべて同じ色にしたいと思います。

こうした共通的な属性設定を行う場合は、前回紹介した<Widget名:>による設定が使えます。

前回の記事では、経費申請アプリにおけるログイン画面のアウトラインを作成しました。 今回はこのアウトラインをベースとして、文字入力欄とボ...

まずはKvファイルの中の<TextInput:>ブロックの下に、以下のブロックを追加して下さい。

<Label>:
    font_size: 20
    color: 0.1, 0.1, 0.1, 1

Label Widgetに対して2つ、共通属性を指定していますが、「font_size」は文字通り、text属性に指定した文字列のフォントサイズを指定する属性です。

また、色の指定は第5回目にも紹介した「Color」を使います。

さて、Labelが3つある中で「Login」だけはサイズを大きくしようとしていましたが、このままでは3つ全てフォントサイズが20ptになってしまいます。そこで、「Login」のLabelだけは独自にfont_size属性を加えます。

Label:
        size_hint_y: 1.5
        text: "Login"
        font_size: 32 #追加

このように、Widgetに対する共通属性設定を行ったとしても、個別にWidgetに対して属性指定することにより、共通設定の内容を上書きすることができます

では、ここで一旦プログラムを実行してみましょう。

Labelの見た目はきれいになりましたが、ボタンに表示された文字列のサイズと色まで変更されてしまいました。

実はButton WidgetはLabel Widgetを継承して作成された、LabelのサブWidgetであり、また、共通設定の内容は、指定したWidgetのサブWidgetにも適用されるため、Buttonに対してLabelに指定したフォントサイズと色の指定が反映されているのです。

今回の場合は、「Login」のLabelに個別にフォントサイズを指定したように、Buttonに対して個別指定を行えば対応はうまくいきそうです。これは後ほど、④のButton Widgetに対する修正作業の中で実施しましょう。

③TextInputのサイズと色変更(入力欄のサイズと入力される文字列のフォントサイズ)

続いて、TextInputに対する修正を行います。

まず、簡単に終わるフォントサイズの変更から行きましょう。

TextInputに対しては、共通設定を行っていますので、そこに「font_size」属性を加えることにより、フォントサイズの指定ができます。

<TextInput>:
    multiline: False
    write_tab: False
    font_size: 20 #追加

次に、TextInputそのもののサイズを変更します。ここでは、TextInputが設置されているBoxLayout内にpadding(詰め物)をすることにより、サイズを縮めたいと思います。

イメージは以下の通りです。

現在、TextInput(とLabel)が設置されているBoxLayout内部の各領域には、2つのWidgetが隙間なく入っています。そこで、BoxLayout内に余白のように詰め物を入れることにより、これら2つのWidgetのサイズを相対的に小さくしようという発想です。

これを実装するには、BoxLayoutに「padding」という属性を追加してやれば良いのですが、ここではもうひと手間かけてみましょう。

現在、Kvファイル内には、5つのBoxLayoutがあります。このうち、paddingを追加したいBoxLayoutはユーザID入力に関するものとパスワード入力に関するもの2つです。この2つに対して1か所でpaddingの設定を行いたいと思います。

こういった、あるWidgetのうち、いくつかのWidgetに対する共通設定を行う場合には、サブWidgetを作成します

実際にKvファイルを更新してみましょう。

<Label>:ブロックの下に、以下を追加します。

<PaddingBoxLayout@BoxLayout>:
    padding: 20

これは共通設定を行うためのブロックですが、これまでとは少し書き方が違っていますね。

共通設定を行う際、「サブWidget名@親Widget名」という記載で、親Widgetを継承したサブWidgetを作成することができます。ちょうど、Pythonファイル側でAppクラスを継承してExpenseAppクラスを作成した時と同じような形ですね。(と言うより、Widgetの実態はPythonのクラスですので、同じように継承という概念があります。)

あとは、この共通設定を適用したいBoxLayoutを、作成したサブWidgetである「PaddingBoxLayout」に書き換えてやるだけです。

以下はユーザID入力に関する箇所ですが、パスワード入力に関する箇所も同じように書き換えて下さい。

PaddingBoxLayout: #この行を書き換え
    Label:
        text: "User"

    TextInput:

ここで一旦プログラムを実行してみて下さい。TextInputのサイズが変更され、また、文字を入力したときに、そのフォントサイズがLabelの文字列と同じ、20ptになっていることが確認できると思います。

④Buttonのサイズと文字列の色変更

それでは最後に、Buttonのサイズと文字を変更しましょう。これは、今まで紹介した方法で実装することができます。

Kvファイルの最後にある、BoxLayoutのブロックを、以下のように書き換えて下さい。

PaddingBoxLayout: #BoxLayoutから書き換え
    Label:
        text: ""

Button:
    text: "Login"
    color: 1, 1, 1, 1 #追加

イメージはつくかもしれませんが、1行目でBoxLayoutを先ほど作成したPaddingBoxLayoutに書き換えることにより、paddingを使ってボタンのサイズを小さくしています。

また、7行目でButtonにcolor属性を指定することで、ボタン上の文字列の色を変更しています。

これでプログラムを実行してみましょう。

ボタンのサイズが小さくなるとともに、Labelの設定を行った際に代わってしまったButton文字列の色も、白色に戻すことができました。

終わりに

今回は、Widgetの属性設定、Widgetに対する共通設定、サブWidgetの作成といった色々な方法を駆使して、画面上の各Widgetの見た目を変更してみました。

次回は、さらにプログラムを修正し、現在英語で表示されている文字列を日本語化していきたいと思います。

<スポンサーリンク>

シェアする

フォローする