O widget Label em Kivy


O widget Label codificado em Python no Kivy

Neste post vamos aprender a trabalhar com o widget Label utilizando apenas a linguagem Python. Tudo o que é apresentado aqui pode também ser codificado na linguagem Kv, mas é importante conhecer ambas as maneiras para sempre podermos escolher a mais adequada para o momento.

Se você não conhece nada o kivy, é melhor começar do mais básico. Clique aqui para ler uma sequencia de tutoriais que introduzem o kivy.

 

A melhor forma de compreender o efeito das diferentes configurações é testando na prática. Não deixe de executar todos os scripts e ver o efeito dos mesmos. Para não ter que copiar tudo obtenha os arquivos em https://cadernodelaboratorio.com.br/scripts-softwares-e-arquivos-de-configuracao/. , fazendo o download do arquivo pack170821.tar.gz.

A função do widget Label é apresentar um texto na tela. Na versão mais simples, isto é, com todos os valores default, a criação deste widget é realizada da seguinte forma:

lbl = Label(text=’Alô mundo’)

Exemplificando em um programa:

.label em python
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        lbl = Label(text='Alô mundo')
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

Execute o programa através da linha de comando, como “python label.py” e uma tela irá se abrir, com a mensagem “Alô mundo” no centro da mesma.

Alterando o tamanho do font do texto.

Em primeiro lugar necessitamos saber como são as unidades no Kivy

  • pt -> Points – 1/72 de polegada. Prefira o uso de sp no lugar de pt
  • mm -> Milímetros
  • cm -> Centímetros
  • in -> Polegadas
  • dp -> Pixel independente de densidade. – É uma forma de podermos conviver com telas de densidade de pixels muito diferentes. O número real de pixels correspondente a 1 dp irá variar com a densidade de pixels na tela, o que irá resultar em um mesmo tamanho aproximado em todas as densidades de tela.
  • sp-> Pixel independente de escala. Similar ao dp, mas também afetado pela tamanho da font utilizada pelo usuário. É a melhor forma de especificarmos tamanho de fonts, pois leva em consideração simultaneamente a densidade da tela e o tamanho do font.

Configurando o tamanho do font em Python

A linha de código que altera o tamanho é a seguinte:
lbl.font_size= ’60sp’

O script fica da seguinte forma:

.script label1 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        lbl = Label(text='Alô mundo')
        lbl.font_size= '60sp'
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

Execute o programa e verifique como o font altera de tamanho.

Alterando o font para Negrito (bold)

A linha de código é: lbl.bold= True

.script label2 

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        lbl = Label(text='Alô mundo')
        lbl.font_size= '60sp'
        lbl.bold= True
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

Execute o programa e veja como o label está modificado.

Alterando a cor de um Label

A cor de um label é especificada da forma:

lbl.color= [r, g, b, a], especificando as componentes vermelha (r) , verde (g), azul (b) e a transparência (a). Por exemplo, para obter um cor vermelho puro utilize [1,0,0,1].

O script fica da seguinte forma:

.script label3 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        lbl = Label(text='Alô mundo')
        lbl.font_size= '60sp'
        lbl.bold= True
        lbl.color= [1,0,0,0.5]
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

Quais são as outras cores que podemos alterar?

disabledcolor : cor quando o label está desabilitado. No formato lbl.disabledcolor= [r, g, b, a]

disabledoutlinecolor: cor do outline do texto, quando o label está desabilitado, no formato [r,g,b]. Outline é uma linha que envolver cada caractere contido no label.

lbl.outline_color: cor do outline do texto quando o label está habiitado.

Quais são os nomes de fonts default do kivy?

DejaVuSans.ttf
Roboto-Bold.ttf
Roboto-BoldItalic.ttf
Roboto-Italic.ttf
Roboto-Regular.ttf
RobotoMono-Regular.ttf

uso: lb.font_name= ‘Roboto-BoldItalic’

Para você visualizar estes fonts, utilize o script a seguir:

