From the Southern Hemisphere

From the Southern Hemisphere

南半球に移住したプログラマの日々

Pythonでデスクトップアプリ作成入門 第3回

こんにちは、ピコピコくんです。
今回は「Pythonでデスクトップアプリ作成入門」の第3回です。第2回で追加したテキストボックス等の部品の配置を変えたり、デザインを設定してみましょう。

今回の内容

前回はウィンドウにテキストボックス、ラベル、ボタンを追加しました。しかし各部品が縦に並んでちょっと使いずらい見た目でした。なので今回は各部品の配置やデザインを設定してアプリの見た目を変更してみたいと思います。

f:id:EstherSoftware:20200613121449p:plain

前回作ったアプリ

今回の変更点

・画面のサイズを200x200に変更する
・ラベルとテキストボックスを一列に並べる
・ボタンの位置を変更する 

サンプルコード

サンプルコードの赤文字の部分が、前回のコードから追加・変更になった箇所です。今回は各部品を配置するために、Frameを使っています。

# tkinterライブラリの読み込み
import tkinter as tk
# tkinterライブラリのmessageboxモジュールを読み込み
from tkinter import messagebox as mbox

# ウィンドウを作成
win = tk.Tk()
win.title("My App")
win.geometry("200x200") # ウィンドウのサイズを指定

# フレームを作成 [*A]
frame_name = tk.Frame(win, relief="flat", pady=8, padx=24)
frame_name.pack(fill="x") # 水平方向最大にフレームの幅を設定

# 部品を作成 [*B]
# ラベル「名前」を作成
label_name = tk.Label(frame_name, text="名前")
label_name.pack(side="left")

# 名前を入力するテキストボックスを作成 [*C]
text_name = tk.Entry(frame_name)
text_name.pack(side="left")
text_name.insert(tk.END, "太郎") # 初期値を指定

# フレームを作成
frame_food = tk.Frame(win, relief="flat", padx=24, pady=8)
frame_food.pack(fill="x")

# ラベル「好物」を作成
label_food = tk.Label(frame_food, text="好物")
label_food.pack(side="left")

# 好物を入力するテキストボックスを作成
text_food = tk.Entry(frame_food)
text_food.pack(side="left")
text_food.insert(tk.END, "バナナ") # 初期値を指定

# OKボタンを押した時の処理
def ok_click():
    # テキストボックスの内容を得る
    s = text_name.get() + "さんが好きな食べ物は、" + text_food.get()
    # ダイアログを表示
    mbox.showinfo("好きな食べ物", s)

# ボタン用のフレームを作成
frame_button = tk.Frame(win, relief="flat", padx=24, pady=8)
frame_button.pack(fill="x")

# ボタンを作成
okButton = tk.Button(frame_button, text='OK', command=ok_click)
okButton.pack(side="right")

# ウィンドウを動かす
win.mainloop()

解説

上記サンプルコードの[*A]から[*C]の部分について解説をします。

[*A]

frame_name = tk.Frame(win, relief="flat", pady=8, padx=24)

ここでFrameを作成しています。
Frameに渡している引数のwinはウィンドウです。relief="flat"はFrameの縁のスタイルを設定しています。flatは平坦(表示なし)を意味します。padyは垂直方向のパディングを設定しています。pady=8は垂直方向に8ピクセルのパディングを設定しているという意味になります。padxは水平方向のパディング設定です。padx=24で水平方向に24ピクセルのパディングを設定しています。

次に作成したFrameをウィンドウに設置するためpackを使います。

frame_name.pack(fill="x"

packに引数 fill="x" を設定しています。これを設定するとFrameの幅をウィンドウの水平方向(x)の幅の最大値まで広げることができます。

[*B]

ここでは「名前」という文字列を表示するラベルを作成しています。前回ではtk.Label()の第一引数にwin(ウィンドウ)を指定していましたが、今回はframe_nameに変わっています。これはラベルの設置先を今回作成したフレーム(frame_name)にするためです。

label_name = tk.Label(frame_name, text="名前")

ラベルを作成したらpackして部品を設置します。引数の side="left"を指定することで左端に表示することができます。

label_name.pack(side="left")

[*C]

フレームに設置するもう一つの部品、テキストボックスを作成しています。これもラベルと同様に作成時の第一引数に[*A]で作成したフレーム(frame_name)を指定します。

text_name = tk.Entry(frame_name)

テキストボックスを作成したらpackして部品を設置します。ラベルと同様に引数に side="left"を指定しているので左端に表示されます。既に同じフレームの左端にラベルが設置されているので、テキストボックスはその右側に表示されます。

text_name.pack(side="left")

※「好物」と「ボタン」のフレーム、ラベル、テキストボックスのコード解説は上記[*B]、[*C]と同様のため省略しています。 

実行例

前回作った画面と今回変更した画面を比べてみましょう。前回の画面は画面サイズが400x400と大きく、各部品ごとに別の行に配置され、全て中央に寄せられていました。

f:id:EstherSoftware:20200613121449p:plain

改修前の画面

続いて今回変更した画面は、画面サイズが200x200と半分の大きさになり、ラベルとテキストボックスが一列に並んでいます。ボタンも右下に配置されています。

f:id:EstherSoftware:20200616140434p:plain

改修後の画面

前回の画面と比べると無駄な部分が減って見やすくなりましたね!

前回の記事

「Pythonでデスクトップアプリ作成入門 第2回」の記事です。ウィンドウにラベルやボタンを表示する方法について解説しています。

esthersoftware.hatenablog.com

読者さん募集中

記事を気に入ったら読者登録をお願いします!