まくまく
PythonのGUIアプリ作成ライブラリ kivyで作成したボタンのサイズを変更してみようと思います。
まずはpyファイルとkvファイルから。
コンテンツ
サイズ変更前
pyファイル
#ライブラリのインポート
from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.lang import Builder
#ウインドウの幅と高さの設定
Config.set('graphics', 'width', 600)
Config.set('graphics', 'height', 300)
#1でサイズ変更可、0はサイズ変更不可
Config.set('graphics', 'resizable', 1)
Builder.load_file("button_size.kv")
class MyLayout(Widget):
pass
class DispimageApp(App):
def build(self):
self.title = "window"
return MyLayout()
if __name__ == '__main__':
DispimageApp().run()
kvファイル
#ファイル名: button_size.kv
<MyLayout>
BoxLayout:
orientation: "horizontal"
size: root.width, root.height
padding: 20
Button:
text: "Button-1"
background_normal: ""
#RGBA
background_color: (244/255,208/255,111/255,1)
Button:
text: "Button-2"
background_normal: ""
#RGBA
background_color: (255/255,136/255,17/255,1)
Button:
text: "Button-3"
background_normal: ""
#RGBA
background_color: (157/255,217/255,210/255,1)
Button:
text: "Button-4"
background_normal: ""
#RGBA
background_color: (57/255,47/255,90/255,1)
出力
上のプログラムを実行すると、ウインドウが作成され4つのボタンが表示されます。
この状態では、ボタンの大きさは指定していないため、それぞれが均等に配置されていることが分かると思います。次はこのボタンのサイズを変えてみましょう。
pyファイルはそのままで、kvファイルのみ以下に変更します。
サイズ変更後
kvファイル
#ファイル名: button_size.kv
<MyLayout>
BoxLayout:
orientation: "horizontal"
size: root.width, root.height
padding: 20
Button:
text: "Button-1"
size_hint: (None, None)
size: 100,50
background_normal: ""
#RGBA
background_color: (244/255,208/255,111/255,1)
Button:
text: "Button-2"
size_hint: (None, None)
width: 100
height: 50
background_normal: ""
#RGBA
background_color: (255/255,136/255,17/255,1)
Button:
text: "Button-3"
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: (None, None)
width: 100
height: 50
background_normal: ""
#RGBA
background_color: (157/255,217/255,210/255,1)
Button:
text: "Button-4"
background_normal: ""
#RGBA
background_color: (57/255,47/255,90/255,1)
出力
ボタンの大きさを変えることができました。
Button-1
Button-1では、次のコードを追加しました。「size」で幅と高さを指定しています。
size_hint: (None, None)
size: 100,50
Button-2
Button-2では、次のコードを追加しました。さっきのButton-1では幅と高さを1行にまとめていますが、今回は幅と高さを個別で指定しています。どちらでもOKです。
size_hint: (None, None)
width: 100
height: 50
Button-3
Button-3では、「pos_hint」を追加することでX軸、Y軸方向の位置を指定しています。
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: (None, None)
width: 100
height: 50
Button-4
Button-4は、サイズ指定をしていません。
追記
先日の記事で紹介した「size_hint」でもサイズを変更することができます。記事ではラベルやテキストインプットを対象としていますが、もちろんボタンでもOKです。＞＞＞Python kivy ラベルの表示比率を変更する方法
kivy関連の記事はこちらにまとめています。＞＞＞Python kivy 使い方まとめ
