Python Tkinter.ttk ～Button～

Tkinterとはなにか

GUIを構築・操作するために用いるPythonに標準搭載されているライブラリである

TkinterはTcl/TkというOSSのクロスプラットフォームのツールキットをPythonから扱えるようにしたものであり、Pythonの標準ライブラリに含まれている

またTkinterには Tk8.5から導入された Tk のテーマ付きモジュールTkinter.ttkがあり、プラットフォームをまたいでより良い見た目のウィジェットを作成できる機能がある

しかし！！！

Tkinter.ttkのドキュメントがあまりにも見つかりにくい・わかりにくい！！！

ということで自分の備忘録のためにもメモを残すことにするの巻　その２

ベースプログラム

※Python3、Windows環境での動作を想定しています

# -*- coding: utf-8 -*-
import tkinter as tk
import tkinter.ttk as ttk
from tkinter import messagebox as msg


class SampleApp(ttk.Frame):
   def __init__(self, master):
       super().__init__(master)
       self.master = master
       # 環境設定をする関数
       self.set_env()
       # ウィジェットを作る関数
       self.create_widgets()

   def set_env(self):
       """
       ###############################
       # 画面サイズやタイトルを設定している #
       # __init__()内で直接設定しても可  #
       ###############################
       """
       env = {
           "geometry": {
               "width": 400,
               "height": 400
           },
           "title": "らべる君"
       }
       self.master.geometry("{width}x{height}".format(
           width=env["geometry"]["width"], height=env["geometry"]["height"]))
       self.master.title("{title}".format(title=env["title"]))
       self.pack()
       
   def clicked_button(self):
       """
       ###########################################
       # commandに引数なしの関数を設定した場合に使う関数 #
       ###########################################
       """
       msg.showinfo("メッセージ", "functionボタンを押しました")

   def clicked_button_args(self, text):
       """
       ###########################################
       # commandに引数ありの関数を設定した場合に使う関数 #
       ###########################################
       """
       msg.showinfo("メッセージ", text + "ボタンを押しました")

   def create_widgets(self):
       """
       #################################
       # ここにボタンウィジェットを作っていく #
       #################################
       """
       pass


def main():
   root = tk.Tk()
   app = SampleApp(master=root)
   app.mainloop()


if __name__ == "__main__":
   main()

ウィジェットオプション

・command​​

　ボタンを押したときに実行する処理を設定するオプション

def create_widgets(self):
       # 引数なし指定 -> 関数名のみを指定する
       button_no_args = ttk.Button(
           self, text="button : function", width=20, command=self.clicked_button)
       button_no_args.pack(pady=5, ipadx=10, ipady=10)
       # 引数あり指定1 lambda
       button_args1 = ttk.Button(self, text="button : lambda", width=20,
                                 command=lambda: self.clicked_button_args("lambda"))
       button_args1.pack(pady=5, ipadx=10, ipady=10)
       # 引数あり指定2 partial
       from functools import partial
       button_args2 = ttk.Button(self, text="button : partial", width=20, command=partial(
           self.clicked_button_args, "partial"))
       button_args2.pack(pady=5, ipadx=10, ipady=10)

・compound

　画像とテキストの表示位置を設定するオプション

　【"none","top","right","bottom","left","image","text"】の何れかを指定できる

def create_widgets(self):
       # 関数が終了したときに画像インスタンスを保持しないと画像が表示されない
       self.img = tk.PhotoImage(file="./cat.png")
       # compound none -> imageが設定されていれば画像を、なければテキストを表示する
       button_compound_none = ttk.Button(
           self, text="compound : none", image=self.img, compound="none", width=20)
       button_compound_none.grid(
           row=0, column=0, sticky="nesw", padx=5, pady=5, ipady=10)
       # compound top -> 画像を上に、テキストを下に表示する
       button_compound_top = ttk.Button(
           self, text="compound : top", image=self.img, compound="top", width=20)
       button_compound_top.grid(
           row=0, column=1, sticky="nesw", padx=5, pady=5, ipady=10)
       # compound right -> 画像を右に、テキストを左に表示する
       button_compound_right = ttk.Button(
           self, text="compound : right", image=self.img, compound="right", width=20)
       button_compound_right.grid(
           row=0, column=2, sticky="nesw", padx=5, pady=5, ipady=10)
       # compound bottom -> 画像を下に、テキストを上に表示する
       button_compound_bottom = ttk.Button(
           self, text="compound : bottom", image=self.img, compound="bottom", width=20)
       button_compound_bottom.grid(
           row=0, column=3, sticky="nesw", padx=5, pady=5, ipady=10)
       # compound left -> 画像を左に、テキストを右に表示する
       button_compound_left = ttk.Button(
           self, text="compound : left", image=self.img, compound="left", width=20)
       button_compound_left.grid(
           row=1, column=0, sticky="nesw", padx=5, pady=5, ipady=10)
       # compound image -> 画像のみを表示する
       button_compound_image = ttk.Button(
           self, text="compound : image", image=self.img, compound="image", width=20)
       button_compound_image.grid(
           row=1, column=1, sticky="nesw", padx=5, pady=5, ipady=10)
       # compound text -> テキストのみを表示する
       button_compound_text = ttk.Button(
           self, text="compound : text", image=self.img, compound="text", width=20)
       button_compound_text.grid(
           row=1, column=2, sticky="nesw", padx=5, pady=5, ipady=10)

　※引用画像

・cursor

　ボタンホバー時のマウスカーソルを設定するオプション

　※1. 設定可能なカーソル一覧

