KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
【コード付】Tkinterで活用されるcomboboxをわかりやすく解説!?

【コード付】Tkinterで活用されるcomboboxをわかりやすく解説!?

今回はTkinterで活用されるcomboboxに関して、コードを交えてわかりやすく解説いたします。comboboxに関して知りたい、comboboxの理解を深めたい方へおすすめです。是非最後までご一読ください。

目次
  1. そもそもTkinterで使われるcomboboxとは?
    1. Tkinterの構成要素
  2. 下準備
  3. Tkinterで活用されるcombobox Widgetの定義
    1. values
    2. justify
    3. show
    4. state
    5. cursor
    6. height, width
    7. font
    8. foreground
    9. postcommand
    10. 入力制限に関するoption
    11. xscrollcommand
    12. style
  4. テーマ(名前)を利用して、combobox Widgetの外観を変更
  5. 【4種類】comboboxで活用される関数
    1. get
    2. current
    3. set
    4. delete
  6. まとめ
  7. 参考文献
目次を開く⬇︎

そもそもTkinterで使われるcomboboxとは?

Tkinterで使われるcomboboxとは、Widgetの一種で様々な選択肢を表示して選んだり、文字入力できるテキストボックスを意味します。

Tkinterを熟達されている方は、entry Widgetlistbox Widgetを1つにまとめたものと考えると良いでしょう。

entry Widgetに関しては、Tkinterで使われるentryって?有効な活用方法を徹底解説!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

listbox Widgetに関しては、【サンプルコード付】Tkinterで使われるlistboxに関して徹底解説!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

別名combobox Widgetと呼ばれます。

普段聞き慣れない言葉が出てきて少し難しいですね。。以下の「Tkinterの構成要素」を確認しながら、理解を深めましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

名称説明文
Window  画像の黄緑色枠の部分になります。Tkinter画面全体を表します。
Frame画像内の黄色枠の部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。
Widgetピンク色枠で囲まれる部分になります。1つの機能を持つ最小単位 = Widgetと考えると良いでしょう。

前の章でTkinterで使われるcomboboxとは、Widgetの一種で様々な選択肢を表示して選んだり、文字入力できるテキストボックスとお伝えしました。

「Tkinterの構成要素」の画像内では、ピンク色枠に該当するWidgetに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にcomboboxの活用方法を理解していきましょう。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、comboboxの使い方をお伝え致します。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できれば、一緒にcomboboxを体験しましょう。

1import tkinter as tk
2from tkinter import ttk
3
4class Application(tk.Frame):
5    # combobox Widgetに関する情報を変数として格納する
6    combobox = None
7
8    def __init__(self, master=None):
9        # Windowの初期設定を行う。
10        super().__init__(master)
11
12        # Windowの画面サイズを設定する。
13        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
14        self.master.geometry("300x200")
15
16        # Windowを親要素として、frame Widget(Frame)を作成する。
17        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
18        frame = tk.Frame(self.master)
19        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
20        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
21        frame.pack()
22
23        # frame Widget(Frame)を親要素として、combobox Widgetを作成する。
24        # values : 表示される様々な選択肢(バイキンマン, 食パンまん)の設定
25        self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
26
27        # frame Widget(Frame)を親要素とした場合に、combobox Widgetをどのように配置するのか?
28        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
29        self.combobox.pack()
30
31# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
32if __name__ == "__main__":
33    # Windowを生成する。
34    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
35    root = tk.Tk()
36    app = Application(master=root)
37
38    # Windowをループさせて、継続的にWindow表示させる。
39    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
40    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

Tkinterで活用されるcombobox Widgetの定義

combobox Widgetは、

1from tkinter import ttk
2
3ttk.Combobox(option1, option2, ...) or ttk.Combobox('親要素', option1, option2, ...)

で定義されます。

combobox Widgetで使われるoptionの種類としては

  • values
  • justify
  • show
  • state
  • cursor
  • height, width
  • font
  • foreground
  • postcommand
  • 入力制限に関するoption
  • xscrollcommand
  • style

があります。順番に見ていきましょう。

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1from tkinter import ttk
2
3# comboboxを生成する。
4combobox = ttk.Combobox()
5# comboboxに関するoptionの種類一覧を取得する。
6print(combobox.keys())

