Python入門 (7) - KivyによるGUIの作成

「Kivy」によるPythonのGUIの作成方法をまとめました。

前回

1. Kivy

「Kivy」はPythonでGUIを作成するためのライブラリです。

Kivy: Cross-platform Python Framework for NUI

Welcome to Kivy — Kivy 2.0.0 documentation

2. Kivyのインストール

「Kivy」のインストール方法は、次のとおりです。

$ pip install kivy
$ pip install japanize-kivy

3. ラベル

「ラベル」を利用するコードは、次のとおりです。

【label.py】

import japanize_kivy # 日本語表示
from kivy.app import App
from kivy.core.window import Window
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.label import Label
from kivy.metrics import dp

# ウィンドウサイズの指定
Window.size = (240, 240)

# アプリの定義
class HelloWorldApp(App):
    # ビルド時に呼ばれる
    def build(self):
        # レイアウトの生成
        self.root = FloatLayout()
       
        # ラベルの追加
        self.label = Label(size_hint = (None, None))
        self.label.bind(size = self.label.setter('text_size'))
        self.label.text = 'ハローワールド' # テキスト
        self.label.font_size = dp(16) # フォントサイズ
        self.label.bold = False # 太字
        self.label.italic = False # イタリック
        self.label.color = (1,1,1,1) # 文字色
        self.label.pos = (dp(0), dp(240-24)) # 位置
        self.label.size = (dp(240), dp(24)) # サイズ
        self.label.halign = "left"  # 水平揃え
        self.label.valign = "middle" # 垂直揃え
        self.root.add_widget(self.label)

        # レイアウトを返す
        return self.root

# メインの定義
if __name__ == '__main__':
    HelloWorldApp().run()

◎ 日本語表示の有効化
日本語表示を行うには、japanize_kivyのインポートが必要です。​

◎ ウィンドウサイズの指定
ウィンドウサイズは、Window.sizeで指定します。

◎ レイアウトの生成
レイアウトはウィジェットを配置するコンポーネントです。

・AnchorLayout : ウィジェットを上下左右と中央に配置。
・BoxLayout : 同サイズのウィジェットを垂直・水平方向に配置。
・FloatLayout : ウィジェットを絶対座標で配置。
・RelativeLayout : ウィジェットを相対座標で配置。
・GridLayout : ウィジェットをグリッド状に配置。
・PageLayout : ウィジェットをページ状に配置。
・ScatterLayout : ウィジェットをRelativeLayoutと同様に配置。マウスによるサイズ変更も可能。
・StackLayout : 個別サイズのウィジェットを垂直・水平方向に配置。

◎ ラベルの追加
ラベルのサイズと水平・垂直揃えを反映させるには、「size_hint = (None, None)」「self.label.bind(size = label.setter('text_size'))」が必要になります。

self.label = Label(size_hint = (None, None))
self.label.bind(size = label.setter('text_size'))

主なラベルの属性は、次のとおりです。

・text : テキスト
・font_size : フォントサイズ
・bold : 太字
・italic : イタリック
・color : 文字色
・pos : 位置
・size : サイズ
・halign : 水平揃え (auto,left,center,right,justify)
・valign : 垂直揃え (bottom,middle,top)

Label — Kivy 2.0.0 documentation

3. ボタン

「ボタン」を利用するコードは、次のとおりです。

【button.py】

import japanize_kivy
from kivy.app import App
from kivy.core.window import Window
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.metrics import dp

# ウィンドウサイズの指定
Window.size = (240, 240)

# アプリの定義
class ButtonApp(App):
    # ビルド時に呼ばれる
    def build(self):
        # レイアウトの生成
        self.root = FloatLayout()
       
        # ボタンの追加
        self.button = Button(size_hint = (None, None), background_normal = '')
        self.button.text = 'OK' # テキスト
        self.button.font_size = dp(16) # フォントサイズ
        self.button.bold = False # 太字
        self.button.italic = False # イタリック
        self.button.color = (1,1,1,1) # 文字色
        self.button.background_color = (0,0,1,1) # 背景色
        self.button.pos = (dp(40), dp(90)) # 位置
        self.button.size = (dp(160), dp(40)) # サイズ
        self.button.bind(on_press=self.on_press) # ボタン押下イベント
        self.root.add_widget(self.button)

        # レイアウトを返す
        return self.root
       
    # ボタン押下時に呼ばれる
    def on_press(self, source):
        self.button.text = 'ボタンを押しました'

# メインの定義
if __name__ == '__main__':
    ButtonApp().run()

◎ ボタンの追加
ボタンのサイズと色を反映させるには、「size_hint = (None, None)」「background_normal = ''」が必要になります。

self.button = Button(size_hint = (None, None), background_normal = '')

主なボタンの属性は、次のとおりです。

・text : テキスト
・font_size : フォントサイズ
・bold : 太字
・italic : イタリック
・color : 文字色
・background_color : 背景色
・pos : 位置
・size : サイズ

Button — Kivy 2.0.0 documentation

4. テキスト入力

「テキスト入力」を利用するコードは、次のとおりです。

【textinput.py】

import japanize_kivy # 日本語表示
from kivy.app import App
from kivy.core.window import Window
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.metrics import dp

# ウィンドウサイズの指定
Window.size = (240, 240)

# アプリの定義
class TextInputApp(App):
    # ビルド時に呼ばれる
    def build(self):
        # レイアウトの生成
        self.root = FloatLayout()
       
        # テキスト入力の追加
        self.textInput = TextInput(size_hint = (None, None), multiline=False)
        self.textInput.text = '' # テキスト
        self.textInput.font_size = dp(16) # フォントサイズ
        self.textInput.pos = (dp(40), dp(96)) # 位置
        self.textInput.size = (dp(160), dp(24)) # サイズ
        self.textInput.bind(on_text_validate=self.on_enter) # テキスト入力確定イベント
        self.root.add_widget(self.textInput)

       # レイアウトを返す
       return self.root
       
    # テキスト入力ド確定時に呼ばれる
    def on_enter(self, source):
        print(source.text)

# メインの定義
if __name__ == '__main__':
    TextInputApp().run()

◎ テキスト入力の追加
テキスト入力のサイズを反映させるには、「size_hint = (None, None)」が必要になります。

self.textInput = TextInput(size_hint = (None, None), multiline=False)

主なテキスト入力の属性は、次のとおりです。

・text : テキスト
・font_size : フォントサイズ
・pos : 位置
・size : サイズ

Text Input — Kivy 2.0.0 documentation

次回