Python kivy スライダーの使い方 - MAKUMAKU - テキストをリアルタイムで更新

まくまく

PythonのGUIアプリ作成ライブラリ kivyを用いて、スライダーを実装してみようと思います。

スライダーを使えるようになると、パラメーターを変更したり、グラフを更新したりするのがマウスやタッチ操作で行えるようになります。しかもその操作をリアルタイムで反映できます。今回はスライダーがどんなものなのか、ざっくりと知って頂くためラベルに表示されたテキストサイズをスライダーを使って変更してみようと思います。

スライダーサンプル

プログラムを実行すると、このようなウインドウが立ち上がります。中央に「Change The Size!!」と書かれたテキスト、下部にはスライダーとフォントサイズを表示しています。

スライダーを動かすと、中央の文字サイズがリアルタイムに変化します。右下のテキストの値（フォントサイズ）も同様に変化します。

スライダーを左側に動かすと、テキストは小さくなります。

サンプルプログラム

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)
#kvファイルの読み込み
Builder.load_file("slider.kv")

class MyLayout(Widget):
    def change_font_size(self, *args):
        self.slide_text2.text = str(int(args[1]))
        self.slide_text.font_size = str(int(args[1]))

class DispimageApp(App):
    def build(self):
        self.title = "window"
        return MyLayout()

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

kvファイル

#ファイル名: slider.kv
<MyLayout>
    canvas.before:
        Color:
            rgba: 57/255, 147/255, 221/255, 1
        Rectangle:
            pos: self.pos
            size: self.size

    slide_text: slider_label
    slide_text2: slider_label2

    BoxLayout:
        orientation: "vertical"
        size: root.width, root.height
        padding: 20
        spacing: 20

        Label:
            id: slider_label
            text: "Change The Size!!"
            font_size: 32
            size_hint: (1, 2)

        GridLayout:
            cols:2

            Slider:
                min: 1
                max: 100
                step: 1
                orientation: "horizontal"
                on_value: root.change_font_size(*args)
                size_hint: (4, 1)

            Label:
                id: slider_label2
                text: "32"
                font_size: 32
                size_hint: (1, 1)

kvファイル、28行目の「Slider:〜」がスライダーの設定です。

minとmaxでスライダーのレンジ、Stepは変化量です。

orientationは、スライダーの向きを決定。

on_valueで、関数を呼び出し値を更新しています。