values

values optionを利用すると、表示される選択肢の内容を設定できます。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1self.combobox = ttk.Combobox(frame, values=('aaa', 'bbb'))

以下の画像のようにcombobox Widgetを描画します。

また下準備コードを、以下のように変更すると、

1class Application(tk.Frame):
2+    # combobox Widgetの選択肢が選択された場合に実行される。
3+    def changeValues(self, event):
4+        # values : 表示される様々な選択肢(aaa, bbb)を設定する。
5+        # もしくはself.combobox.config(values=('aaa', 'bbb'))
6+        self.combobox.configure(values=('aaa', 'bbb'))
7     def __init__(self, master=None):
8         ...
9         self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
10+        # combobox Widgetの選択肢を選択した場合に、実行される関数の設定
11+        # 第一引数 : sequence(イベント内容(combobox Widgetの選択肢を選択した場合)を設定)。<<ComboboxSelected>> : combobox Widgetの選択肢を選択した場合
12+        # 第二引数 : func(第一引数のイベント内容(combobox Widgetの選択肢を選択した場合)が実行された場合に、呼ばれる関数を設定)
13+        # bindについて : https://kuroro.blog/python/eI5ApJE1wkU7bHsuwk0H/
14+        self.combobox.bind('<<ComboboxSelected>>', self.changeValues)

選択肢を一度も選択していない場合に、以下の画像のようにcombobox Widgetが描画されて、

選択肢を一度選択した後の場合に、以下の画像のようにcombobox Widgetが描画されます。

bind関数に関しては、【コード付】Tkinterで使われるbindとは?bindの仕組みを交えて解説でまとめていますので、詳しく知りたい方は是非ご確認ください。

justify

justify optionを利用すると、combobox Widgetで表示する、文字列をどちらに揃えるか設定できます。

指定できる値としては、

  • tk.LEFT : 左寄せ(デフォルト)
  • tk.CENTER : 中央寄せ
  • tk.RIGHT : 右寄せ

の3種類があります。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(justify='right') or self.combobox.configure(justify='right')
4##################################
5self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), justify='right')

以下の画像のようにcombobox Widgetを描画します。

show

show optionを利用すると、入力内容の表示を、指定する文字列へ変換できます。パスワードなどセキュリティに関する入力項目へ、show optionが有効です。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(show='*') or self.combobox.configure(show='*')
4##################################
5self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), show='*')

以下の画像のようにcombobox Widgetを描画します。

state

state optionを利用すると、combobox Widgetの状態を設定できます。

指定できる値としては、

  • normal : 様々な選択肢を選んだり、combobox内へ直接文字入力可能(デフォルト)
  • disabled : 様々な選択肢を選んだり、combobox内へ直接文字入力不可
  • readonly : 様々な選択肢を選ぶことはできる。combobox内へ直接文字入力不可

があります。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(state='disabled') or self.combobox.configure(state='disabled')
4##################################
5self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), state='disabled')

以下の画像のようにcombobox Widgetを描画します。

cursor

cursor optionを利用すると、combobox Widget内へマウスカーソルを移動すると矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更して、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(cursor="clock") or self.combobox.configure(cursor="clock")
4##################################
5self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), cursor="clock")

combobox Widget内へマウスカーソルを移動すると、矢印の見た目が変更します。

height, width

height option, width optionを利用すると、それぞれ選択肢の高さ・幅を設定できます。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(height=1, width=10) or self.combobox.configure(height=1, width=10)
4##################################
5# width : 選択肢の幅を設定する。デフォルトは20。
6self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), height=1, width=10)

以下の画像のようにcombobox Widgetを描画します。

font

font optionを利用すると、文字の形式や大きさを設定できます。

fontに関しては、Tkinterで使われるフォントって?2種類のフォントの設定方法を丁寧に解説でまとめておりますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(font=("", 20, "underline")) or self.combobox.configure(font=("", 20, "underline"))
4##################################
5# font option第一引数(必須) : 文字列の形式(デフォルト)
6# font option第二引数(必須) : 文字列の大きさを設定。
7# font option第三引数(任意) : underline = 文字列へ下線をつける。
8# fontについて : https://kuroro.blog/python/RZNjLl36upkumxwkTRWl/
9self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), font=("", 20, "underline"))

