Kivy CatalogでKv Language
を知る
齋藤大輔
Outline
• Kvの説明
• Kivy Catalog とは
• レイアウトについて
• Float Layout
• Box Layout
• Another Layout
• Grid Layout
• Stack Layout
2
Kvとは何か?
3
Kv とは何か?
• 最低限インポートしておくもの
import kivy
from kivy.app import App
from 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
このように書く
# -*- coding: utf-8 -*-
import kivy
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.app import App
from kivy.uix.button import Button
20
このように書く
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()
21
参考: http://blog.livedoor.jp/katsuooo_l/archives/42346599.html
表示できました
22
次回の予定
Kivyを使ったアプリケーション作成
• 8月末
• テキストエディタ?
• 電卓?
• タイマー?
• ・・・・
23

More Related Content

PDF
PyconJP2017 Kivyによるアプリケーション開発のすすめ
PPTX
「Kivyによるアプリケーション開発のすすめ」の勧め
PPTX
Kivyでゲーム
PDF
PythonのGUI_2018 with NSEG
PDF
GitHub + Circle CI で幸せになろう
PDF
Circle ciで結果をslackに通知してみる
PDF
お気に入り拡張機能
PDF
会社にGitHub Enterpriseを導入してみた話
PyconJP2017 Kivyによるアプリケーション開発のすすめ
「Kivyによるアプリケーション開発のすすめ」の勧め
Kivyでゲーム
PythonのGUI_2018 with NSEG
GitHub + Circle CI で幸せになろう
Circle ciで結果をslackに通知してみる
お気に入り拡張機能
会社にGitHub Enterpriseを導入してみた話

What's hot (20)

PPTX
BITRISEを使っています
PPTX
【AWS×Deployment】TechTalk #5
PPTX
グループ制作注意
PDF
GitBucketで社内OSSしませんか?
PDF
Wantedly - 世界一"いいね!"される 求人サイトの作り方
PPTX
技術選択とアーキテクトの役割
PPTX
Hands on PhotoBlog App with WordPress REST API and App Inventor
PPTX
GitLabを骨までしゃぶりつくす@ゆるUniStudy#7
PDF
iOS対応のCIサービス「Bitrise」を使ってみた
PDF
GitHubEnterpriseからBitbucket(Stash) への移行事例
PPTX
Confluence と DITA による Webマニュアル作成フロー
PPTX
マイクロサービスにおける 非同期アーキテクチャ
PDF
JUS関西 Sphinxワークショップ@関西 Sphinx事例紹介
PPTX
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
PDF
SIerでもSphinxを使いたい! 後編
PPTX
Sphinxで作る貢献しやすい ドキュメント翻訳の仕組み
PDF
Front-end package managers
PDF
SIerでもSphinxを使いたい!総括
PDF
13_B_5 Who is a architect?
PDF
SIerでもSphinxを使いたい! 前編
BITRISEを使っています
【AWS×Deployment】TechTalk #5
グループ制作注意
GitBucketで社内OSSしませんか?
Wantedly - 世界一"いいね!"される 求人サイトの作り方
技術選択とアーキテクトの役割
Hands on PhotoBlog App with WordPress REST API and App Inventor
GitLabを骨までしゃぶりつくす@ゆるUniStudy#7
iOS対応のCIサービス「Bitrise」を使ってみた
GitHubEnterpriseからBitbucket(Stash) への移行事例
Confluence と DITA による Webマニュアル作成フロー
マイクロサービスにおける 非同期アーキテクチャ
JUS関西 Sphinxワークショップ@関西 Sphinx事例紹介
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
SIerでもSphinxを使いたい! 後編
Sphinxで作る貢献しやすい ドキュメント翻訳の仕組み
Front-end package managers
SIerでもSphinxを使いたい!総括
13_B_5 Who is a architect?
SIerでもSphinxを使いたい! 前編
Ad

Kivy CatalogでKv Languageを知る

Editor's Notes

  • #4: KivyのKVについて図を見ながら口頭で説明する およそ5分
  • #8: KivyのKVについて図を見ながら口頭で説明する およそ5分
  • #10: フロートレイアウトを使ってボタンの文字やサイズヒントなどを変更してみる 参加者にも変更をしてもらう 5分から10分
  • #11: ボックスレイアウトについて説明 次ページで使える要素も説明する 10分
  • #12: 要素について説明 いろいろ変更してみる (これ以降全レイアウトについても同じ)
  • #17: lr-tb