Kivyでwidgetの幅が変わるのに合わせてテキストのフォントサイズを変えるの巻

はじめに

Kivyにおいて、ウィンドウサイズに合わせてwidgetの幅が変化するようにしているときに、それに合わせてtextのフォントサイズも変えたいねっていう時がありまして。

Python側で関数を設定せずにKv言語側でフォントサイズをいじる方法のメモです。

Python側で関数を作ってもいいんでしょうけど、widgetへのアクセスルートがややこしいときがあって、kivy言語で直接いじれたら楽やん。ていう。

ええっと、こんな感じで、テキストが見切れるのを、、、

こうする、と。

というわけで、ウィンドウの幅を変えた時にwidgetの幅が変わるのに合わせて一緒にテキストのフォントサイズを変えてtextの全体を確認できるようにできるようになりました。

やりかた

なんというか、font_sizeについて、

defaultで表示したいフォントサイズ × self.width(widgetのwidth) / widgetのdefaultのwidth

としただけです。

対応するPythonのコードを次に示します。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.lang import Builder


Builder.load_string('''
<Otameshi>
    Label:
        text: 'Flexible Font Size'
        font_size: 200*self.width/1600 
''')

#give class the name of Otameshi 
class Otameshi(BoxLayout):
    pass

#give class the name of App 
class FlexibleFontSizeApp(App):

    def __init__(self, **kwargs):
        super(FlexibleFontSizeApp, self).__init__(**kwargs)

    def build(self):
        return Otameshi()

if __name__ == '__main__':
    FlexibleFontSizeApp().run()

でも、このままだとwidgetの幅がdefaultのサイズより大きくなったときにフォントサイズが大きくなりすぎるので、

ある一定幅以下のwidget widthになったときにだけfont_sizeが小さく変わるようにしてみます。

font_sizeのところを

font_size: 80 if 80*self.width/800 >= 80 else  80*self.width/800

にして、

default のフォントサイズが80で、widget widthが800以上の時は80を維持して、800より狭くなったらそれに合わせてfont_sizeを小さくするようにしてみます。

でけた。

ついでに、他も試してみます。

ここではLabelの背景色とtextの内容とfont_sizeを一緒に変化させてみます。

でけた。

コードは以下です。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.lang import Builder

#added below for making rounded button
from kivy.graphics import Color, Rectangle


Builder.load_string('''
<Otameshi>
    BoxLayout:
        orientation: 'vertical'
        Label:
            text: 
                'Blue' if self.width >= 1200\
                else 'Yellow' if self.width >= 800\
                else 'Red' 
            font_size: 80 if 80*self.width/800 >= 80 else 80*self.width/800
            background_color:(0,0,0,0)
            background_normal:''
            canvas.before:
                Color:
                    rgba:(0/255,0/255,255/255,0.6) if self.width >= 1200\
                    else (255/255,255/255,0/255,0.6) if self.width >= 800\
                    else (255/255,0/255,0/255,0.6)
                Rectangle:
                    size: self.size
                    pos: self.pos
''')
#give class the name of Otameshi 
class Otameshi(BoxLayout):
    pass

#give class the name of App 
class FlexibleFontSizeApp(App):

    def __init__(self, **kwargs):
        super(FlexibleFontSizeApp, self).__init__(**kwargs)

    def build(self):
        return Otameshi()

if __name__ == '__main__':
    FlexibleFontSizeApp().run()

以下、追加部分の説明です。

from kivy.graphics import Color, Rectangle

canvasを使って背景を変えるので、ColorとRectangleを入れて、

  　　　　　　　　　text: 
                'Blue' if self.width >= 1200\
                else 'Yellow' if self.width >= 800\
                else 'Red' 

textは、Label widgetの幅が1200以上で’Blue’, 800以上は’Yellow’、それ以外は’Red’を表示するようにして、

            background_color:(0,0,0,0)
            background_normal:''

backgroundを一旦解除してやってから、

           canvas.before:
                Color:
                    rgba:(0/255,0/255,255/255,0.6) if self.width >= 1200\
                    else (255/255,255/255,0/255,0.6) if self.width >= 800\
                    else (255/255,0/255,0/255,0.6)
                Rectangle:
                    size: self.size
                    pos: self.pos

canvas.beforeのColorをLabel widgetの幅によって色を変えて、、、というRectangleで背景色を描画しています。

他にもいろいろ使いどころがありそうですね。

おわりに

フォントサイズを変更するなどの簡単なことならKv言語のほうでもいろいろ制御できることがわかってきました。（もっと合理的でシンプルな方法があるかもしれませんよ。。。）

とにかく、Kivyを触っていて、あれこれどうやるの？となったときに方法が簡単に見つからない（見つかったように思えても今度は理解が追いつかない）ことが多いので、

こういったちょっとしたことでも分かったことを残していけたらと思っています。

実施環境

Python 3.9.4

Kivy                     2.0.0

macOS Catalina ver.10.15.7