本記事では、Pythonライブラリの一つであるkivyにてアプリ開発を行う上で、必要なkvファイル(.kv)作成からpythonファイルとkvファイルを用いたコードの書き方についてご紹介させて頂きます。ソースコードエディタ(VSCode)の準備がまだの方は、以下を参考にしてもらえればと思います。
✅ Builder.load_file(”)でkivyファイルの読み込み
✅ サンプルプログラム : 解説あり
✅ kivy言語にて活用されるプロパティの種類(一部紹介)
kv言語とは?
Pyhtonのライブラリであるkivy特有の言語になり、kivylangもしくは、kivy言語とも言われたりします。
kv言語は、pythonファイル以外にCSSに似たような形でコードを書いていきますが、宣言的な記述方法のため、とてもわかりやすく、変更やテストも効率よく実施出来る特徴を持っています。
pythonファイルにて読み込み、実行する事で、プログラムに反映させる事が可能です。
kvファイル作成/コード解説
続いては、kvファイルの作成方法とコードの解説をさせて頂きます。
まずは、お好きな場所で構いませんので、
次にコードをコピペし、pyファイルを作成してください。
# pythonファイル
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.widget import Widget
# 日本語を適応させる
import japanize_kivy
# kvファイルを読み込む : Buliderをimportしていないと使えないので注意。
Builder.load_file('./test.kv')
class Test(Widget):
# ウィジェット用のクラスを定義, 引数にWidgetを設定
class MySample(App):
# メインクラスを定義, 引数にAppをを設定
def build(self):
# ウィジェットクラスを返す
return Test()
if __name__ == '__main__':
# プログラムを実行
MySample().run()
準備できましたら、早速、kvファイルの作成をしていきます。
kvファイルのコード記述におけるイメージも確認しつつ、以下と同様にコードを記述してみてください。
なお、test.kvは、kivy_sample.pyと同じ場所に配置しましょう。
<Test>:
BoxLayout:
size: root.size
Label:
text: 'Testです。'
Button:
text: 'ボタンです。'[解説]
1行目 :
pythonファイルに記述したウィジェットクラスを指定していますが、pythonファイルに記述した内容と一致しないとkvファイルが読み込まれませんので、気を付けましょう。
2行目 :
レイアウトの指定をしています。今回はBoxLayoutですが、簡単にいうと複数のウィジェットを垂直方向にも水平方向にも配置できるレイアウトになりまして、デフォルトでは、横方向に左から順に並ぶようになってます。
他にもFloatLayoutやGridLayoutなどございますが、詳細は本記事では、省かせて頂きますので、気になる方は、以下をご覧ください。
FloatLayout :
https://pyky.github.io/kivy-doc-ja/api-kivy.uix.floatlayout.html
GridLayout :
https://kivy.org/doc/stable/api-kivy.uix.gridlayout.html
3行目 :
レイアウトに対する設定を記述しています。Layoutのサイズ(大きさ)を指定していますが、数値での指定も可能です。
4行目 :
Labelウィジェットの定義です。
5行目 :
Labelウィジェットに対する設定を記述しています。 今回は、textプロパティですので、ラベル上に表示させるテキストを値として設定しています。プロパティは、複数記述が可能です。
6行目 :
Buttonウィジェットの定義です。
7行目 :
Buttonウィジェットに対する設定を記述しています。 今回は、textプロパティですので、ボタン上に表示させるテキストを値として設定しています。プロパティは、複数記述が可能です。
プログラムの実行
プログラムの実行を行い、結果を確認しましょう。
ターミナルもしくはコマンドプロンプトにて、次のコマンドを打ちましょう。
◇ コードの実行
python3 kivy_sample.py[ 結果 ]
サンプル
kivyファイルの書き方は、イメージできましたでしょうか??
私の方で準備しましたサンプルプログラムを公開させて頂きますので、参考にして頂ければと思います。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
from kivy.core.window import Window
from kivy.lang import Builder
# 日本語を適用させる
import japanize_kivy
# sample.kvを読み込む
Builder.load_file('./sample.kv')
# Windowの背景色を変更 (黒 → 白)
Window.clearcolor = (1, 1, 1, 1)
# ウィジェットクラス
class Sample(Widget):
# プロパティの追加
text = StringProperty()
def __init__(self, **kwargs):
super(Sample, self).__init__(**kwargs)
# 初期値の設定
self.text = 'kivyの練習です！'
# コールバック用の関数を定義
def callback(self, **kwargs):
# 呼び出された際に、textの値を更新
self.text = 'kivy : 基礎学習'
# メインクラス
class Test(App):
def build(self):
# ウィジェットクラスを返す
return Sample()
if __name__ == "__main__":
# アプリを起動
Test().run()<Sample>:
FloatLayout:
size: root.size
Image:
source: "logo_utubou_01.png"
size_hint: (1,0.2)
pos_hint: {"x":0, "y": 0.65}
Label:
text: root.text
font_size: 40
pos_hint: {"x": 0.01, "y": 0.4}
size_hint: (1,0.2)color: "blue"
Button:
text: 'クリック'
background_color: "blue"
size_hint: (0.7,0.2)
pos_hint: {"x":0.144, "y": 0.2}
color: "white"
font_size: 50
background_normal: ""
on_press: root.callback()◇ プロパティ —–
text → 表示させるテキストを指定
background_color → 背景色を指定
size, size_hint → サイズを指定
pos_hint → 配置場所を指定 ( x, y, top, right )
color → 文字色を指定
font_size → フォントサイズを指定
background_normal → デフォルトの背景色を解除する際などに使用
source → ファイルパスを指定
————————-
◇ イベント —–
on_press → ボタンをクリックした際に実行される
————————-
[ 結果 ]
コメント