kivy catalogでkv languageを知る

23
Kivy Catalog で Kv Language ででで でででで

Upload: daisuke-saito

Post on 15-Apr-2017

268 views

Category:

Engineering


0 download

TRANSCRIPT

Page 1: Kivy CatalogでKv Languageを知る

Kivy Catalogで Kv Languageを知る

齋藤大輔

Page 2: Kivy CatalogでKv Languageを知る

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

2

Page 3: Kivy CatalogでKv Languageを知る

Kvとは何か?

3

Page 4: Kivy CatalogでKv Languageを知る

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

4

Page 5: Kivy CatalogでKv Languageを知る

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

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

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

5

Page 6: Kivy CatalogでKv Languageを知る

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

Page 7: Kivy CatalogでKv Languageを知る

Kvとは何か?

7

Page 8: Kivy CatalogでKv Languageを知る

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

8

Page 9: Kivy CatalogでKv Languageを知る

Float Layout

9

Page 10: Kivy CatalogでKv Languageを知る

Box Layout

10

Page 11: Kivy CatalogでKv Languageを知る

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

Page 12: Kivy CatalogでKv Languageを知る

Another Layout

12

Page 13: Kivy CatalogでKv Languageを知る

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

Page 14: Kivy CatalogでKv Languageを知る

Grid Layout

14

Page 15: Kivy CatalogでKv Languageを知る

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

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

• rows• グリッド内の行数

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

15

Page 16: Kivy CatalogでKv Languageを知る

Stack Layout

16

Page 17: Kivy CatalogでKv Languageを知る

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

Page 18: Kivy CatalogでKv Languageを知る

TIPS日本語の表示

Page 19: Kivy CatalogでKv Languageを知る

19

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

Page 20: Kivy CatalogでKv Languageを知る

20

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

from kivy.core.text import LabelBase, DEFAULT_FONT

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

Page 21: Kivy CatalogでKv Languageを知る

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

Page 22: Kivy CatalogでKv Languageを知る

22

表示できました

Page 23: Kivy CatalogでKv Languageを知る

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

23