.script label4 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        self.orientation = 'vertical'
        
        lbl = Label(text='DejaVuSans')
        lbl.font_size= '60sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        self.add_widget(lbl)
        lbl1 = Label(text='Roboto-Bold')
        lbl1.font_size= '60sp'
        lbl1.color= [1,0,0,1]
        lbl1.font_name= 'Roboto-Bold'
        self.add_widget(lbl1)
        lbl2 = Label(text='Roboto-BoldItalic')
        lbl2.font_size= '60sp'
        lbl2.color= [1,0,0,1]
        lbl2.font_name= 'Roboto-BoldItalic'
        self.add_widget(lbl2)        
        lbl3 = Label(text='Roboto-Italic')
        lbl3.font_size= '60sp'
        lbl3.color= [1,0,0,1]
        lbl3.font_name= 'Roboto-Italic'
        self.add_widget(lbl3)            
        lbl4 = Label(text='Roboto-Regular')
        lbl4.font_size= '60sp'
        lbl4.color= [1,0,0,1]
        lbl4.font_name= 'Roboto-Regular'
        self.add_widget(lbl4)                   
        lbl5 = Label(text='RobotoMono-Regular')
        lbl5.font_size= '60sp'
        lbl5.color= [1,0,0,1]
        lbl5.font_name= 'RobotoMono-Regular'
        self.add_widget(lbl5)                   


class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

 

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

A sua tela deve ficar aproximadamente igual a:

Fonts padrões no kivy

Como sublinhar o texto do Label

lbl.underline= ‘True’

Como tachar o texto do Label

lbl.strikethrough = ‘True’

Compreendendo o alinhamento do texto em Labels

As propriedades de alinhamento vertical e horizontal de um label ( halign e valign) podem ser difíceis de compreender sob uma avaliação preliminar. O seguinte raciocínio pode aclarar as coisas:

  • 1- A imagem correspondente ao texto (texture) é do tamanho exato para conter os caracteres do mesmo, é é posicionado sempre no centro do label. A propriedade valign não tem nenhum efeito e a propriedade halign, somente se o texto tiver mais de uma linha.
  • 2- Para que o alinhamento ocorra, estabeleça primeiro a propriedade text_size, que especifica o tamanho de um retângulo dentro do qual o texto será renderizado. Dentro deste retângulo poderemos alinhar a posição horizontal ou vertical do texto.
  • 3- Para criar este retângulo utilize a seguinte instrução:

lbl.text_size= (x,y)  . Caso você não queira limitar uma dimensão x ou y, especifique *None*, por exemplo (300,None) não terá nenhuma limitação na vertical.

  • 4- O alinhamento horizontal é especificado com a instrução na forma lbl.halign= ‘left’ .Os alinhamentos possíveis são : left (esquerda), center (centro) , right( direita) e justify (justificado).
  • 5- O alinhamento vertical é especificado com a instrução na forma lbl.valign = ‘bottom’. Os alinhamentos possíveis são ‘bottom’ (inferior), ‘middle’ (ou ‘center’) e ‘top’ (topo).

O código a seguir exercita o que acabamos de dizer:

.script label5 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        self.orientation = 'vertical'
        
        
        lbl = Label(text='alinhamento horizontal à esquerda')
        lbl.text_size= (800,100)
        lbl.halign= 'left'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)
           
        lbl = Label(text='alinhamento horizontal à direita')
        lbl.text_size= (800,100)
        lbl.halign= 'right'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)


        lbl = Label(text='alinhamento horizontal no centro')
        lbl.text_size= (800,100)
        lbl.halign= 'center'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

A imagem a seguir mostra como fica a tela com a execução deste script

Alinhamentos horizontais no kivy

Como envolver cada caractere do texto por uma linha de cor diferente

As propriedades que devemos configurar para criar uma linha que envolva cada caractere são:

lbl.outline_width= 1 Especifica a espessura da linha. Aqui especificamos 1 pixel
lbl.outline_color= [0,1,0] Especifica a cor da linha, Aqui especificamos verde puro ([r,g.b])

Um código que exemplifica o uso do outline pode ser visto a seguir:

.script label6 

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        self.orientation = 'vertical'
        
        
        lbl = Label(text='alinhamento horizontal à esquerda')
        lbl.text_size= (800,100)
        lbl.halign= 'left'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        lbl.outline_width= 1
        lbl.outline_color= [0,1,0]
        self.add_widget(lbl)
           
        lbl = Label(text='alinhamento horizontal à direita')
        lbl.text_size= (800,100)
        lbl.halign= 'right'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)


        lbl = Label(text='alinhamento horizontal no centro')
        lbl.text_size= (800,100)
        lbl.halign= 'center'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

