Widget Label em kvlang - Caderno de Laboratório
Home » Kivy » Widget Label em kvlang
Widget Label em kvlang 2
23 ago, 2017 por tavares (atualizado 58 dias atrás)
Interagindo com o widget Label em kvlang
Vimos no artigo anterior como interagir com o widget Label em Kivy através da linguagem Python. Agora vamos aprender como realizar as mesmas operações através da linguagem kvlang. A linguagem kvlang permite a criação de uma árvore representando as relações entre todos os widgets da interface, e associa cada widget ao código de processamento de uma maneira natural. A prototipagem fica muito mais rápida, assim como as alterações de manutenção ao longo d vida útil do software. É muito interessante que você compare a metodologia de programação utilizando a linguagem kv e o mesmo resultado obtido com a linguagem Python, comparando ambos os textos.
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 pack170823.tar.gz. Utilizamos em nossos experimentos o LInux Mint 18.1, 64 bits, kivy 1.10.0 e o Python 2.7.
Algumas considerações iniciais sobre a kvlang
Quando desenvolvemos em kivy com a metodologia de uso da kvlang, temos no mínimo dois arquivos. Um deles possui a extensão .py, e é onde a funcionalidade do programa é explicitado. O outro arquivo possui a extensão .kv, é é onde a interface é definida.
Para associar estes dois arquivos de forma a operarem em conjunto, temos três maneiras:
1- Através do nome do arquivo kv. Kivy procura por um arquivo kv cujo nome seja iqual ao nome da classe App em minúscula, sem o App no final, por ex:
Se a sua classe de aplicação é chamada de meuProgramaApp , o nome do arquivo para inserção automática deve ser meuprograma.kv . Se o arquivo kc tiver definido um widget raiz, este será associado ao atributo raiz da aplicação.
2 – Através de uma chamada direta no arquivo kivy, utilizando a instrução Builder.load_file('caminho/para/arquivo/arquivo.kv')
3 – Carregando uma string com o conteúdo kv diretamente, utilizando a instrução Builder.loadstring(kvstring)
A linguagem kv, de forma similar à linguagem Python, utiliza da indentação para especificar a relação entre objetos. Cada indentação deve possuir 4 espaços. Só pode existir um widget raiz no arquivo kv. Ele irá ocupar a primeira posição no arquivo.
Vamos criar um programa que apresenta na tela a string "Alô mundo", para começarmos a compreender o funcionamento conjunto dos arquivos py e kv:
.labelkv.py
class MeuProgramaApp(App):
MeuProgramaApp().run()
O arquivo kv associado deve ser chamado de meuprograma.kv
.meuprograma.kv
text: "Alô mundo"
Execute o programa através da linha de comando, como "python labelkv.py" e uma tela irá se abrir, com a mensagem "Alô mundo" no centro da mesma. Exatamente o que ocorreu quando construímos o programa totalmente em Python.
Alterando o tamanho do font do texto.
Vamos relembrar como especificamos as as unidades no Kivy
Configurando o tamanho do font em Python
Basta alterar a propriedade font-size no arquivo kv.
lbl.font_size= '60sp'
.labelkv_1.py
class MeuPrograma_1App(App):
MeuPrograma_1App().run()
O arquivo meuprograma_1.kv fica da forma:
.meuprograma_1.py
font_size: '60sp'
Execute o programa e verifique como o font altera de tamanho.
Alterando o font para Negrito (bold)
Basta alterarmos a propriedade bold para True, no arquivo kv.
.labelkv_2.py
class MeuPrograma_2App(App):
MeuPrograma_2App().run()
O arquivo kv é o seguinte:
.meuprograma_2.kv
Execute o programa e veja como o label está modificado.
Alterando a cor de um Label
A cor de um label é especificada da forma:
Altere a propriedade 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:
.labelkv_3.py
class MeuPrograma_3App(App):
MeuPrograma_3App().run()
Com o correspondente arquivo kv:
.meuprograma_3.kv
color: [1,0,0,0.5]
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.
: cor do outline do texto quando o label está habilitado.
Quais são os nomes de fonts default do kivy
font_name: 'Roboto-BoldItalic'
Para você visualizar estes fonts, utilize o script a seguir:
.labelkv_4.py
class MeuPrograma_4App(App):
MeuPrograma_4App().run()
E o arquivo kv correspondente:
.meuprograma_4.kv
text: 'DejaVuSans'
font_name: 'DejaVuSans'
text: 'Roboto-BoldItalic'
font_name: 'Roboto-BoldItalic'
text: 'Roboto-Italic'
font_name: 'Roboto-Italic'
text: 'Roboto-Regular'
font_name: 'Roboto-Regular'
text: 'RobotoMono-Regular'
font_name: 'RobotoMono-Regular'
A sua tela deve ficar aproximadamente igual a:
Fonts no kivy
Como sublinhar o texto do Label
Faça a propriedade underline: 'True'
Como tachar o texto do Label
Faça a propriedade 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 propriedade 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 através da propriedade halign: 'left' .Os alinhamentos possíveis são : left (esquerda), center (centro) , right( direita) e justify (justificado).
5- O alinhamento vertical é especificado através da propriedade valign = 'bottom'. Os alinhamentos possíveis são 'bottom' (inferior), 'middle' (ou 'center') e 'top' (topo).
Um script para compreender a sistemática do alinhamento
Os códigos a seguir exercitam o que acabamos de dizer:
.labelkv_5.py
class MeuPrograma_5App(App):
MeuPrograma_5App().run()
.meuprograma_5.kv
text: 'alinhamento horizontal à esquerda'
text_size:  (800,100)
halign:  'left'
color:  [1,0,0,1]
underline: 'True'
text: 'alinhamento horizontal à direita'
text_size: (800,100)
text:'alinhamento horizontal no centro'
color: [1,0,0,1]
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:
outline_width: 1 Especifica a espessura da linha. Aqui especificamos 1 pixel
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:
.labelkv_6.py
class MeuPrograma_6App(App):
MeuPrograma_6App().run()
Com o kv associado:
.meuprograma_6.kv
outline_width: 1
outline_color: [0,1,0]
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.
font_blended: True Pode assumir True ou False
font_hinting: 'mono' Pode assumir 'normal', 'light', 'mono' ou None.
font_kerning: True Pode assumir True ou False
.labelkv_7.py
class MeuPrograma_7App(App):
MeuPrograma_7App().run()
.meuprograma_7.kv
font_blended: True
font_hinting:  'mono'
font_kerning:  True
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 à uma função que será chamada 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: markup: True
2 – Marque o texto com o tag. text= "Clique [ref= clique1] aqui [/ref] para testar"
3- Informe a ação a ser executada: onrefpress: print ( bla, bla, bla…)
.labelkv8.py
class MeuPrograma_8App(App):
MeuPrograma_8App().run()
E o arquivo kv:
.meuprograma_8.kv
text: 'Clique [b][ref=aqui]aqui[/ref][/b] para testar!'
on_ref_press:  print ("Usuario clicou sobre o link ")
Aqui terminamos o nosso estudo comparativo do widget Label em Kivy implementado através da linguagem kvlang e da linguagem Python, Qual método é o melhor? Bem, do ponto de vista teórico a separação entre interface e funcionalidade é sempre a melhor solução. Assim o uso de arquivo kv e arquivo py é mais adequado. Na prática, veja aquela solução que você se sente melhor e na qual você é mais eficaz e escolha esta. E ainda melhor, domine ambas as formas de implementação. Assim poderá escolher a que melhor se aplica para uma dada situação.
2 pensamentos em "Widget Label em kvlang"
DayllonXavier 25 de setembro de 2017 em 18:59
Tavares, boa noite.
Eu gostaria de saber se tem como definir uma resolução para a tela que o kivy exibe. Se tem como eu definir um tamanho (width e height) e eu coloco todos os meus widgets dentro dessa resolução, Não sei se deu para entender. Ai quando eu executar essa aplicação ele já vem com o tamanho que eu pré-defini. Como se eu quisesse fazer uma aplicação para celular e quando eu rodar esta aplicação no PC ele aparece conforme uma resolução de tela do celular.
PS: Tavares, dando uma idéia de possível post, você poderia falar como executar áudios pelo kivy 🙂
tavares Autor do post 27 de setembro de 2017 em 21:49
Dayllon, creio que o que voce pretende fazer, se entendi bem, pode ser executado com o uso das unidades de dimensões sp e dp, e da visualização utilizando o parâmetro "screen" ao executar a chamada do python. De uma olhada no post de hoje (27/09) onde discorremos sobre isto e veja se se aplica ao que você precisa.