ページレイアウト (PageLayout) 〜 Kivy

Kivy は、NUI (Natural User Interface) を持つモバイルアプリやその他のマルチタッチアプリケーションソフトウェアを開発するためのフリーでオープンソースの Python フレームワークです。MIT ライセンスのもとで配布され、Android, iOS, Linux, macOS そして Windows で動作させることができます。

Wikipedia より引用、翻訳、編集

使ったことのなかった Python の GUI ライブラリ（フレームワーク）、Kivy に興味を持ったので ^[1]、ひととおりウィジェットのサンプルを作ってみようとしています。サンプルを作っていくにあたって、どんなスタイルでコーディングするか、テンプレートみたいなものを固めていこうとあれこれ試し始めました。

今回はページレイアウトのサンプルを紹介します。

Python のコードのみのサンプルと、UI 部分を分離して Kv 言語で記述した同じ動作をするサンプルを併せて紹介しています。

下記の環境で動作確認をしています。

	Fedora Linux 36	x86_64
	python3	3.10.6-1.fc36.x86_64
	Kivy	2.1.0

トップへ

PageLayout (Python)

PageLayout は、シンプルな複数ページのレイアウトを重ねて配置するために使用されます。端にのぞいているページの一部をスライドすることでページをめくることができます。

正面に表示されているページをクリックあるいはスワイプしてページをめくるのではないので注意が必要です。

kivy_pagelayout.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.image import Image
	from kivy.uix.pagelayout import PageLayout
	Window.size = (200, 200)
	class KivyPageLayout(PageLayout):
	def __init__(self):
	super().__init__()
	self.border = 10
	self.init_ui()
	def init_ui(self):
	img_1 = Image(source='image_1.jpg')
	self.add_widget(img_1)
	img_2 = Image(source='image_2.jpg')
	self.add_widget(img_2)
	img_3 = Image(source='image_3.jpg')
	self.add_widget(img_3)
	class ExampleApp(App):
	def build(self):
	self.title = 'PageLayout'
	return KivyPageLayout()
	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_pagelayout.py hosted with ❤ by GitHub

下記の画像を表示用に使用しました。

image_1.jpg

image_2.jpg

image_3.jpg

kivy_pagelayout.py の実行例

トップへ

PageLayout (Python + Kv)

指定したファイルを読み込むようにしたかったので、ここでは Builder.load_file() を使って、指定したファイルを読み込むようにしています。

kivy_pagelayout_1.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.lang import Builder
	from kivy.uix.pagelayout import PageLayout
	Builder.load_file('kivy_pagelayout_1.kv')
	Window.size = (200, 200)
	class KivyPageLayout(PageLayout):
	pass
	class ExampleApp(App):
	def build(self):
	self.title = 'PageLayout'
	return KivyPageLayout()
	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_pagelayout_1.py hosted with ❤ by GitHub

kivy_pagelayout_1.kv

	<KivyPageLayout>:
	border: 10
	size: root.size
	Image:
	id: img_1
	source: 'image_1.jpg'
	Image:
	id: img_2
	source: 'image_2.jpg'
	Image:
	id: img_3
	source: 'image_3.jpg'

view raw kivy_pagelayout_1.kv hosted with ❤ by GitHub

kivy_pagelayout_1.py の実行例

トップへ

参考サイト

1. bitWalk's: Kivy をちょろっと使ってみた [2022-07-10]
2. Kv language — Kivy 2.1.0 documentation
3. Widgets — Kivy 2.1.0 documentation
4. PageLayout — Kivy 2.1.0 documentation

 

 

にほんブログ村