Buttonウィジェットの配置【python tkinter sqlite3で家計簿を作る】

④ Buttonウィジェットの配置【python tkinter sqlite3で家計簿を作る】

前回の投稿からかなり時間が空いてしまったが、今回からGUI部分の作成をしてみたい。
（現在、司法書士の資格取得に向けて勉強中！笑）

設計図
f:id:memopy:20170528101451p:plain

Tkinterの基本

始めにTkinterの一番簡単な画面を作ってみる。

# -*- coding: utf-8 -*-
# モジュールのインポート
import tkinter
# 空の画面を作成して表示
root = tkinter.Tk()

# ～～～アプリの処理はこの間に記述する～～～

# 画面（アプリ）にイベント（ユーザからの入力・操作など）を待機させる
root.mainloop()

空の画面が表示された！
f:id:memopy:20170526201709p:plain

python2系と3系の違い

ちなみに、Python2系では、

import Tkinter

と、2系と3系では、宣言するモジュール名が異なっている。
他の資料を参照する場合、pythonのバージョンに注意。ただし、モジュール名以外（メソッド名など）は基本的に変わっていないようだ。

モジュール名の省略

また、tkinterは、モジュール名が長いので、今後、次のように相関名？を用いて省略する。

import tkinter as tk
root = tk.Tk()
root.mainloop()

他方、from ~ import * 句を用いると、モジュール名をすべて省略できる。

from tkinter import *
root = Tk()
root.mainloop()

しかし、これでは何のモジュールを参照しているのか分かりづらくなるので、ここでは使わないこととする。

画面のタイトル設定とサイズ設定

先ほど設定した空の画面をカスタマイズして、目的のアプリを作成することになる。
始めに画面のタイトル表示設定とサイズ設定

# -*- coding: utf-8 -*-
import tkinter as tk
root = tk.Tk()

# タイトル設定
root.title("家計簿アプリ")

# 画面サイズ(横x縦ピクセル)の設定
# ※ xは、ASCII小文字のx
root.geometry("300x300")

root.mainloop()

タイトルが設定されて、サイズが大きくなった画面が作成された
f:id:memopy:20170526205916p:plain

ウィジェットの配置

画面上に配置できるウィジェット（部品）には次のようなものがある（一部抜粋）

ウィジェット名	クラス名	説明
ボタン	Button	ボタンを押して何らかの処理をさせるもの
フレーム	Frame	画面内にウィジェットを格納する仕切り
ラベル	Label	画面内に表示させる文字
ラベルフレーム	LabelFrame	ラベル付きのフレーム
ラジオボタン	Radiobutton	丸いタイプの選択式ボタン複数の選択をすることはできない
チェックボタン	Checkbutton	チェックボックスタイプのボタン複数の選択をすることができる
リストボックス	Listbox	文字列の一覧
エントリー	Entry	ユーザから１行の文字列を入力させる欄
テキスト	Text	ユーザから複数行の文字列を入力させる欄
メニュー	Menu	画面上部のメニューバー

ボタン Button

# ボタンを生成（第1引数は、ボタンを配置する場所。第2引数以降は、オプションを設定する。）
button1 = tk.Button(root,text="入力")
# ボタンを画面に自動配置
button1.pack()

「入力」と表示されたボタンが配置された。
f:id:memopy:20170527095205p:plain

Buttonのオプション（抜粋）

オプション名	入力型式	説明
activebackground	色	アクティブ状態のときの背景色
activeforeground	色	アクティブ状態のときの文字色
anchor	center(ﾃﾞﾌｫﾙﾄ), n,ne,e,se,s,sw,w,nw	ボタン内における文字の配置場所中心(center)からの方位角
background bg	色	背景色
borderwidth bd	integer	ボタン枠の幅
command	コールバック関数	ボタンがクリックされたときの処理
font	font_object	文字のフォント
foreground fg	string	文字色
height	integer	ボタンの縦の長さ
justify	center(ﾃﾞﾌｫﾙﾄ),left,right	複数行のテキストの文字寄せ
relief	raised(ﾃﾞﾌｫﾙﾄ), flat,sunken,groove,ridge	ボタンの形状
state	normal(ﾃﾞﾌｫﾙﾄ),disabled	ボタンの状態 normal:通常 disabled:ボタンが押せない状態
text	string	ボタンに表示させる文字
width	integer	ボタンの横の長さ

オプションの指定方法

ボタンを作成するときに、引数として指定する方法（通常）

button1 = tk.Button(root,text="入力",fg="red",height=2,width=5)

ボタンを作成した後に、オプションを指定する方法

button1 = tk.Button(root)
button1["text"]="入力"
button1["fg"]="red"
button1["height"]=2
button1["width"]=5
button1.pack()

または、configメソッドを用いて、オプションを指定することができる。

button1.config(fg="red")

ウィジェットの配置

ウィジェットの配置方法を変更するには、３つのメソッドがある。

packメソッド	ウィジェットを順番に配置する
placeメソッド	ウィジェットを指定した位置に配置する
gridメソッド	ウィジェットを指定したグリッドに配置する

今回はpackメソッドを用いて、ウィジェットを配置していく。

anchorオプションを用いて、ボタンの配置場所を指定する。
anchorに指定する値は、中心(center)から見て、n,ne,e,se,s,sw,w,neの値を入れる。

button1 = tk.Button(root,text="入力")
button1.pack(anchor="nw")
button2 = tk.Button(root,text="表示")
button2.pack(anchor="nw")
button3 = tk.Button(root,text="終了")
button3.pack(anchor="ne")

必要なボタンがそれぞれ左上と右上に表示された。
f:id:memopy:20170527212708p:plain
次にsideオプションを用いて、ボタンの配置方向を指定する。
sideオプションは、top(ﾃﾞﾌｫﾙﾄ),left,bottom,rightを入力し、それぞれ配置する順序を指定できる。

# -*- coding:utf-8 -*-
import tkinter as tk
root = tk.Tk()
root.title("家計簿アプリ")
root.geometry("300x300")

button1 = tk.Button(root,text="入力")
button1.pack(anchor="nw",side="left") # 左から配置
button2 = tk.Button(root,text="表示")
button2.pack(anchor="nw",side="left") # 左から配置
button3 = tk.Button(root,text="終了")
button3.pack(anchor="ne")

root.mainloop()