以下の画像のようにcombobox Widgetを描画します。

foreground

foreground optionを利用すると、 文字列色を設定できます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
3# self.combobox.config(foreground='red') or self.combobox.configure(foreground='red')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), foreground='red')

以下の画像のようにcombobox Widgetを描画します。

postcommand

postcommand optionを利用すると、選択肢を表示するタイミングで実行する関数を設定できます。

例えば下準備コードを以下のように変更すると、

1class Application(tk.Frame):
2+    # 選択肢を表示するタイミングで実行される関数
3+    def callFunc(self):
4+        print('hello world')
5
6     def __init__(self, master=None):
7         ...
8-        self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
9+        self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), postcommand=self.callFunc)

以下の画像のようにcombobox Widgetを描画します。

入力制限に関するoption

入力制限に関するoption(invalidcommand, validate, validatecommand)に関しては、【コード付】Tkinterのentryを使った入力制限の方法をお伝えしますでまとめておりますので、是非ご確認ください。

xscrollcommand

xscrollcommand optionに関しては、Tkinterで使われるscrollbarとは?活用事例を交えて徹底解説の「その他のWidgetを使った、scrollbar Widgetサンプル集」でまとめておりますので、是非ご確認ください。

style

style optionを利用すると、combobox Widgetのoptionをまとめて設定したり、entry Widgetにある一部のoptionを設定できるようになります。

以下の3ステップで設定できます。

  1. スタイルオブジェクト(ttk.Style())の生成
  2. configure()関数を使用して、optionの設定
  3. combobox Widget内のstyle optionへ2で作成したものを設定

例えば下準備コードを以下のように変更すると、

1def __init__(self, master=None):
2    ...
3    frame.pack()
4+   # 1. スタイルオブジェクト(ttk.Style())の生成
5+   style = ttk.Style()
6+   # 2. configure()関数を使用して、optionの設定
7+   # 第一引数 : {お好みの名前}.TComboboxで設定ください。
8+   # 第二引数以降 : optionを設定ください。
9+   # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
10+   style.configure("test.TCombobox", selectbackground='red', foreground='green')
11-   self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
12+   # 3. combobox Widget内のstyle optionへ2で作成したものを設定
13+   self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'), style='test.TCombobox')

以下の画像のようにcombobox Widgetを描画します。

筆者のMac OSで調べたところ、style optionを活用すると、追加して以下のoptionが利用できます。

  • selectbackground
  • selectforeground
  • selectborderwidth
  • insertwidth

上記のoptionに関しては、entry Widgetの各option名でまとめていますので、そちらをご確認ください。

次項で述べる、テーマ(名前)によってstyleで指定するoptionが適用されない場合もございます。これはテーマ(名前)で設定されるstyleが優先されるためです。優先度 : テーマ(名前)のstyle > style option

テーマ(名前)を利用して、combobox Widgetの外観を変更

ttk.Combobox()では、テーマ(名前)を指定することで、combobox Widgetの外観を変更できます。

例えば以下のようなコードを作成すると、

1import tkinter as tk
2from tkinter import ttk
3
4class Application(tk.Frame):
5    # combobox Widgetに関する情報を変数として格納する
6    combobox = None
7
8    def __init__(self, master=None):
9        # Windowの初期設定を行う。
10        super().__init__(master)
11
12        # Windowの画面サイズを設定する。
13        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
14        self.master.geometry("300x200")
15
16        # Windowを親要素として、frame Widget(Frame)を作成する。
17        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
18        frame = tk.Frame(self.master)
19        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
20        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
21        frame.pack()
22
23+       # ttk.Combobox()の外観を変更
24+       style = ttk.Style()
25+       # テーマ(名前)の指定を行う。
26+       style.theme_use('classic')
27
28        # frame Widget(Frame)を親要素として、combobox Widgetを作成する。
29        # values : 表示される様々な選択肢(バイキンマン, 食パンまん)の設定
30        self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
31
32        # frame Widget(Frame)を親要素とした場合に、combobox Widgetをどのように配置するのか?
33        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
34        self.combobox.pack()
35
36# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
37if __name__ == "__main__":
38    # Windowを生成する。
39    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
40    root = tk.Tk()
41    app = Application(master=root)
42
43    # Windowをループさせて、継続的にWindow表示させる。
44    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
45    app.mainloop()

