Kivyでボタンの位置と大きさを決める (Python ボタン作成)

本日の課題と目標

ボタンを作成

ボタンを押したら実行

今後の目標

カウントダウンを作る

はじめに

今回は pvファイル(後日詳しくやります)を使わずにコードを書いていきます。ボタンを押すと「Hello World」と表示されるだけのプログラムです。

調べるのに苦労したところは、ボタンの位置と大きさの設定とkvファイルなしでのやり方です。

プログラムのコード①

# フル画面を解除して画面の幅と高さを設定
from kivy.config import Config
Config.set('graphics', 'fullscreen', '0')
Config.set('graphics', 'width', '300')
Config.set('graphics', 'height', '150')

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.button import Button


class MainApp(App):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # ラベルとボタンの初期設定
        self.label = Label(text="", font_size=32)
        self.button = Button(text="OK", font_size=24, on_press=self.pressed)

    def pressed(self, *args):
        # ボタンが押された時の処理
        self.label.text = "Hello World"

    def build(self):
        # 縦に並べるレイアウト
        boxlay = BoxLayout(orientation="vertical")
        # 上からラベル、ボタン
        boxlay.add_widget(self.label)
        boxlay.add_widget(self.button)
        return boxlay


if __name__ == '__main__':
    MainApp().run()

f:id:Start_python:20191113184913g:plain

解説

とりあえず実行すると動きますが正直よくわかってません。クラスについても勉強不足です。

プログラムの流れ

まずkivy.configでウィンドウの設定

フル画面を解除して画面の幅と高さを決めます。

各種モジュールをインポートします。

初期のラベル文字をなしにして、ボタンをクリック時にラベルの文字を「Hello World」にするというプログラムです。

BoxLayoutで上半分はラベル、下半分はボタンに設定しています。位置や大きさは割合で大雑把には設定できますが、座標で細かく設定する方法はわかりませんでした。スマホやタブレット用なら座標設定はあまり必要ないのかもしれません。

プログラムのコード②

次はボタンの位置や大きさを座標で細かく設定できるパターンです。

Builderクラスを使用してPython内に直接kv言語を記述しています。

# フル画面を解除して画面の幅と高さを設定
from kivy.config import Config
Config.set('graphics', 'fullscreen', '0')
Config.set('graphics', 'width', '300')
Config.set('graphics', 'height', '150')

# ラベルとボタン情報を設定
from kivy.lang import Builder


Builder.load_string('''
<TextWidget>:
    # ラベル
    Label:
        id: label1
        size: 300,100
        pos: 0,50
        font_size: 32
        text: root.text    # root(TextWidget)の変数テキストの値を取得

    Button:
        id: button1
        size: 100,50
        pos: 100,10
        text: "OK"
        font_size: 24
        on_press: root.buttonClicked()  # ボタンをクリックした時にpython側の関数を呼ぶ
''')


from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty 


class TextWidget(Widget):
    # プロパティの追加
    text = StringProperty()

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = ''

    # ボタンをクリック時
    def buttonClicked(self):
        self.text = 'Hello World'


class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        # ウィンドウのタイトル名
        self.title = 'test'

    def build(self):
        return TextWidget()


if __name__ == '__main__':
    TestApp().run()