Raspberry Piの環境でKivyを使っています。今回は画面遷移についてです。その画面遷移のためにScreen Managerというwidgetを使ってみます。
今現在のRaspberry PiでのKivyの環境設定については以下で書きました。必要な場合はこちらを参照して下さい。
Screen Manager widget
Screen Managerは、Kivyのwidgetの一つで、アプリケーションの複数の画面を管理します。このwidgetを使って画面遷移を行います。
今現在のマニュアルページは以下です。これを見ながらやってみます。
Screen Manager – Kivy
このマニュアルページにあったサンプルプログラムをkvファイルとpyファイルへ分解してみました。
ファイル名をsm01.kvとして以下を作成しました。
<MenuScreen>:
BoxLayout:
Button:
text: 'Goto settings'
on_press: root.manager.current = 'settings'
Button:
text: 'Quit'
<SettingsScreen>:
BoxLayout:
Button:
text: 'My settings button'
Button:
text: 'Back to menu'
on_press: root.manager.current = 'menu'
ファイル名をsm01.pyとして以下を作成しました。
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
# Create both screens. Please note the root.manager.current: this is how
# you can control the ScreenManager from kv. Each screen has by default a
# property manager that gives you the instance of the ScreenManager used.
# Declare both screens
class MenuScreen(Screen):
pass
class SettingsScreen(Screen):
pass
class SM01App(App):
def build(self):
# Create the screen manager
sm = ScreenManager()
sm.add_widget(MenuScreen(name='menu'))
sm.add_widget(SettingsScreen(name='settings'))
return sm
if __name__ == '__main__':
SM01App().run()
‘MenuScreen’ と ’SettingsScreen’ という2画面の例のようです。
基本的には、ScreenManagerは一度に1つのScreenのみを表示して、トランジション（画面切り替え時のアニメーション的な表示）がいろいろと制御出来るようです。
上記2つのファイルを同一のディレクトリに配置して実行します。静止画ですが、以下のように実行されました。
これが起動時のMenuScreenで、Goto settingsのボタンでSettingsScreenに移行します。
確かにこれで2画面の移行が出来るのですが、これだけですと少し分かりにくいような気もしました。そこで以下のような画面遷移のプログラムを作成してみました。一つの書き方の例として見て頂ければと思います。
ファイル名をsm02.kvとして以下を作成しました。
#: import SlideTransition kivy.uix.screenmanager.SlideTransition
<Widget>:
font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'
<Display>:
BoxLayout:
orientation: "vertical"
BoxLayout:
size_hint: 1, None
height: '48dp'
Button:
text: '画面1を表示'
on_release:
sm.transition = SlideTransition(direction='right')
sm.current = 'screen_one'
Button:
text: '画面2を表示'
on_release:
sm.transition = SlideTransition(direction='left')
sm.current = 'screen_two'
ScreenManager:
id: sm
Screen_One:
Screen_Two:
<Screen_One>:
name: 'screen_one'
Button:
background_color: 1,0,0,1
text: '画面1(のボタン)'
<Screen_Two>:
name: 'screen_two'
Button:
background_color: 0,0,1,1
text: '画面2(のボタン)'
ファイル名をsm02.pyとして以下を作成しました。
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout
from kivy.config import Config
Config.set('graphics', 'width', '600')
Config.set('graphics', 'height', '480')
class Display(BoxLayout):
pass
class Screen_One(Screen):
pass
class Screen_Two(Screen):
pass
class SM02App(App):
def build(self):
return Display()
if __name__ == '__main__':
SM02App().run()
上記2つのファイルを同一のディレクトリに配置して実行しました。以下のように実行出来ました。動画にしましたので画面移行が見えると思います。
書き方としては、kvファイルの方に詳細も記述しています。簡単なメニューバー的なボタンを上部に配置して、その動作でScreenManagerを制御している書き方です。
あとは、SlideTransitionを使って左右の動きを定義しています。このSlideTransitionか他のTransitionを使って画面移行時の動きを定義するようです。例えば以下では、RiseInTransitionを使ってみました。左右の動きではなく重なって切り替わる感じです。
#: import RiseInTransition kivy.uix.screenmanager.RiseInTransition
<Widget>:
font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'
<Display>:
BoxLayout:
orientation: "vertical"
BoxLayout:
size_hint: 1, None
height: '48dp'
Button:
text: '画面1を表示'
on_release:
sm.transition = RiseInTransition()
sm.current = 'screen_one'
Button:
text: '画面2を表示'
on_release:
sm.transition = RiseInTransition()
sm.current = 'screen_two'
ScreenManager:
id: sm
Screen_One:
Screen_Two:
<Screen_One>:
name: 'screen_one'
Button:
background_color: 1,0,0,1
text: '画面1(のボタン)'
<Screen_Two>:
name: 'screen_two'
Button:
background_color: 0,0,1,1
text: '画面2(のボタン)'
今回は2画面ですが、実際には必要な画面のレイアウトをそれぞれ定義して、Screen Managerでいろいろと制御するようになると思います。
以上、基本的な使い方までですが、Screen Managerでの画面遷移についてでした。
今回はここまでとします。