以下の画像のように、combobox Widgetを描画します。

また現在利用中のテーマ(名前)を確認する場合は、

1from tkinter import ttk
2
3style = ttk.Style()
4# 現在利用中のテーマ(名前)を確認
5currentTheme = style.theme_use() 
6print(currentTheme)

利用できるテーマ(名前)の一覧を確認する場合は、

1from tkinter import ttk
2
3style = ttk.Style() 
4# テーマ(名前)の一覧を確認
5allTheme = style.theme_names() 
6print(allTheme)

テーマ(名前)の指定を行う場合は、

1from tkinter import ttk
2
3style = ttk.Style()
4# テーマ(名前)の指定を行う。
5style.theme_use('テーマ(名前)') 

をご利用ください。

【4種類】comboboxで活用される関数

comboboxで活用される関数として、

  • get
  • current
  • set
  • delete

の4種類が存在します。順に見ていきましょう。

get

get関数を利用すると、現在のcomboboxの値を取得できます。

1# 現在のcomboboxの値を取得する。
2# 戻り値 : 現在のcomboboxの値
3.get()

で定義されます。戻り値として、現在のcomboboxの値を返します。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所の下で、以下のようなコードを追加すると、

1  self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
2+ self.combobox.set('aaa')
3+ print(self.combobox.get())

以下の画像のようにcombobox Widgetを描画します。

current

current関数を利用すると、現在のcomboboxの値に合致する選択肢のindex(位置)を取得 or 選択肢のindex(位置)を指定して選択肢を選択できます。

1# 現在のcomboboxの値に合致する選択肢のindex(位置)を取得する場合
2# 戻り値 : 現在のcomboboxの値に合致する選択肢のindex(位置。上(0)から順に数えられる)を返す。現在のcomboboxの値が選択肢以外の場合、-1を返す。
3.current()
4
5# 選択肢のindex(位置)を指定して選択肢を選択する場合
6# 第一引数 : 選択肢のindex(位置。上(0)から順に数えられる)
7# 戻り値 : なし
8.current(数字)

で定義されます。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所の下で、以下のようなコードを追加すると、

1  self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
2+ self.combobox.set('バイキンマン')
3+ print(self.combobox.current())

以下の画像のようにcombobox Widgetを描画します。

また下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所の下で、以下のようなコードを追加すると、

1  self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
2+ self.combobox.set('バイキンマン')
3+ self.combobox.current(1)

以下の画像のようにcombobox Widgetを描画します。

set

set関数を利用すると、comboboxの値を設定できます。

1# comboboxの値を設定
2# 第一引数 : 値
3# 戻り値 : なし
4.set('値')

で定義されます。戻り値はありません。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所の下で、以下のようなコードを追加すると、

1  self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
2+ self.combobox.set('aaa')

以下の画像のようにcombobox Widgetを描画します。

delete

delete関数を利用すると、combobox内へ入力される、文字 or 文字列を削除できます。

1# 文字を削除する場合
2# 第一引数 : 削除する文字位置(左(0)からスタート)
3# 戻り値 : なし
4.delete(数字)
5
6# 文字列を削除する場合
7# 第一引数 : 削除する文字列の開始位置(左(0)からスタート)
8# 第二引数 : 削除する文字列の終わり位置
9# 戻り値 : なし
10.delete(数字, 数字)

で定義されます。戻り値はありません。

例えば下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所の下で、以下のようなコードを追加すると、

1  self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
2+ self.combobox.set('abc')
3+ self.combobox.delete(0)

以下の画像のようにcombobox Widgetを描画します。

また下準備コードのself.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))箇所の下で、以下のようなコードを追加すると、

1  self.combobox = ttk.Combobox(frame, values=('バイキンマン', '食パンまん'))
2+ self.combobox.set('abc')
3+ self.combobox.delete(0, 2)

以下の画像のようにcombobox Widgetを描画します。

まとめ

  • Tkinterで活用するcomboboxとは、Widgetの一種で様々な選択肢を表示して選んだり、文字入力できるテキストボックスを意味します。
  • 別名combobox Widgetと呼ばれます。

参考文献