A figura a seguir mostra como é renderizado o texto com outline:

Exemplo de outline

 

Para profissionais de interfaces, um ajuste fino no fonte

As propriedades a seguir permitem ajuste fino do font. É mais fácil de experimentar e visualizar a ação que realizam sobre a aparência do font do que explicar estas alterações. No script a seguir introduzimos as três propriedades de forma que você pode experimentar facilmente todas as suas variações.

lbl.font_blended = True Pode assumir True ou False

lbl.font_hinting= ‘mono’ Pode assumir ‘normal’, ‘light’, ‘mono’ ou None.

lbl.font_kerning= True Pode assumir True ou False

.script label7 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class WidgetRaiz(BoxLayout):
    def __init__(self, **kwargs):
        super(WidgetRaiz, self).__init__(**kwargs)
        self.orientation = 'vertical'
        
        
        lbl = Label(text='alinhamento horizontal à esquerda')
        lbl.text_size= (800,100)
        lbl.halign= 'left'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        lbl.outline_width= 1
        lbl.outline_color= [0,1,0]
        lbl.font_blended = True
        lbl.font_hinting= 'mono'
        lbl.font_kerning= True
        self.add_widget(lbl)
           
        lbl = Label(text='alinhamento horizontal à direita')
        lbl.text_size= (800,100)
        lbl.halign= 'right'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)


        lbl = Label(text='alinhamento horizontal no centro')
        lbl.text_size= (800,100)
        lbl.halign= 'center'
        lbl.font_size= '30sp'
        lbl.color= [1,0,0,1]
        lbl.font_name= 'DejaVuSans'
        lbl.underline= 'True'
        self.add_widget(lbl)
    

class MeuPrograma(App):
     def build(self):
        app = WidgetRaiz()
        return app

    

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

A imagem a seguir mostra como fica o font configurado com estas propriedades:

Exemplo de blending, hinting e kerning

Como associar o Label a um evento?

Iremos marcar o texto (ou parte dele) com uma referencia à um método que será chamado quando o usuário clicar sobre a palavra marcada. Tudo isto sem nenhuma linha de código de sua parte. Muito legal, não é?

  • 1 – Informe que o texto terá marcações, através da propriedade markup: lbl.markup= True
  • 2 – Marque o texto com o tag. text= “Clique [ref= clique1] aqui [/ref] para testar”
  • 3- Informe o nome do método que será chamado. lbl.bind (onrefpress= processaClique)
.script label8 
#!/usr/bin/env python 
# -*- coding: utf-8 -*- 

import kivy 
kivy.require('1.8.0') 
from kivy.app import App 
from kivy.uix.widget import Widget 
from kivy.uix.label import Label 
from kivy.uix.boxlayout import BoxLayout 

class WidgetRaiz(BoxLayout): 
    def __init__(self, **kwargs): 
        super(WidgetRaiz, self).__init__(**kwargs) 
        self.orientation = 'vertical' 
        lbl = Label(text='Clique [b][ref=aqui]aqui[/ref][/b] para testar!') 
        lbl.font_size= '40sp' 
        lbl.color= [1,0,0,1] 
        lbl.markup= True 
        lbl.bind(on_ref_press=self.processaClique) 
        self.add_widget(lbl) 

    def processaClique(self,instance, value): 
        print ("Usuario clicou sobre o link " , value) 

class MeuPrograma(App): 
    def build(self): 
        app = WidgetRaiz() 
        return app 

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

Por hoje é só. Apenas um lembrete  aos  nossos leitores que se utilizam do tradutor automático  para lerem em seus idomas:

We realize that automatic translated services nowdays are terrible. Non portuguese speakers can have a hard time to understand parts of the translated text. If this is your case, you can ask us in english about anything in the blog. We will answer also in english.

Obs: Nos damos cuenta de que los textos traducidos automáticamente tienen sus limitaciones. Los que no hablan portugues pueden tener dificultades para entender parte del texto traducido. Si este es su caso, no dude en preguntarnos en español sobre cualquier informacion del blog. Responderemos también en español (or portuñol, estoy seguro que podremos llegar a entendernos).:-) ).

 

Deixe um comentário