どん底から這い上がるまでの記録

どん底から這い上がりたいけど這い上がれない人がいろいろ書くブログ(主にプログラミング)

ボタンを作る

スポンサーリンク


Button

ボタンを作ってメインウィンドウに配置するプログラムを書きます。

下のプログラムはボタンを作って配置する簡単な例です。

import tkinter as tk
root = tk.Tk()
button_quit = tk.Button(root, text="Quit", command=root.quit)
button_quit.place(x=50, y=50)
root.mainloop()

 このプログラムを実行すると下の画像ようなウィンドウが立ち上がります。

f:id:pytry3g:20180205144340p:plain

前回の記事で書いた通りtkinterを使ったGUIアプリケーションの作成は以下の4ステップです。

  1. tkinterをインポート
  2. メインウィンドウの生成
  3. widgetを生成し、メインウィンドウに配置する。
  4. イベントループを開始する。

上の例ではまず、前回のようにメインウィンドウを作ります。そして、イベントループを開始する前にボタンを作ってそれをメインウィンドウに配置します。プログラムの3、4行目が3.に当たります。ボタンを作るにはButtonのオブジェクトを生成します。ボタンのオブジェクトは以下のような感じで作ります。

widget = Button(parent, option...)

ボタンを作るときに親widget(parent)とoptionでwidgetの設定をする必要があります。parentはボタンの配置先になります。ここではメインウィンドウに配置するので、メインウィンドウのオブジェクトのrootとしています。

button_quit = tk.Button(root, text="Quit", command=root.quit)

parentにはメインウィンドウだけではなく、FrameやCanvasといった他のwidgetも指定することができます。

ちなみに、tkinterで使えるwidgetはクラス名と同じ名前がついているようです。(ボタンー>Button、フレームー>Frame)唯一の例外としてメインウィンドウもwidgetですが、クラス名はMainWindowではなくTkになっています。

次に、optionでwidgetの設定を行います。上の例ではtextとcommandの設定をしています。textではボタンに表示されるテキストの設定をしています。commandにはこのボタンが押されたときに呼ばれるメソッドを指定しています。メソッドquitを使うとメインループから抜け出すことができます。ここではメインウィンドウにメソッドquitを使っているのでメインウィンドウがメインループから抜け出すことになります。メインループから抜け出すとwidgetは終了します。つまり、メインウィンドウが終了することになるのでこれはアプリケーションの終了を意味しています。

これでparentとoptionの設定が完了したのでボタンの生成をすることができました。widgetの生成をした後は、作ったものを配置する必要があります。生成した直後にメインループに入ればメインウィンドウにボタンは表示されません。widgetの配置には3つの方法pack、grid、placeがあります。上の例ではボタンの左上の座標がメインウィンドウのx座標が50、y座標が50のところに配置されています。widgetの配置方法については今回は割愛します。

と、ここまでボタンの生成から配置のしかたまでざっくり書いてみました。

Option

とりあえず、頻繁に使いそうなオプションの紹介。

bg

 背景の色の設定。

fg

 テキストの色の設定。

bd

 ボーダーの幅の設定。

width

 widgetの横の長さの設定。

height

 widgetの縦の長さの設定。

font

 ボタンに表示するテキストの書体やサイズなどを設定できる。

relief

 形を設定する。デフォルトではraisedになっています。 他にはsunken、flat、groove、ridgeがあります。

import tkinter as tk
root = tk.Tk()
root.configure(width=150, height=400)
y_ = 100
for option in ["flat", "sunken", "raised", "groove", "ridge"]:
    tk.Button(root, text=option, relief=option).place(x=50, y=y_)
    y_ += 50
root.mainloop()

f:id:pytry3g:20180205170436p:plain

state

 状態の設定。デフォルトではNORMAL。ほかにACTIVEとDISABLEDがある。

  • NORMAL : クリックができる状態。
  • ACTIVE : クリックされたときの状態。
  • DISABLED : クリックができない状態。

サンプルプログラム

ボタンを使ったサンプルプログラムです。

A、B、C、終了の4つのボタンを生成して配置しています。

ボタンAが押されるとメソッド_disabled_Cが呼ばれ、ボタンCの状態がクリックできない状態になります。ボタンBが押されるとボタンCの状態がクリックできる状態になります。ボタンCが押されると、押されるたびに青、赤の順に背景の色が変わります。終了を押すとプログラムが終了します。

 

import tkinter as tk


class App:
    def __init__(self):
        self._window = tk.Tk()
        self._window.title("Hello World")
        self._window.resizable(width=False, height=False)
        self._window.geometry("{}x{}+{}+{}".format(300, 300, 300, 100))

        self._turn = 1
        # widgetの設定
        self._set_widget()
        # widgetの配置
        self._put_widget()

    def _set_widget(self):
        self._button_A = tk.Button(self._window, text="A", relief="sunken", command=self._disabled_C)
        self._button_B = tk.Button(self._window, text="B", relief="raised", command=self._activate_C)
        self._button_C = tk.Button(self._window, text="C", relief="groove", command=self._change_color)
        self._button_quit = tk.Button(self._window, text="終了", command=self._window.quit)

        # fontの設定
        self._button_B.configure(font=("Helvetica", 15, "bold"))
        # ボタンの横の長さの設定
        self._button_C.configure(width=10)

    def _put_widget(self):
        self._button_A.pack()
        self._button_B.pack()
        self._button_C.pack()
        self._button_quit.pack()

    def _disabled_C(self):
        self._button_C.configure(state="disabled")

    def _activate_C(self):
        self._button_C.configure(state="normal")

    def _change_color(self):
        self._button_C.configure(bg=["red", "blue"][self._turn])
        self._turn = (self._turn + 1) & 1

    def run(self):
        self._window.mainloop()

if __name__ == "__main__":
    app = App()
    app.run()