Sobre o tamanho dos widgets Kivy


Compreendendo as especificações de tamanho dos widgets Kivy

Um dos desafios para o programador de interfaces atuais é projetar o sistema que seja agradável ao usuário em telas muito diferentes. Os bons tempos (para o programador) do início dos computadores, onde todos utilizavam a tela padrão de 640 x 480 já se foram há muito tempo. Hoje temos que conviver com densidades de pixels diferentes, dimensões físicas diferentes e resoluções de tela diferentes. O tamanho dos widgets Kivy deve, de preferencia, se ajustar às características dos dispositivos, de outra forma aquele botão perfeitamente centrado em uma tela pode ficar totalmente fora da área visível em outra.

Formas de especificar o tamanho dos widgets Kivy

Por padrão, as dimensões Kivy são especificadas em pixels. É nesta forma que todos os tamanhos e dimensões são especificadas por default. Embora seja muito simples de entender, é muito ruim de utilizar, pois o tamanho de um pixel depende da densidade do pixels, resolução e tamanho da tela. Uma interface um pouco mais complexa pode ficar completamente desconfigurada em dispositivos que tenham a visualização muito diferente.

Kivy possui outras formas de especificar o tamanho e posição, descritas a seguir:

  • pt

Points – Cada point corresponde a 1/72 de polegada. Prefira o uso de sp, descrito abaixo, no lugar de pt.

  • mm

Milímetros. Permite especificar o valor em milímetros.

  • cm

Centímetros. Permite especificar o valor em centímetros.

  • in

Polegadas. Permite especificar o valor em 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. Se a tela tiver um alta densidade, 1 dp corresponderá a muitos pixels, se a tela tiver baixa densidade 1 dp corresponderá a menos pixels, podendo chegar a 1 dp= 1 pixel. O resultado é que as dimensões dos widgets serão muito similares em diferentes telas.

  • sp

Pixel independente de escala. Similar ao dp, mas também leva em consideração o 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.

Como avaliar se sua interface está OK em diferentes telas?

A opção de comprar um modelo de cada dispositivo diferente é perfeita se o dinheiro está sobrando -:). Para os poucos casos onde isto não é verdade, podemos usar o parâmetro “screen” quando formos executar o programa Kivy, conforme podemos ver nos exemplos a seguir:

  python exp2e.py -m screen:phone_samsung_galaxy_note4

Iremos executar o programa como se estivesse numa tela do galaxy note 4. O comando genérico é:

  python programa.py -m screen:identificação do dispositivo

Para saber as identificações dos dispositivos que você pode simular use o comando:

  python programa.py -m screen

A mensagem de retorno traz, além dos identificadores dos dispositivos, a resolução utilizada. Se o seu dispositivo específico não estiver na lista, utilize um com a resolução aproximada.

Você pode também simular a tela no modo retrato:

 python main.py -m screen:note2,portrait

Se você estiver simulando dispositivos de telas com alta densidade de pixels, é possível que a tela simulada não caiba na tela do seu computador de desenvolvimento. Podemos escalar a visualização da seguinte forma:

 python main.py -m screen:phonelgg3,portrait,scale=.75

Experimentando na prática

Vamos demostrar na prática o uso deste conhecimento criando um pequeno programa que contém apenas um label e um botão. Quando pressionado o botão imprimiremos um texto no terminal aberto. Muito simples, pois o objetivo aqui é apenas mostrar como usar as diferentes formas de dimensionar os widgets.

Os programas completos referentes ao trechos de código apresentados a seguir estão disponíveis em nossa página de downloads, https://cadernodelaboratorio.com.br/scripts-softwares-e-arquivos-de-configuracao/, sob o nome pack170927.tar.gz;

Especificando em pixels (default)

Inicialmente vamos implementar o programa sem maiores preocupações com a portabilidade para diferentes telas. Utilizando a linguagem kv podemos especificar um label e um botão da seguinte forma:

Se você não compreende a linguagem kv visite os tutoriais kivy disponíveis em https://cadernodelaboratorio.com.br/2015/05/12/tutorial-kivy-exp1/ . Para listar todos os tutoriais referentes ao kivy visite a página https://www.cadernodelaboratorio.com.br e selecione “kivy” no campo “pesquisa por categoria” na parte esquerda da tela.

.dimensões especificadas em pixels 
BoxLayout:
    orientation:'vertical'
    spacing: 50
    padding: [20,20,20,20]
    
    Label:
        text: 'www.cadernodelaboratorio.com.br'
        font_size: '35'
        bold: True
        color: [1,0,0,0.5]
        font_name: 'Roboto-Bold'
    
    Button:
        text: 'Pressione aqui!'
        on_press: print ('Ops! Botão pressionado')
        size_hint: [.2,.2]
        pos_hint: {'x' : .4}

Na tela de um PC com resolução de 1366 x 768 pixels, a imagem resultante é a seguinte:

Tela com resolução de 1366 x 768

Em uma tela do Samsung S6, a imagem ficaria como:

Tela com resolução de 2560 x 1140

Em uma tela do xperia

Tela com resolução de 480 x 320

Bem, isto é tudo o que NÃO queremos. Em cada celular, uma imagem diferente!

Vamos alterar o arquivo kv para utilizarmos unidades mais adequadas e também configurarmos a posição e o tamanho dos widgets como função das dimensões da tela do dispositivo:

.dimensões especificadas em pixels 
BoxLayout:
    orientation:'vertical'
    spacing: 50
    padding: [20,20,20,20]
    
    Label:
        text: 'www.cadernodelaboratorio.com.br'
        font_size: '30dp'
        bold: True
        color: [1,0,0,0.5]
        font_name: 'Roboto-Bold'
        size_hint: None,.5
        pos_hint: {'center_x':.5,'center_y':.5}
        text_size: None,None

        
    Button:
        text: 'Pressione aqui!'
        font_size: '20sp'
        size_hint: .4,.2
        pos_hint: {'center_x':.5,'center_y':.5}
        on_press: print ('Ops! Botão pressionado')

Na tela de um PC com resolução de 1366 x 768 pixels, a imagem resultante é a seguinte:

Tela com resolução de 1366 x 768

Em uma tela do Samsung S6, a imagem ficaria como:

Tela com resolução de 2560 x 1140

Em uma tela do xperia

Tela com resolução de 480 x 320

Compare as diferentes telas e veja que, escolhendo as unidades que definem o tamanho e procurando posicionar os objetos levando em consideração as diferentes características da tela, o resultado fica bem mais previsível!

Até nosso próximo encontro!

Deixe um comentário