Python Kivy | iconと文字が入ったbuttonの実装

Question

正方形型のiconとその下部にテキストが複合したボタンを実装しようとしております。

iconの画像を張り付けたボタンとテキストがあるボタンを組み合わせで下部のコードを実行したところ、ボタンとボタンの境界がはっきりと見えてしまうものとなってしまいました。

iconとテキストを全体として画像化すれば境界がないものを作れるのですがテキストを変更するたびに画像をまた作成しなければならないのでなるべく避けたいです。

下記のコードで境界をなくす方法、もしくはiconとテキストを含むボタンを実装する他の方法があれば教えてもらいたいです。

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen, NoTransition
from kivy.properties import StringProperty, ObjectProperty, BooleanProperty
from kivy.core.text import LabelBase, DEFAULT_FONT

LabelBase.register(DEFAULT_FONT, "ipaexg.ttf")
sm = ScreenManager(transition=NoTransition())


class Test(App):

    def build(self):
        sm.add_widget(TestScreen(name='test'))
        return sm

class TestScreen(Screen):
    image = StringProperty('cogwheel-setting.png')
    print(image)

    def on_enter(self):
        pass

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

test.kv

<TestScreen>:
    BoxLayout:
        orientation: "vertical"
        canvas.before:
            Color:
                rgba: 0.7, 1, 0.3, 1
            Rectangle:
                pos: self.pos
                size: self.size

        Label:
            size_hint: 1, 1
            text: 'TITLE'
            font_size: 150
            color: 1, 1, 1, 1

        FloatLayout:
            size_hint: 1, 1
            pos_hint: {"x":0, "top":0}
            canvas.before:
                Color:
                    rgba: 0.7, 1, 0.3, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
            BoxLayout:
                orientation: "horizontal"
                pos_hint: {"x":0, "top":1}
                Label:
                    size_hint_x: 4
                BoxLayout:
                    orientation: "vertical"
                    size_hint_x: 3
                    Button:
                        size_hint_y: 12
                        color: 0, 0, 0, 0
                        background_color: 1, 1, 1, 1
                        Image:
                            size: self.parent.width, self.parent.height
                            y: self.parent.y
                            x: self.parent.x
                            source: root.image
                    FloatLayout:
                        size_hint_y: 2.25
                        Button:
                            pos_hint: {"x":0, "top":1}
                            background_color: 1, 1, 1, 1
                            text:'button text'

                    Label:
                        color: 1, 0, 0, 1
                        size_hint_y: 2.25
                        background_color: 0, 0, 0, 1
                Label:
                    size_hint_x: 4

Answer 1

Buttonに画像を含めたい場合

Button:
    Image:

というやり方だと、できなくはないのですが文字列の位置と画像の位置の計算を自力でしないといけないのでかなり面倒くさいです。画像の下に文字列を表示したいのならそれをBoxLayoutで書き表す方が楽ですね。

BoxLayout:
    orientation: 'vertical'
    Image:
    Label:

そしてButtonとして機能させる為にButtonBehaviorを継承させます。

from kivy.factory import Factory

class CustomButton(Factory.ButtonBehavior, Factory.BoxLayout):
    pass

<CustomButton>:
    orientation: 'vertical'
    Image:
    Label:

ButtonBehaviorはButtonの 見た目 じゃなくて 機能 だけ欲しいという時の物で、今回にぴったりだと思います。

Comments

[DailyYamazaki]

レイアウトにbuttonの機能を継承できるのですね。
大変参考になりました。ありがとうございます。