def create_widgets(self):
       button_cursor_arrow = ttk.Button(
           self, text="cursor : arrow", cursor="arrow", width=20)
       button_cursor_arrow.pack(pady=5, ipadx=10, ipady=10)

       button_cursor_boat = ttk.Button(
           self, text="cursor : boat", cursor="boat", width=20)
       button_cursor_boat.pack(pady=5, ipadx=10, ipady=10)

       button_cursor_circle = ttk.Button(
           self, text="cursor : circle", cursor="circle", width=20)
       button_cursor_circle.pack(pady=5, ipadx=10, ipady=10)

       button_cursor_exchange = ttk.Button(
           self, text="cursor : exchange", cursor="exchange", width=20)
       button_cursor_exchange.pack(pady=5, ipadx=10, ipady=10)

       button_cursor_spider = ttk.Button(
           self, text="cursor : spider", cursor="spider", width=20)
       button_cursor_spider.pack(pady=5, ipadx=10, ipady=10)

　※各ボタンの範囲内にカーソルを移動させると対応したマウスカーソルが表示される

・image

　ボタンに設置する画像を設定するオプション

　※1. 設定する変数はtkinter.PhotoImageクラスでないといけない

　※2. 関数、クラスの処理終了時に画像インスタンスを保持していないと画像が表示されない

def create_widgets(self):
       # 関数が終了したときに画像インスタンスを保持しないと画像が表示されない
       img = tk.PhotoImage(file="./cat.png")
       self.img = tk.PhotoImage(file="./cat.png")
       # 画像インスタンス未保持 -> 画像が表示されない
       button_image_no_instance = ttk.Button(
           self, text="image : img", image=img, compound="bottom", width=20)
       button_image_no_instance.pack(pady=5, ipadx=10, ipady=10)
       # 画像インスタンス保持 -> 画像が表示される
       button_image_instance = ttk.Button(
           self, text="image : self.img", image=self.img, compound="bottom", width=20)
       button_image_instance.pack(pady=5, ipadx=10, ipady=10)

　※引用画像

・takefocus

　ウィジェット範囲内でのフォーカス処理を設定するオプション

　【"", True, False】の何れかを指定できる

def create_widgets(self):
       # takefocus "" -> Trueの時と同じ、クリック時やtab押下時に選択しているウィジェットがわかる
       button_takefocus_none = ttk.Button(
           self, text="takefocus : \"\"", takefocus="", width=20)
       button_takefocus_none.pack(pady=5, ipadx=10, ipady=10)
       # takefocus True、 クリック時やtab押下時に選択しているウィジェットがわかる
       button_takefocus_true = ttk.Button(
           self, text="takefocus : True", takefocus=True, width=20)
       button_takefocus_true.pack(pady=5, ipadx=10, ipady=10)
       # takefocus False、 クリック時やtab押下時でも選択ウィジェットのマークが出ない
       button_takefocus_false = ttk.Button(
           self, text="takefocus : False", takefocus=False, width=20)
       button_takefocus_false.pack(pady=5, ipadx=10, ipady=10)

・text

　ボタンに表示するテキストを指定するオプション

def create_widgets(self):
       button = ttk.Button(self, text="text : sample_button", width=20)
       button.pack(pady=5, ipadx=10, ipady=10)

・textvariable

　ボタンに設定できるウィジェット変数を設定するオプション

def create_widgets(self):
       # 初めに表示するテキストをStringVarにセットする
       s = tk.StringVar()
       s.set("No clicked!!")
       # textを設定していてもtextvariableを指定すると無視される
       button_textvariable = ttk.Button(
           self, text="stringvar", textvariable=s, width=20, command=lambda: s.set("Clicked!!"))
       button_textvariable.pack(pady=5, ipady=10)

・underline

　指定した位置にある文字の下に下線を設定するオプション

　※1. 下線を引くことができる文字は１文字のみ

def create_widgets(self):
       button_underline_0 = ttk.Button(
           self, text="underline : 0", underline=0, width=20)
       button_underline_0.pack(pady=5, ipadx=10, ipady=10)

       button_underline_3 = ttk.Button(
           self, text="underline : 3", underline=3, width=20)
       button_underline_3.pack(pady=5, ipadx=10, ipady=10)

       button_underline_7 = ttk.Button(
           self, text="underline : 7", underline=7, width=20)
       button_underline_7.pack(pady=5, ipadx=10, ipady=10)
       # 文字列の長さ以上を設定すると無視される
       button_underline_100 = ttk.Button(
           self, text="underline : 100", underline=100, width=20)
       button_underline_100.pack(pady=5, ipadx=10, ipady=10)

・width

　表示するテキストの幅を設定するオプション

　※表示する最小幅を設定する場合は-（マイナス）を付ける

def create_widgets(self):
       # width指定なし -> ウィジェットサイズはテキストの長さに自動で調整される
       button_width_none = ttk.Button(self, text="width : none")
       button_width_none.pack(pady=5, ipadx=10, ipady=10)
       # width 3 -> 指定したwidthを超えたテキストは非表示
       button_width_3 = ttk.Button(self, text="width : 3", width=3)
       button_width_3.pack(pady=5, ipadx=10, ipady=10)
       # width 10 -> 指定したwidthを超えたテキストは非表示
       button_width_10 = ttk.Button(self, text="width : 10", width=10)
       button_width_10.pack(pady=5, ipadx=10, ipady=10)
       # width -20 -> 指定したwidthの領域は確保される、widthを超えたテキストの場合はテキストの長さに自動で調整される
       button_width_m20 = ttk.Button(self, text="width : -20", width=-20)
       button_width_m20.pack(pady=5, ipadx=10, ipady=10)