はじめに
今回からは、Python の Kivy ライブラリを使用してKivyのチュートリアルを実施していきます。
Widget 系の説明は
Python Kivyの使い方① ～Kv Languageの基本～
上記サイトを参考にさせていただきました。
最終的には Kivy と Yolov8 を使用して画像認識アプリの完成を目指します。
前提条件
前提条件は以下の通りです。
- Python がインストールされている
- Windows11 (Ubuntuでも可？)
Kivy のインストール
kivy には pyenv が推奨されているので、先に pyenv をインストールします。
windows の場合
powershell で以下のコマンドを実行してください。こちらのgithubを参考にしました。
python -m pip install pyenv-win --target $HOME\\.pyenvUbuntu の場合
Ubuntu の場合は、bashrc に登録が必要になります。こちらのgithubを参考にしました。
git clone https://github.com/pyenv/pyenv.git ~/.pyenv
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc
source ~/.bashrc
pyenv install 3.10.6 #今回は3.10.6ですが、labelImgを動かすための変更が面倒な方は3.10以外で。
pyenv global 3.10.6pyenv の有効化
pyenv がインストール出来たら、仮想環境を作成していきます。
mkdir kivy-dev
python -m venv venv310
source ./venv310/scripts/activate #Linux
./venv310/Scripts/Activate.ps1 #Windowsこれで準備は完了です。
Kivy のインストール
Kivy のインストール方法を説明します。今回はこちらの公式サイトを参考にしました。
python -m pip install "kivy[full]" kivy_examplesこれで完了です。
Kivy の実行例
画面を表示してみる
test_1.py を作成して動かしてみます。
from kivy.app import App
from kivy.uix.widget import Widget
class MyWidget(Widget):
pass
class MyApp(App):
def build(self):
return MyWidget()
if __name__ == '__main__':
MyApp().run()以下のように黒い画面が表示されます。
ボタンを表示する
画面にボタンを表示してみます。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
class MyApp(App):
def build(self):
layout = BoxLayout(padding=10)
button = Button(text='My first button')
layout.add_widget(button)
return layout
if __name__ == '__main__':
MyApp().run()上記を実行すると画面にでかいボタンが現れます。
BoxLayout の中に Button を埋め込んでいます。
レイアウトの詳細な説明はこちらの公式サイトにあります。
ボタンサイズ変更
ボタンサイズは、size_hint_x, size_hint_y で調整します。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
class MyWidget(Widget):
pass
class MyApp(App):
def build(self):
layout = BoxLayout(padding=10)
button1 = Button(text='My first button', size_hint_y=0.2, size_hint_x=0.5)
layout.add_widget(button1)
return layout
if __name__ == '__main__':
MyApp().run()上記を実行すると、以下のようになります。
最下部にボタンが表示されました。
Kivy では座標原点が左下になる関係で、下部にボタンが表示されます。
ボタン位置変更
ボタン位置を変更するには、pos を使用します。
今回はボタンに直接適用させず、BoxLayout に適用します。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
class MyWidget(Widget):
pass
class MyApp(App):
def build(self):
layout = BoxLayout(padding=10, pos=(250,250))
button1 = Button(text='My first button',
size_hint_y=0.2,
size_hint_x=0.5)
layout.add_widget(button1)
return layout
if __name__ == '__main__':
MyApp().run()上記を実行すると、以下のようになります。
初期画面サイズは 640×480 なので、おおよそ真ん中あたりに BoxLayout の左上の頂点がセットされました。
ボタンを増やす
ボタンを増やすには、BoxLayout に追加していくだけです。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
class MyWidget(Widget):
pass
class MyApp(App):
def build(self):
layout = BoxLayout(padding=10)
button1 = Button(text='My first button',
size_hint_y=0.2,
size_hint_x=0.5)
button2 = Button(text='My second button', size_hint_y=0.2)
layout.add_widget(button1)
layout.add_widget(button2)
return layout
if __name__ == '__main__':
MyApp().run()上記を実行すると、以下のようになります。
ボタンを縦方向に配置
2個のボタンを水平方向ではなく、垂直方向に配置していきます。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
class MyWidget(Widget):
pass
class MyApp(App):
def build(self):
layout = BoxLayout(padding=10, orientation="vertical")
button1 = Button(text='My first button',
size_hint_y=0.2,
size_hint_x=0.5)
button2 = Button(text='My second button', size_hint_y=0.2)
layout.add_widget(button1)
layout.add_widget(button2)
return layout
if __name__ == '__main__':
MyApp().run()上記を実行すると、以下のようになります。
縦方向に配置できました。
レイアウトを kv language で表記
VSCode に Kivy-Snippet をインストール しておいてください。
kivy では、今まで test_1.py に表記したレイアウトを kv language で表現できます。ファイル拡調子は .kv です。
まずは、test_2.py を作成します。
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.lang.builder import Builder
Builder.load_file('test_2.kv')
class MyWidget(BoxLayout):
pass
class MyApp(App):
def build(self):
return MyWidget()
if __name__ == '__main__':
MyApp().run()これだけです。
次に、test_2.kv を用意します。
<MyWidget>:
orientation:'vertical'
size_hint_y: 0.5
size_hint_x: 0.5
Button:
text: 'my first button'
Button:
text: 'my second button'以上です。
早速、実行してみてください。
おわりに
今回は BoxLayout 上でボタンを様々な方法で配置しました。
次回は FloatLayout を説明しつつ、他の Widget についても説明できればと思います。
コメント