YouTubeでDerekさんによるKivy Tutorialを学ぶ②（kivy.uix.floatlayoutとkivy.uix.floatlayout）

引き続き、２回目、kivy.uix.floatlayoutとkivy.uix.floatlayoutについてとなります。

ということで、Windowサイズの？％という指定のfloatlayoutを使って見ましょう。
画面はこうなります。


では、コードはどうなっているかというと、main.pyはこちら

# main.py
# -*- coding: utf-8 -*-

import kivy
kivy.require("1.9.1")

from kivy.app import App
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
from kivy.uix.floatlayout import FloatLayout

resource_add_path('../fonts')
# ベースフォントを変更する
LabelBase.register(DEFAULT_FONT, 'komorebi-gothic.ttf')

class FloatingApp(App):
    def build(self):
        return FloatLayout()

if __name__ == "__main__":
    FloatingApp().run()

floating.kvは、こちら

# floating.kv

# size_hint defines the widget width (0-1) representing
# a percentage of 100% and height of the window
# size_hintは、ボタンなどのwidgetのサイズをWindowのサイズの何％という指定を行なっている。
# が、実際は％ではなく0−1の範囲で指定
<CustButton@Button>:
    font_size: 32
    color: 0, 0, 0, 1
    size: 150, 50
    background_normal: ''
    background_down: 'red.png'
    background_color: .88, .88, .88, 1
    size_hint: .4, .3
 
# pos_hint represents the position using either x, y, left,
# right, top, bottom, center_x, or center_y
# pos_hintは、widgetのどこをwindowのどこ（0−1）に置くのかを指定している。
# x、yは、座標上の位置
# right（右端）,left（左端）,top（上端）、bottom（下端）で指定する方法
# center_x（左右の中心）,center_y（上下の中心）で指定する方法

<FloatLayout>:
    CustButton:
        text: "Top Left"
        pos_hint: {"x": 0, "top": 1}
    CustButton:
        text: "Bottom Right"
        pos_hint: {"right": 1, "y": 0}
    CustButton:
        text: "Top Right"
        pos_hint: {"right": 1, "top": 1}
    CustButton:
        text: "Bottom Left"
        pos_hint: {"left": 1, "bottom": 0}
    CustButton:
        text: "Center"
        pos_hint: {"center_x": .5, "center_y": .5}

そうすると、画面のサイズを変えてもこんな感じで自動的に修正されます。

ポイントは、２つ。size_hintとpos_hintです。

size_hintは、ボタンなどのwidgetのサイズをWindowのサイズの何％という指定を行なっている。なお、実際は％ではなく0−1の範囲で指定

pos_hintは、widgetのどこをwindowのどこ（0−1）に置くのかを指定している。x、yは、座標上の位置、right（右端）,left（左端）,top（上端）、bottom（下端）で指定する方法、center_x（左右の中心）,center_y（上下の中心）で指定する方法となっています。

続いて、GridLayoutです。これは表形式なので、wxPythonみたいな感じです。
下の例では、kivy.require(“1.9.1”)と、バージョンを下げて指定していますが動きます。ここは、最低限必要とされるバージョンの指定ということです。

# main.py
# -*- coding: utf-8 -*-

import kivy
kivy.require("1.9.1")

from kivy.app import App
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout

resource_add_path('../fonts')
# ベースフォントを変更する
LabelBase.register(DEFAULT_FONT, 'komorebi-gothic.ttf')

class GridApp(App):
    def build(self):
        return GridLayout()

if __name__ == "__main__":
    GridApp().run()

続いて、grid.kvです。
<GridLayout>:のところで、Gridの行や列の数、隙間の指定を行なっています。
表の中に埋め込むボタンをそれぞれ指定しています。size_hintを使わない場合はNoneとなります。

# grid.kv

# Define the number of columns and rows
# Define the spacing between children in pixels
# 表形式のレイアウトなので、行の数、列の数をそれぞれしています。
# Spacingで表の中の箱の隙間（スペース）の指定、paddingで、Windowと表の間の隙間の指定もできます。

<GridLayout>:
    cols: 2
    rows: 2
    spacing: 5
    padding: 15
 
    # Set the size by passing None to size_hint_x
    # and then pass the width
    # size_hint(windowの？%指定)を使わない場合は、size_hint_x: Noneとします。
    # 何も指定しないと上下左右均等に割り振られます。

    Button:
        font_size: 32
        text: "1st"
        size_hint_x: None
        width: 200
    Button:
        font_size: 24
        text: "2nd"
    Button:
        font_size: 28
        text: "3rd"
        size_hint_x: None
        width: 200
    Button:
        font_size: 16
        text: "4th"

そして画面は、こちらになります。

続く