前回はkivyをパソコンに導入して、アプリを作成するところを紹介しました。
今回はボタンを押したら文字を変更するアプリを実装してみます。kivyのインストールがまだの場合は前回紹介しているセットアップを終えてから続きを進めてもらえるといいと思います。
ボタンの実装
それでは、前回のコードから修正を加えてボタンをとりあえず実装してみます。
コードは以下になります。
前回との違いはfrom kivy.uix.label import Labelがfrom kivy.uix.button import Buttonに変更されて、sampleApp.buildの戻り値がButtonに変更されています。
from kivy.app import App
from kivy.uix.button import Button
class sampleApp(App):
def build(self):
return Button(text='Hello World!')
if __name__ == '__main__':
sampleApp().run()
実行すると、以下のようにウィンドウ全体にボタンが表示されます。ボタンをクリックすると画面がフラッシュしたような挙動をします。
何かアクションを加えてみる
それでは次にボタンを押したときのアクションを足してみます。
ボタンを押したら文字列がコンソールに出力されるようにします。
というわけでsampleAppクラスにメソッドを追加して以下のコードを動かしてみます。
from kivy.app import App
from kivy.uix.button import Button
class sampleApp(App):
def build(self):
return Button(on_press=self.pressed, text='Hello World!')
def pressed(self, btn):
print('pressed')
if __name__ == '__main__':
sampleApp().run()
実行するとボタンを押したときにコンソール画面にpressedメソッドで指定した文字列が出力されます。
BoxLayoutを使ってみる
ここまでは画面いっぱいに一つのボタンを用意しましたが、これでは他のUIを組み込むことができません。
そこで、BoxLayoutを使って画面に複数のUIを実装してみたいと思います。
BoxLayoutを使えば水平・垂直方向にUIを配置することができるようになります。
BoxLayout()の引数のorientationで配置する方向を設定することができます。(vertical:垂直方向、horizontal:水平方向)
また、add_widget()メソッドを使って、UIを配置することになります。
前回使ったラベルと組み合わせたコードが以下のとおりです。
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
class sampleApp(App):
def build(self):
layout = BoxLayout(orientation='vertical')
self.lb = Label(text='Hello World!')
self.bt = Button(on_press=self.pressed, text='Push')
layout.add_widget(self.lb)
layout.add_widget(self.bt)
return layout
def pressed(self, btn):
self.lb.text = 'pressed'
if __name__ == '__main__':
sampleApp().run()
sampleApp.pressedのアクションをprint関数からラベルの表示を変更するテキストに変更しました。
実行すると、以下のようにボタンを押すとラベルのテキストが変更されます。
ボタンを押しているときだけテキストを変更する
先程までの実装だとボタンを押したらテキストは変更されたままになるので、今度はボタンを押している間だけテキストが変更されるようにしてみます。
やり方としてはButton()オブジェクトのオプションでon_pressを指定したときと同様に、on_releaseにメソッドを指定するとボタンを離したときのメソッドを指定します。
self.bt = Button(on_press=self.pressed, on_release=self.released, text='Push')
また、sampleAppクラスに新たに以下のメソッドを追加します。
def released(self, btn):
self.lb.text = 'Hello World!'
実行すると押している間だけ、ラベルのテキストが変更されてボタンを離すと元のテキストに戻るようになります。
まとめ
今回はボタンを装備して、そのボタンに対して何かアクションを付ける方法を紹介しました。
ここまでのことをやれば例えばRaspberry Piを使ってGPIOの操作を実装することもできます。
次回はもっと自由自在にUIのレイアウトができるkv languageについて紹介します。
