Python tkinter タブを実装して画像を表示する - プログラミングについて分かりやすく解説！MAKUMAKU

まくまく

tkinterでタブを複数作成して、そこに画像やラベル、ボタンを表示してみようと思います。

一つ目のタブには画像を表示、二つ目のタブにはテキスト、三つ目のタブにはボタンを表示してみました。

まずは出力から。

出力

タブ1には画像を読み込み表示しています。

タブ2にはテキストを表示。

タブ3にはボタンを配置して、ボタンが押されたら”Hello”と出力するようにしました。

以下がサンプルプログラムとなります。

サンプルプログラム

#ライブラリのインポート
import tkinter as tk
import tkinter.ttk as ttk
import cv2
from PIL import Image, ImageTk

def resize(img):
    size = 400
    h, w = img.shape[:2]
    cvh = size*h/w
    image_resize = cv2.resize(img, (size,int(cvh)))
    return image_resize

def hello():
    print("hello")
    
#ウィンドウの作成
root = tk.Tk()
root.title("tkinter Notebook")
root.geometry("500x400")

#Notebookウィジェットの作成
nb = ttk.Notebook(root)

#タブの作成
tab1 = tk.Frame(nb, bg='#E6E6E6')
tab2 = tk.Frame(nb, bg='#E6E6E6')
tab3 = tk.Frame(nb, bg='#E6E6E6')

# タブを追加
nb.add(tab1, text="tab1")
nb.add(tab2, text="tab2")
nb.add(tab3, text="tab3")
nb.pack(expand=True, fill='both', padx=10, pady=10)


# tab2ラベル
label = ttk.Label(tab2, text="tkinter タブのテスト", background='#E6E6E6')
label.pack()

button = tk.Button(tab3, text="ボタン", command=hello)
button.grid(row=0, column=0, sticky = tk.W)

#画像読み込み
img = cv2.imread("photo1.jpg")

image_resize = resize(img)

#画像をBGR→RGB→PIL→ImageTkフォーマットへ変換
image_rgb = cv2.cvtColor(image_resize, cv2.COLOR_BGR2RGB)
image_pil = Image.fromarray(image_rgb)
image_tk  = ImageTk.PhotoImage(image_pil)

#キャンバス作成・配置
canvas = tk.Canvas(tab1, width=400, height=310)
canvas.place(x=10, y=10)
canvas.create_image(0, 0, image=image_tk, anchor=tk.NW)

root.mainloop()