PythonでTkinterを使ってGUI的な画面を表示

PythonでGUI操作をするライブラリはいくつかありますが、一番メジャーだと思われるTkinterを使うことが多いです。

今回はTkinterをこれから使う方向けに段階的に使い方を説明したいと思います。皆さんのお役に立てれば幸いです。

Pythonのバージョンは3で試してますのでご注意下さい。

本記事の内容

試した環境
Tkinterのインストール
Step1 : とりあえずGUI画面表示してみる
Step2 : 文字を表示してみる
Step3 : テーブル表示(TreeView)をしてみる
Pythonのオススメ勉強方法
まとめ

試した環境

・Windows 10 Pro v2004
・Python 3.8.5

Tkinterのインストール

基本的にはTkinterはPythonに含まれているのですが、私のWindows環境の場合には入ってなかったのでpip経由でインストールしました。

モジュール名はTkinterではなくtkです。

> pip install tk

Step1 : とりあえずGUI画面表示してみる

まずGUI の画面だけ表示してみます。以下のコードを貼り付けて実行して下さい。たったの3行です。

import tkinter as tk
root = tk.Tk()
root.mainloop()

実行してこんな画面が起動したらとりあえず成功です。

Step2 : 文字を表示してみる

次に簡単に文字や入力ボックス、ボタンを表示してみます。合わせて画面の大きさやタイトルなども変更しています。これで上から要素を配置して表示することができます。

import tkinter as tk

root = tk.Tk()
root.title("自由なタイトル")
root.geometry("400x200")

# ラベル
label01 = tk.Label(text='あいうえお')
label01.pack()
# 入力ボックス
input01 = tk.Entry(root)
input01.pack()
# ボタン
btn01 = tk.Button(root, text="ボタン")
btn01.pack()

root.mainloop()

テキストはLabel、入力ボックスはEntry、ボタンはButtonという感じで要素を作成してからpackでメインで表示するrootに割り当ててます。

Step3 : テーブル表示(TreeView)をしてみる

次にExcelみたいにテーブル(表)を表示してみたいと思います、結果としては以下のようになります。

それではPythonのコードになります。

import tkinter as tk
import tkinter.ttk as ttk

root = tk.Tk()
root.title("自由なタイトル")
root.geometry("400x200")

tree = ttk.Treeview(root)

# 列を作る
tree["column"] = (1, 2, 3)
tree["show"] = "headings"
# ヘッダー
tree.heading(1, text="列1")
tree.heading(2, text="列2")
tree.heading(3, text="列3")
# 列の幅
tree.column(1, width=100)
tree.column(2, width=200)
tree.column(3, width=100)
# データ追加
tree.insert("", "end", values=("1", "あいうえお", "abcde"))
tree.insert("", "end", values=("2", "かきくけこ", "fghijk"))
tree.insert("", "end", values=("3", "さしすせそ", "lmnop"))

tree.pack(side=tk.TOP, fill=tk.BOTH, expand=1)

root.mainloop()

Tkinterで表を作成するにはtinkerに含まれているttkライブラリを利用します。

TreeViewオブジェクトを作成して要素を追加していきます。

列を作ってヘッダ名を追加と列幅を設定してから列に値を追加しています。もちろんこの部分をCSVやJsonなどの外部ファイルから値を取得することも可能です。

なお、【tree[“show”] = “headings”】の部分について説明すると、TreeViewには大きくデータ部分とヘッダ部分に分かれていて、今回はデータ部分(表の部分)表示するためにheagingを指定しています。

デフォルトではヘッダ部分も表示されるため指定しないと以下のようにヘッダ部分も表示されます。ヘッダ部分はどこかで説明したいと思います。

もっと詳細な説明が必要な場合には公式の説明がありますので確認してください。