Python Kivy — как сделать кнопку с текстом и иконкой?

Question

[mcrack]

Здравствуйте, подскажите пожалуйста как можно сделать в кнопке рядом с текстом картинку/иконку?

Пробовал Button->StackLayout->Label+Image, но так как то не красиво получается, там уже отступ не от текста, а от области label.

А я бы хотел отцентрировать содержимое кнопки по центру, в которой будет какой-то текст и иконка рядом с маленьким отступом слева от текста.

Можно ли такое сделать на Python Kivy?

Comments

[mcrack]

Ещё не разобрался как это сделать, но есть одна задумка.

В общем можно подключить иконочный шрифт, например fontawesome, затем в кнопке вставить символ шрифта и обрамить его в тег font(есть что-то такое), а так-же включить поддержку markup. Пока не пробовал, но у кого есть время попробуйте и отпишитесь, буду очень благодарен если покажете рабочий пример

Answer 1

[mcrack]

Всем привет, как обычно если сам не найдёшь ответ, ни кто не найдёт.

Придумал более менее интересный способ вставки шрифтовой иконки от Font Awesome в кнопку или в любое Label поле.

KV файл:

<Root>:
    BoxLayout:
        ButtonIcon:
            icon: "\uf2c2"
            ltext: "Text left"
            rtext: "Text right"
            text: root.iconText(self.icon, self.ltext, self.rtext)
            font_size: 25
            padding: 0.5, 0

<ButtonIcon@Button>:
    markup: True
    ltext: ""
    rtext: ""

main.py файл:

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

class Root(BoxLayout):
    def iconText(self, icon, ltext='', rtext=''):
        Ltext = ''
        if (ltext != ''):
            Ltext = "[font=Roboto]" + ltext + "[/font]  "
        Rtext = ''
        if (rtext != ''):
            Rtext = "  [font=Roboto]" + rtext + "[/font]"
        fontIcon = "[font=fonts/fontawesome-webfont.ttf]" + icon + "[/font]"
        text = Ltext + fontIcon + Rtext
        return text

class MyApp(App):
    def build(self):
        return Root()

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

Нужно создать папку fonts и положить в него файл fontawesome-webfont.ttf с сайта Font Awesome.

PS:
Тут я использовал шрифты от версии 4.7.0, таким же способом можно прикрутить любые шрифтовые иконки

*******************************
Для более опытных:
Если придумаете более удобный способ вывода иконок в кнопках, буду очень благодарен, если поделитесь своим способом.

Comments

[YagamiRaito]

У меня твой код не работает. Иконка по юникоду не выводится, вместо неё квадрат.

попробуй так:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
import fontawesome

Builder.load_string("""
<Root>:
    BoxLayout:
        ButtonIcon:
            icon: "fontawesome.icons['thumbs-up']"
            ltext: "Text left"
            rtext: "Text right"
            text: root.iconText(self.icon, self.ltext, self.rtext)
            font_size: 25
            padding: 0.5, 0

<ButtonIcon@Button>:
    markup: True
    ltext: ""
    rtext: ""
""")

class Root(BoxLayout):
    def iconText(self, icon, ltext='', rtext=''):
        Ltext = ''
        if (ltext != ''):
            Ltext = "[font=Roboto]" + ltext + "[/font]  "
        Rtext = ''
        if (rtext != ''):
            Rtext = "  [font=Roboto]" + rtext + "[/font]"
        fontIcon = "[font=fonts/fontawesome-webfont.ttf]" + eval(icon) + "[/font]"
        text = Ltext + fontIcon + Rtext
        return text

class MyApp(App):
    def build(self):
        return Root()

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

Только чё-то рисует только пальец вверх, вниз и ещё пару символов. Не знаю почему, наверное, не поддерживается автором. Список иконок в файле icons.py в папке, где установлен пайтон: Lib\site-packages\fontawesome

Answer 2

[lightmanLP]

background_normal из Button

background_normal¶Added in 1.0.4
Background image of the button used for the default graphical representation when the button is not pressed.

background_normal is a StringProperty and defaults to ‘atlas://data/images/defaulttheme/button’.

https://kivy.org/doc/stable/api-kivy.uix.button.html

Comments

[mcrack]

Я так понимаю вы предлагаете мне задать фоновую картинку с иконкой для кнопки.

Но проблема то не в этом, проблема в том, что если у тебя в кнопке и текст и рядом иконка, например чем больше текста, тем правее иконка должна быть. Если задать картинку фоном для кнопки, то текст просто будет наезжать на иконку.

[lightmanLP]

mcrack, как вариант взять FloatLayout и вывести формулу для позиции иконки.