KivyのレイアウトやLabelに背景色を設定する【kv言語】

KivyのレイアウトやUIウィジェットの背景を設定する方法を説明します。レイアウトにはbackground-colorのようなプロパティは存在しないので少し工夫が必要になります。レイアウトだけではなくLabelなどのウィジェットもこの方法で背景色を設定できます。Buttonは何故かbackgroud_colorのプロパティが存在します。

レイアウト背景色の設定

レイアウトの背景色を設定するには今のところ２つの方法があります。どちらがいいのかはわかりませんが公式サイトの方ではcanvasで色を塗る方法が説明されています。

• レイアウトにcanvasで色を塗る方法
• Windowクラスで画面の色を設定する方法

レイアウトにCanvasで色を塗る方法

canvasはGraphicsクラスを使用した描画をするための機能になります。背景色を設定する方法はレイアウト上に四角形を描画して色を塗りつぶしています。

サンプルコード

canvasを使用した背景を塗るサンプルになります。カラー指定についての詳細は下記のページを参照してください。

background_color1.py

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class RootWidget(BoxLayout):
    pass

class BackgroundColor1(App):
    def build(self):
        return RootWidget()

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

background_color1.kv

#:import hex kivy.utils.get_color_from_hex

<RootWidget>:
    orientation: 'vertical'
    canvas.before:
        Color:
            rgba: hex("#d8bfd8") # 16進数
            #rgba: 42/255, 100/255, 89/255, 1 # RGBA
        Rectangle:
            size: self.size
            pos: self.pos

    Label:
        text: 'label'
        font_size: 50
        color: 1, 0, 0, 1

コード解説

#:import hex kivy.utils.get_color_from_hex
rgba: hex("#d8bfd8") # 16進数

16進数用の見本なのでRGBAで指定する場合は削除してください。

    canvas.before:
        Color:
            rgba: 42/255, 100/255, 89/255, 1 # RGBA
        Rectangle:
            size: self.size
            pos: self.pos

canvas.beforeは描画ブロックを作成するためのプロパティになります。このブロックを作ることでウィジェットの描画が行われる前にこのブロックを先に実行します。このコードの場合は、RectangleとColorを指定して、ウィジェットの描画より先に四角形を作成しておくことで背景として利用できます。

ColorにはRGBAで背景色を指定しています。透明度は効かなかったので淡い色などは16進数の方がいいかもしれません。

Rectangle.sizeにはRectangleのサイズを指定します。通常、widthとheightを指定しますが、self.sizeを指定することで自身のウィジェットのサイズを取得して画面領域全体のサイズを指定しています。ここでのselfにあたるウィジェットはRootWidget（＝BoxLayout）になります。

Rectangle.posはRectangleの位置を指定します。通常、x座標とy座標を指定しますがself.posも同様に自身のウィジェットの位置を取得しています。

Windowクラスで画面の色を設定する方法

次にWindowクラスで背景色を設定する方法になります。

サンプルコード

background_color2.py

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.core.window import Window
from kivy.utils import get_color_from_hex

#Window.clearcolor = (42/255, 100/255, 89/255, 1) #RGBAで指定する方法
Window.clearcolor = get_color_from_hex("#d8bfd8") #16進数で指定

class RootWidget(BoxLayout):  
    pass

class BackgroundColor2(App):
    def build(self):
        return RootWidget()

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

background_color2.kv

<RootWidget>:
    orientation: 'vertical'

    Label:
        text: 'label'
        font_size: 50
        color: 1, 0, 0, 1

コード解説

from kivy.core.window import Window

Window.clearcolor = (42/255, 100/255, 89/255, 1) #RGBAで指定する方法

Windowクラスをインポートし、Window.clearcolorで画面の色を設定しています。

from kivy.utils import get_color_from_hex

Window.clearcolor = get_color_from_hex("#d8bfd8") #16進数で指定

16進数を設定するには、utilsクラスのget_color_from_hexメソッドを使います。

Windowクラスのその他の設定は下記の記事をご覧ください。