Tkinterで画面切り替え・画面遷移

10767 ワード
PythonGUI 画面移動 画面遷移 GUI Python Python テキストリンク

Tkinterで画面切り替え

超シンプルなコード紹介。
別記事( ここ )はOpenCV関係のコードで長くなっちゃったんでこっちは短くまとめる。
pillowが入ってれば動くはず。

コード

main.py
# -*- coding: utf-8 -*-
import tkinter as tk
import PIL.Image, PIL.ImageTk

class App(tk.Tk):
    # 呪文
    def __init__(self, *args, **kwargs):
        # 呪文
        tk.Tk.__init__(self, *args, **kwargs)

        # ウィンドウタイトルを決定
        self.title("Tkinter change page")

        # ウィンドウの大きさを決定
        self.geometry("800x600")

        # ウィンドウのグリッドを 1x1 にする
        # この処理をコメントアウトすると配置がズレる
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)
#-----------------------------------main_frame-----------------------------
        # メインページフレーム作成
        self.main_frame = tk.Frame()
        self.main_frame.grid(row=0, column=0, sticky="nsew")
        # タイトルラベル作成
        self.titleLabel = tk.Label(self.main_frame, text="Main Page", font=('Helvetica', '35'))
        self.titleLabel.pack(anchor='center', expand=True)
        # フレーム1に移動するボタン
        self.changePageButton = tk.Button(self.main_frame, text="Go to frame1", command=lambda : self.changePage(self.frame1))
        self.changePageButton.pack()
#--------------------------------------------------------------------------
#-----------------------------------frame1---------------------------------
        # 移動先フレーム作成
        self.frame1 = tk.Frame()
        self.frame1.grid(row=0, column=0, sticky="nsew")
        # タイトルラベル作成
        self.titleLabel = tk.Label(self.frame1, text="Frame 1", font=('Helvetica', '35'))
        self.titleLabel.pack(anchor='center', expand=True)
        # フレーム1からmainフレームに戻るボタン
        self.back_button = tk.Button(self.frame1, text="Back", command=lambda : self.changePage(self.main_frame))
        self.back_button.pack()
#--------------------------------------------------------------------------

        #main_frameを一番上に表示
        self.main_frame.tkraise()

    def changePage(self, page):
        '''
        画面遷移用の関数
        '''
        page.tkraise()

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

ざっと解説

ポイントはtkraiseというコマンド。tkraiseは指定のフレームを最前面に表示させる。
フレームを重ねて配置して、ボタンを押すたびに裏にあるフレームを持ってくる構成。
ボタンにはなんの装飾もせず超シンプルにしてあります。

図解

こんなイメージ

詳しく説明

コード中のコメントアウトに大体のことは書いてあるけど一応、、

まずメインフレーム(main_frame)と移動先のフレーム(frame1)を作成。
2つのフレームをgridメソッドを使って座標(0,0)に配置
gridを使うことで重ねて配置することが出来る。
タイトルラベルについては特に言うことなし。
ボタンウィジェットはcommandにchangePage関数を指定する。
changePage関数は引数にフレーム名をとる。
因みにボタンウィジェットのcommandに引数(selfはカウントしない)をとる関数を指定する場合、
command=lambda :関数
とする必要がある。

おわり

かなり短いコードにしたので分かりやすいと思う。
今まで僕が見た中で最短だもの。
もちろんtkraiseを使わずその都度ページを表示したり消したりするやり方もあるけど一番簡単なのはtkraiseだと思う。