初心者の Python GUI tkinter 覚え書き

今まではコンソールアプリケーション(Python Shellやコマンドプロンプト)としてPythonを動かしてきましたが、GUI(グラフィカルユーザインタフェース)もやってみようと思います。
GUIはウィンドウを作成して、ユーザーが主にマウスで操作して処理を行う、一番見慣れているアプリの形です。
Pythonで使えるGUIツールは色々あるのですが、Pythonに標準で付いているtkinterを使ってみます。
tkinterは、Tcl/Tk というプログラミング言語のTk 部分からPythonで利用できるようにしたGUIツールです。

なおPythonのドキュメントには、

PyGTK、PyQt および wxPython は全て現代的なルック&フィールをそなえ、 Tkinter より豊富なウィジェットを持ちます。これらに加えて、他にも Python 用 GUI ツールキットが、クロスプラットフォームのもの、プラットフォーム固有のものを含め、沢山あります。

…とありますので、本格的なGUIを作るのでしたら、「現代的なルック&フィール」のものがいいかも知れません(Kivyというツールも有名です)が、今回はインストール不要で簡単に使えるtkinterにします。

Python のバージョンは 3.6.2 です。
OSはWindows 7 または Windows 10 で確認しています。

ステップ1

まずはウィンドウを出してみます。
tkinter をimportして書きます。

このコードを実行しますと、何もないウィンドウが立ち上がります。

このウィンドウにウィジェットを表示させていきます。

ウィジェットとはGUIの部品の総称で、具体的にはLabelやButtonやFrameなどがあります。

表示方法はpackgridplaceの3つのメソッドが使用できます。
最初はgridで表示させてみます。
gridは表のような感じです。
何列目の何行目の「セル」に単一のウィジェット保持して表示させることが出来ます。

Labelウィジェットをgridで配置

Labelは、画面上にテキストやイメージを表示するためのウィジェットです。
Label(親ウィジェット, オプション)
親ウィジェットが無い時(トップレベルの時)は、Tkクラスで作成したオブジェクトの変数を指定します。
オプションはたくさんありますので省略しますが、代表的なものはtext=で、これはラベルに表示するテキストを意味します。テキストには改行を含めることもできます。

Labelクラスのオブジェクトを4つ作りました。
Labelクラス生成の第一引数rootは、root=Tk()のrootです。
ウィジェットのオブジェクトを作っただけでは画面に表示されませんので、gridメソッドを使用して表示させています。
実行結果の画像です。

gridの最初の行と最初の列は0で始まります。
0行0列の「セル」にlab1オブジェクトを表示。
0行1列の「セル」にlab2オブジェクトを表示。
1行0列の「セル」にlab3オブジェクトを表示。
1行1列の「セル」にlab4オブジェクトを表示。

Buttonウィジェットをgridで配置

グレーの部分は行列の番号です。
このようなイメージで配置してみます。

コードは長くなりましたが、何行何列目に何を表示するという命令を書いているだけです。

6行目。すべてのウィジェットで使うフォント指定で、Consolasの14ポイントを使う指定をしました。
9行目。オプションの簡単な説明。
foregroundは前景色テキストの色。
backgroundは背景色。
anchorはラベル内のテキスト(またはイメージ)の位置を制御します。N、NE、E、SE、S、SW、W、NWまたはCENTERのいずれかを使用。デフォルトはCENTERです。
heightはラベルの高さ。 ラベルにテキストが表示されている場合、サイズはテキスト単位で示されます。
10行目。columnspanはウィジェットが複数の列にまたがるようにするためのもの。似たものに複数の行にまたがるrowspanがあります。
stickyは、結果のセルがウィジェット自体よりも大きい場合、ウィジェットを拡張する方法を定義します。S、N、E、Wの任意の組み合わせです。sticky=”EW”は東と西に拡張するという意味です。
13行目。Buttonクラスをインスタンス化。
Button(親ウィジェット, オプション)
オプションはLabel同様たくさんありので省略しますが、使用したものだけ説明します。
textはボタンに表示するテキスト。
widthは幅。単位はテキスト単位。
heightは高さ。単位はテキスト単位。
ボタンは計16個作り、gridで何行何列目にそれぞれ配置しました。
結果の画像です。

ボタンを押しても何も変化しませんが、とりあえず電卓みたいなものが出来ました。
後日、この動かない電卓を動かしてみたいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする