【初心者向け】KivyによるWindowsアプリ作成7 Kvファイルを用いた文字入力欄とボタンの設置

前回の記事では、経費申請アプリにおけるログイン画面のアウトラインを作成しました。

今回はこのアウトラインをベースとして、文字入力欄とボタンを設置することにより、画面を完成形に近づけていきたいと思います。

<スポンサーリンク>

更新すべき点の確認

まずは前回作成したアウトラインと完成形イメージを比較し、見た目を完成させるために何をしなければならないか当たりをつけておきましょう。なお、ボタンを押したときのアクションなどの動作は後で考えることにします。

アウトライン

完成形

見た目に関して言うと、アウトラインに対して修正すべき点は、大きく分けて以下3点です。

  1. 仮置きしたLabelを適切なWidgetに置き換え
  2. フォントなど、各Widgetの見た目を修正
  3. 日本語化

今回はこのうち、1について対応していきたいと思います。

仮置きしたLabelの置き換え

Blank Labelのブランク化

まずは、Blankと書かれたLabel2か所について、何も表示されないようにします。と言っても難しいことは何もなく、Labelのtext属性に指定する文字列を空文字列にするだけです。

Label:
    text: "Blank"
⇒
Label:
    text: ""

また、「Message (When login error)」と書かれたLabelについても、ログイン画面を立ち上げた段階では何も表示しませんので、text属性に空文字列を指定しておきましょう。

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

入力欄とボタンの設置

次に、入力欄とボタンに該当するLabelを、正しいWidgetに置き換えてみましょう。Kvファイル上、修正する箇所は3か所です。

ユーザID入力欄

Label:
    text: "User (TextInput)"
⇒
TextInput:

パスワード入力欄

Label:
    text: "Password (TextInput)"
⇒
TextInput:

ログインボタン

Label:
    text: "Login (Button)"
⇒
Button:
    text: "Login"

見た感じでなんとなく分かるかもしれませんが、修正内容について簡単に説明します。

まず、1つ目と2つ目の修正においては、Labelを「TextInput」というWidgetに置き換えています。このWidgetは文字通り、ユーザが文字列を入力することができるWidgetです。

また、3つ目のButtonも文字通りですが、ボタンを表すWidgetです。ボタンに表示する文字列は、Labelと同じようにtext属性にて指定することができます。

修正後のプログラムを実行すると表示される画面は下図の通りです。

TextInputとButtonの振る舞いを確認するため、ここでプログラムを実行して、色々操作をしてみて下さい。

TextInputのカスタマイズ

さて、少し触ってみた結果、入力欄について、以下のような違和感を感じた方もいらっしゃるかと思います。

  • 入力中にエンターを押すと、入力欄内で改行されてしまう
  • ユーザID入力後にタブを押すと、パスワード欄にフォーカスされるのではなく、入力欄にタブが入力される
  • 入力したパスワードが平文で表示されてしまう

そこで、これら3点を修正してみたいと思います。

まず1つ目と2つ目ですが、設置されている2つのTextInput Widgetそれぞれに、「multiline」と「write_tab」という属性を設定してやるだけです。ただ、全く同じ記述を2か所に書くのも馬鹿らしいですね。そこで、1か所にまとめて記載してしまいましょう。

Kvファイルの冒頭に、以下のブロックを追加して下さい。

<TextInput>:
    multiline: False
    write_tab: False

内容を説明します。

まず、1行目ですが、Kvファイルでは「<Widget名>:」の下に属性を指定することにより、Kvファイル内に登場するすべての該当するWidgetに共通的に属性を指定することができます

今回のケースでは、ユーザIDとパスワードの2か所に登場するTextInputに対して、2行目と3行目の属性が指定されることになります。

次に2行目ですが、「multiline」とは入力欄を複数行とする(=改行を許す)か1行とする(改行させない)かを指定するための属性です。Flaseに設定することにより、改行させない設定にすることができます。

最後の3行目ですが、「write_tab」でタブの扱いを決めることができます。この属性がTrueであれば、タブを入力した際にそれが入力欄にタブ文字として反映されますが、Falseにするとタブ文字は入力されず、代わりに入力欄間のフォーカスの移動にタブを使えるようになります。

なお、いずれの属性もデフォルトではTrueとなっているため、何も指定しない場合は入力欄中の改行とタブ文字入力が許容される形となっています。

さて、続いて3点目のパスワード表示ですが、こちらは単純で、TextInputに「password」属属性を追加してやるだけです。

BoxLayout:
    Label:
        text: "Password"

    TextInput:
	password: True #追加

プログラムの修正が終わりましたら実行してみて、意図したとおりに入力欄の制御が効いているか、確認してみて下さい。

終わりに

今回はログイン画面に対する修正作業の一環として、TextInputとButtonという新しいWidgetを設置し、特にTextInputについては少し属性の設定も行ってみました。

次回は、修正ポイントの2つ目である、各Widgetの見た目修正を行っていきたいと思います。

<スポンサーリンク>

シェアする

フォローする