kivy catalogでkv languageを知る

Kivy Catalogで Kv Languageを知る

齋藤大輔

Outline• Kvの説明• Kivy Catalog とは•レイアウトについて• Float Layout• Box Layout• Another Layout• Grid Layout• Stack Layout

2

Kvとは何か？

3

Kv とは何か ?•最低限インポートしておくものimport kivyfrom kivy.app import Appfrom kivy.uix.widget import Widget

4

Kvとは何か？• Kvファイルの名前付けのルール名前の規則からMyApp -> my.kv

ファイル名を指定するBuilder.load_file('path/to/file.kv')

Kvを直接記述するBuilder.load_string(kv_string)

5

Kvとは何か？from kivy.lang import Builder

w = Builder.load_string(''‘Widget: height: self.width / 2. if self.disabled else self.width x: self.y + 50''')

6

Kvとは何か？

7

Kivy Catalogとは？• Kvを使ったレイアウトの例などを見ることが出来る•インタラクティブに変更も可能• すぐに更新される• いろいろ試せる

8

Float Layout

9

Box Layout

10

Box Layout• orientation• ‘vertical’ or ‘horizontal’

• padding• [padding_left, padding_top, padding_right, padding_bottom]• [padding_horizontal, padding_vertical]• default [0, 0, 0, 0]

• spacing• ピクセル単位での子要素の間隔

11

Another Layout

12

Another Layout

• anchor_x• 水平のアンカー位置

• anchor_y• 垂直のアンカー位置

• padding• [padding_left, padding_top, padding_right, padding_bottom]• [padding_horizontal, padding_vertical]• default [0, 0, 0, 0]

13

Grid Layout

14

Grid Layout• cols• グリッド内の列数

• padding• [padding_left, padding_top, padding_right, padding_bottom]• [padding_horizontal, padding_vertical]• default [0, 0, 0, 0]

• rows• グリッド内の行数

• spacing• ピクセル単位での子要素の間隔

15

Stack Layout

16

Stack Layout• orientation• ‘lr-tb’, ‘tb-lr’, ‘rl-tb’, ‘tb-rl’, ‘lr-bt’, ‘bt-lr’, ‘rl-bt’ and ‘bt-rl’

• padding• [padding_left, padding_top, padding_right, padding_bottom]• [padding_horizontal, padding_vertical]• default [0, 0, 0, 0]

• spacing• ピクセル単位での子要素の間隔

17

TIPS日本語の表示

19

日本語を扱う•基本は対応していない•フォントを追加することにより表示可能

20

このように書く# -*- coding: utf-8 -*-import kivy

from kivy.core.text import LabelBase, DEFAULT_FONT

from kivy.app import Appfrom kivy.uix.button import Button

21

このように書くLabelBase.register(DEFAULT_FONT, 'VL-Gothic-Regular.ttf')

class MyApp(App): def build(self): return Button(text='こんにちは ', font_size=“50pt")

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

参考 : http://blog.livedoor.jp/katsuooo_l/archives/42346599.html

22

表示できました

次回の予定Kivyを使ったアプリケーション作成• 8月末•テキストエディタ？•電卓？•タイマー？•・・・・

23