【Python GUI】スクロールバーを作る方法【Tkinter】

Python
0

以前からPythonでGUIアプリを作っていますが、検索結果を表示した際に、結果件数が多い場合表示されている画面内に収まりきりません。
Tkinterを使っている場合、画面内からはみ出た場合スクロールバーが表示されません。
マウスのホイールをスクロールすることで上下の移動はできますが、非常に操作しづらいです。

そのため、今回はTkinterを使ってスクロールバーの作り方についてお話していきます。

スポンサーリンク

スクロールバーを作る手順

スクロールバーを作るための手順は以下の通りです。

  • フレームを作る
  • スクロールさせたいボックスを作る
  • スクロールバーを作る
  • それぞれの要素を設置する

では順番に説明していきます。

フレームを作る

まずはフレーム(外枠)を作ります。

フレームを作り、その中にテキストボックスやスクロールバーなどのパーツを設置します。

frame-image

 
そして、そのフレームをメインウインドウに配置するというイメージです。

mainwindow-image

 
配置したパーツの場所を移動させたい場合にそれぞれのパーツ1つずつを動かさなくてもフレームだけ移動させれば済むので便利です。

フレームの作成はTkinterのFrameを使うことで行うことができます。

import tkinter

frame1 = tkinter.Frame()
frame1.pack()

これでフレームを作成し、メインウインドウに設置することができました。

スポンサーリンク

スクロールさせたいボックスを作る

今回の例の場合はテキストボックスですね。

Tkinterでテキストボックスを作成します。

import tkinter

txtbox = tkinter.Text(frame1, width=50, height=10)
txtbox.pack()

基本的には普通にテキストボックスを作成するのと同じです。
横幅と高さを指定して作成しています。

しかし、その際frame1と先程作成したフレームを指定することで、指定したフレーム内に作成したテキストボックスを配置することができます
テキストボックスだけでなく、ボタンやラベルなど他の要素でも同じように指定ができます。

スクロールバーを作る

では今回のメインとなるスクロールバーを作っていきましょう。

スクロールバーにはTkinterのScrollbarを使います。

import tkinter

scroll = tkinter.Scrollbar(frame1, orient=tkinter.VERTICAL, command=txtbox.yview)
scroll.pack(side=tkinter.RIGHT, fill="y")

#動きをスクロールバーに反映
txtbox["yscrollcommand"] = scroll.set

上下に動く縦方向のスクロールバーです。
こちらも同じく先程作ったframe1に設置します。

もし左右に動く横方向のスクロールバーを作りたい場合は以下のようにします。

import tkinter

scroll = tkinter.Scrollbar(frame1, orient=tkinter.HORIZONTAL, command=txtbox.xview)
scroll.pack(side=tkinter.BOTTOM, fill="x")

#動きをスクロールバーに反映
txtbox["yscrollcommand"] = scroll.set

これで左右に動く横方向のスクロールバーが作れます。
スクロールバーはテキストボックスの下側に設置するようにしています。(packの際にBUTTOMを指定しているため)

 
では、少し中身について解説していきます。

スクロールバーを作成した時に設定したorientで縦に設置か横に設置かを指定しています。
縦ならVERTICAL、横ならHORIZONTALを使います。
また、他の部分でもXとYで縦横の設定をしています。(xview、xscrollcommandなど)

そして忘れてはいけないのが最後のtxtbox[“yscrollcommand”] = scroll.setの部分です。
これがないとテキストボックスとスクロールバーが紐づきませんので、スクロールしてもバーが動きませんし、スクロールバーを動かしてもスクロールしません。

スポンサーリンク

それぞれの要素を設置する

基本的に設置はpack()でできます。
フレームの中に上から順に積み上げていくイメージですね。

その際気をつけなければいけないことはpackする順番です。

packは上から順番に積み上げていくので、先にテキストボックスをpackしてしまうと、

[テキストボックス]
[スクロールバー]

という配置になってしまい、変な見た目になってしまいます。
そのため、まずスクロールバーをpackしてからテキストボックスをpackするようにしましょう。
そうすることで、

[スクロールバー]
[テキストボックス]

のような配置になりますが、スクロールバーはside=RIGHTで右側に設置するように設定してありますので、正しい配置となります。

しかし、スクロールバーの作成の際にcommand=txtbox.yviewとテキストボックスを使ってます。
そのため、テキストボックスを作成だけは先にしておかないとエラーになってしまいます。

今までは作成したら設置という風にペアで書いてきましたが、実は作成したらすぐに設置をしなければいけないという訳ではありません
そのため、まずテキストボックスを作成、そして設置はせずにスクロールバーの作成・設置、その後にテキストボックスの設置という流れで書くことにより今回の問題は解決されます。

スポンサーリンク

まとめ

テキストボックスと縦横両方のスクロールバーをそれぞれ設置するコードをまとめるとこうなります。

import tkinter

#ウインドウの作成
root = tkinter.Tk()
root.title("scrollbar")

#フレームの作成
frame1 = tkinter.Frame()
frame1.pack()

#テキストボックスの作成
txtbox = tkinter.Text(frame1, width=50, height=10)

#縦方向スクロールバーの作成
yscroll = tkinter.Scrollbar(frame1, orient=tkinter.VERTICAL, command=txtbox.yview)
yscroll.pack(side=tkinter.RIGHT, fill="y")

#横方向スクロールバーの作成
xscroll = tkinter.Scrollbar(frame1, orient=tkinter.HORIZONTAL, command=txtbox.xview)
xscroll.pack(side=tkinter.BOTTOM, fill="x")

#動きをスクロールバーに反映
txtbox["yscrollcommand"] = yscroll.set
txtbox["xscrollcommand"] = xscroll.set

#テキストボックスの設置
txtbox.pack()

#ウインドウの描画
root.mainloop()

今回スクロールさせるものがテキストボックスなので端までいくと自動で折り返されてしまうため、横方向スクロールバーは動作しませんが、リストボックスを使う場合などどうしても横が見切れてしまう際には大活躍します。

GUIアプリを作る際の参考になりましたら幸いです。

0

コメント