bitWalk's: グリッドレイアウト (GridLayout) 〜 Kivy

2022-08-13

グリッドレイアウト (GridLayout) 〜 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

トップへ

GridLayout (Python)

GridLayout は、子ウィジェットをマトリックス状に配置します。利用可能なスペースを取って列と行に分割し、できたセルにウィジェットを追加します。そのため配置するウィジェットが配置する位置を指定するのではなく、列数、行数（どちらか一方）を指定したグリッドエリアにウィジェットを流し込むような使い方になります。

kivy_gridlayout.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.boxlayout import BoxLayout
	from kivy.uix.button import Button
	from kivy.uix.gridlayout import GridLayout

	Window.size = (200, 200)


	class KivyGridLayout(GridLayout):
	def __init__(self):
	super().__init__()
	self.cols = 3
	self.init_ui()

	def init_ui(self):
	btn_a = Button(text='A')
	btn_a.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_a)
	btn_b = Button(text='B')
	btn_b.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_b)
	btn_c = Button(text='C')
	btn_c.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_c)
	btn_d = Button(text='D')
	btn_d.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_d)
	btn_e = Button(text='E')
	btn_e.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_e)
	btn_f = Button(text='F')
	btn_f.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_f)
	btn_g = Button(text='G')
	btn_g.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_g)

	def on_button_pressed(self, instance):
	print('ボタン %s がクリックされました。' % instance.text)


	class ExampleApp(App):
	def build(self):
	self.title = 'GridLayout'
	return KivyGridLayout()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_gridlayout.py hosted with ❤ by GitHub

kivy_gridlayout.py の実行例

トップへ

GridLayout (Python + Kv)

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

kivy_gridlayout_1.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.lang import Builder
	from kivy.uix.gridlayout import GridLayout

	Builder.load_file('kivy_gridlayout_1.kv')
	Window.size = (200, 200)


	class KivyGridLayout(GridLayout):
	def on_button_pressed(self, instance):
	print('ボタン %s がクリックされました。' % instance.text)


	class ExampleApp(App):
	def build(self):
	self.title = 'GridLayout'
	return KivyGridLayout()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_gridlayout_1.py hosted with ❤ by GitHub

kivy_gridlayout_1.kv

	<KivyGridLayout>:
	cols: 3

	Button:
	id: btn_a
	text: "A"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_b
	text: "B"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_c
	text: "C"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_d
	text: "D"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_e
	text: "E"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_f
	text: "F"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_g
	text: "G"
	on_press: root.on_button_pressed(self)