Kivyでレイアウトに背景画像を設定する【kv言語】

Kivyでレイアウトの背景に画像を設定するには、canvasを使う方法とImageウィジェットを使う方法があります。これらを設定した時のアスペクト比の違いについても説明しています。

Contents

レイアウト背景画像を設定する

レイアウト背景画像を設定する

レイアウトの背景に画像を設定するには2つの方法があります。

canvasを使う方法
Imageウィジェットで画像を表示する方法

canvasに背景色を設定する方法は下記の記事をご覧ください。

画像を表示する詳細については下記の記事をご覧ください。

canvasを使用した場合、デフォルトでは、画像は画面に合わせられるのでアスペクト比（縦横の比率）が崩れる場合があります。そのため、アスペクト比を保つ処理が必要です。この処理が結構大変なのでアスペクト比が崩れてしまう場合は、Imageウィジェットを使用することをお勧めします。一方で、Imageウィジェットを使用した場合は、fit_modeプロパティでアスペクト比を設定する事ができます。また、透過画像を使用した場合、背景色も一緒に設定する事ができます。

背景に画像を使う場合なるべく色々な画面サイズに合うように考慮する必要があります。デスクトップアプリの場合はまだ考慮するべきことは少ないかもしれませんが、モバイルアプリの場合は画面サイズと画像サイズに関して熟考する必要があります。画面サイズによって画像を変更するなどの処理も必要な場合もあります。

canvasで背景画像を設定する

背景色と同じようにcanvasに四角形を描画しますが、色を塗る代わりに画像を表示します。画像を表示するにはウィジェットボックスの領域があるので、その領域に四角形を作成し、その上に画像を表示するような形になります。

背景に画像を設定する場合はRelativeLayout、FloatLayout、ScatterLayoutなど任意の位置にウィジェットを配置できるレイアウト方が適している場合があります。

background_image1.py

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout

class RootWidget(RelativeLayout):
    pass

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

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

backgroundimage1.kv

<RootWidget>
    canvas.before:
        Rectangle:
            source: 'images/image-ts-002.png'
            size: self.size
            pos: self.pos
    Label:
        text: 'Set background image'
        font_size: 50
    Button:
        text: 'Enter'
        size_hint: 0.2, 0.1
        background_color: 1, 1, 1, 0.3
        pos_hint: {'center_x': 0.5, 'center_y': 0.25}

canvas.beforeのRectangleの作成の所で画像のパスを指定します。

source: 'images/image-ts-002.png'

他のウィジェットはpos_hintプロパティなどで位置を調整する必要があります。また、ウィジェットのサイズはpos_sizeプロパティなどで調整します。

Imageウィジェットで背景画像を設定する

通常の画像表示と同じです。一番下のレイヤーに画像を置くことで背景の代わりにしてるだけです。

background_image2.py

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout

class RootWidget(RelativeLayout):
    pass

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

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

backgroundimage2.kv

<RootWidget>
    # 背景色
    canvas.before:
        Color:
            rgba: 214/255, 214/255, 238/255, 1
        Rectangle:
            size: self.size
            pos: self.pos
    # 通常の画像表示方法で背景画像として使用している。
    Image:
        source: 'images/image-ts-002.png'
        fit_mode: 'scale-down' # default
    Label:
        text: 'Set background image'
        font_size: 50
    Button:
        text: 'Enter'
        size_hint: 0.2, 0.1
        background_color: 1, 1, 1, 0.3
        pos_hint: {'center_x': 0.5, 'center_y': 0.25}

このコードの背景画像には透過画像を使用してるので背景色も一緒に設定できます。

    canvas.before:
        Color:
            rgba: 214/255, 214/255, 238/255, 1
        Rectangle:
            size: self.size
            pos: self.pos

通常の画像表示と同じようにImageクラスのメソッドやプロパティが使えます。fit_modeプロパティにはアスペクト比を維持したまま引き伸ばすモードもあるので必要に応じて使い分けができます。

Image:
    source: 'images/image-ts-002.png'
    fit_mode: 'scale-down' # default

２つのアプリのアスペクト比

２つのアプリを実行結果です。アスペクト比を比べてみてください。

canvasで背景画像を設定した結果

オリジナル画像より横に広がり、画面サイズに合わせて画像が表示されます。

画面を最大化すると更に横に広がり、アスペクト比が崩れています。これは悪い例です。

Imageウィジェットで背景画像を設定した結果

こちらはアスペクト比を維持してるのでオリジナル画像のまま表示されています。

画面を最大化してもアスペクト比を維持しています。これは良い例です。しかし、ボタンをもう少し調整した方がよかった。

今回はボタンのサイズを固定化するのが正解でした。

size_hint: None, None
width: 200
height: 100

最初の画像のひよこの方がかわいい気がします。