Zenn
💬

CustomTkinterのチュートリアル触ってみた

2024/12/18に公開
Python
customtkinter
tech

CustomTkinterとは？

なんか詳細は分からないけど、tkinterより見た目がかっこよく作れる！という認識。
まずはチュートリアルを触ってみる。
https://customtkinter.tomschimansky.com/

準備

まずはモジュールのインストールから

pip install customtkinter

チュートリアルはビギナーとアドバイスの2種類公開されていたのでアドバイスの方をやってみます。
ビギナーはオブジェクト指向的な考え方がいらないものでアドバンスはオブジェクト指向的な考え方を使います。
アドバンスはそこまで高度ではなさそうだったのでアドバンスです。

作るもの


こんなやつを作る
マイナスボタンとプラスボタンのクリックで数字を加減する
ソースコードは公式ドキュメントのチュートリアルを参照

ソースコード解説

全体的に

typingは型ヒントに使います。なんか便利な奴と思ってもらえばOKです。
import customtkinterが今回使うライブラリのインポートです
また、作成するアプリはクラスで扱います。クラス名はアプリ名とかでもいいかもしれません。サンプルはそうしてましたw
またそのクラスにcustomtkinter.CTkFrameを継承します。
継承のイメージはcustomtkinterの機能をくっつけるよみたいなイメージで大丈夫です。正確にはオブジェクト指向的な考え方を学んだほうが早いかも・・・・

from typing import Union, Callable
import customtkinter
class FloatSpinbox(customtkinter.CTkFrame):
    クラスの処理

パーツの設定

アプリ自体の設定

def __init__()でアプリの大きさなどの設定をします。
引数のwidthとheightでアプリ画面の大きさを指定します。そのほかの引数はそこまで気にしなくても今のところ大丈夫です。

def __init__(self, *args,
                 width: int = 100,
                 height: int = 32,
                 step_size: Union[int, float] = 1,
                 command: Callable = None,
                 **kwargs):

その他細かい設定をここでしています

self.configure(fg_color=("gray78", "gray28"))  
self.grid_columnconfigure((0, 2), weight=0)  
self.grid_columnconfigure(1, weight=1)

パーツの設定

ボタンの設定
customtkinter.CTkButton()でボタンのオブジェクトを生成します。
第一引数のselfはボタンを設置するパーツと思ってください。ここでのselfはアプリの画面自体を指します。

textはボタンに表示させる文字列を指定します。

widthとheightはボタンの大きさを指定します。

commandはボタンをクリックしたときに実行する処理を指定します。今回はself.subtract_button_callback()関数を指定しています。

ボタンパーツの設定が完了したらそれをフレーム（アプリの画面）に設置する必要があります。設置方法は座標で直接指定する方法もあるみたいですが、チュートリアルではグリット（.grid）を使って設置設定を行います。
padx=(3, 0), pady=3は設置するパーツ間隔を設定してます。

self.subtract_button = customtkinter.CTkButton(self, text="-", width=height - 6, height=height - 6,command=self.subtract_button_callback)
self.subtract_button.grid(row=0, column=0, padx=(3, 0), pady=3)

このように他のパーツも追加していきます。

以下の部分はテキストボックスを設置しているコードです。

self.entry = customtkinter.CTkEntry(self, width=width - (2 * height), height=height - 6, border_width=0)
self.entry.grid(row=0, column=1, columnspan=1, padx=3, pady=3, sticky="ew")

HTMLとかはテキストボックスというみたいですが、今回のcustomtkinterではentryと呼ぶらしい・・・
設置設定のsticky="ew"は文字の配置を指定しています。東西南北を英語にしてその頭文字を取ってます。

また、テキストボックス（entry）は初期化を行う。初期化というより正確にはテキストボックスに値を代入している。第一引数で最初の何文字目に入れるかを指定して第二引数で実際に挿入する値を指定する。

self.entry.insert(0, "0.0")

クリック時の処理関数

加算も減算も処理に大きな差は無かったので減算部分の関数を解説します。

def subtract_button_callback(self):
    if self.command is not None:
        self.command()
    try:
        value = float(self.entry.get()) - self.step_size
        self.entry.delete(0, "end")
        self.entry.insert(0, value)
    except ValueError:
        return

最初のif self.command is not None:はそこまで現段階で気にしなくても大丈夫です。
単純にself.commandがNoneじゃなかったらself.commandをNoneにするだけです。
これ以降がメインです。

処理内容は

  1. 現在のテキストボックス内の値を取得（self.entry.get()）して小数に変換、変換したものから設定した値を減算する
  2. テキストボックス内のインデックス０～ラストまでを削除（self.entry.delete(0, "end")）
  3. 新規に計算した結果を挿入する（self.entry.insert(0, value)）
    処理はtryとexceptを使って例外処理も行います。

テキストボックスの値を取得する

def get(self) -> Union[float, None]:
    try:
        return float(self.entry.get())
    except ValueError:
        return None

テキストボックスに値を挿入する

def set(self, value: float):
    self.entry.delete(0, "end")
    self.entry.insert(0, str(float(value)))

メイン処理

該当コード
app = customtkinter.CTk()

spinbox_1 = FloatSpinbox(app, width=150, step_size=3)
spinbox_1.pack(padx=20, pady=20)

spinbox_1.set(35)
print(spinbox_1.get())

app.mainloop()
  1. アプリの本体を作る
app = customtkinter.CTk()
  1. アプリ画面にくっつけるパーツを作る
    FloatSpinboxクラスをインスタンス化して横幅とstep_sizeで加減量を設定
    spinbox_1.pack(padx=20, pady=20)でアプリ本体にパーツの設置を行う
spinbox_1 = FloatSpinbox(app, width=150, step_size=3)
spinbox_1.pack(padx=20, pady=20)
  1. テキストボックスの初期値を設定＆初期値をコンソールに表示
    今回は初期値35で設定されています。
spinbox_1.set(35)
print(spinbox_1.get())
  1. アプリの起動（表示）
app.mainloop()

まとめ

難しい
でも、なんとなくPythonの文法を分かってる人なら結構サクサク使えるかもしれない・・・・

Discussion