iOS, Android: Tamanhos de Tela

Um dos grandes problemas, quando trabalha com telefones celulares comuns (leia-se programar com J2ME) era o tamanho de tela: diversos aparelhos com tamanho de telas totalmente diferentes. Então veio a oportunidade para programar para iOS: Eba!!! Só existe 1 tamanho de tela! O tempo passou e lançaram o iPad. Até aí tudo bem, são só dois tamanhos diferentes.... e o tempo passou e agora temos o iPhone 5 e o iPad Mini.... Fuuuuuuuuuuuuuuuuuuuuuuuuuuuu... basicamente temos 4 telas diferentes para trabalhar, e ainda fora de proporção, como no caso do iPhone 5. Enquanto isso, temos a Google lançando o Android e diferente do iOS, nunca se estabeleceu um padrão de telas com medidas exatas, sendo apenas classificadas como small, normal, large e x-large ou ldpi, mdpi, hdpi e xhdpi.


Enfim, hoje vou dar dicas de como trabalhar com tamanhos de tela e como fazer. Note que estas dicas podem ser extendidas para qualquer sistema que utilize tamanho de telas diferentes.

Dica 1: Tudo é relativo com a própria tela: É a dica mais importante que entenda, pois é a partir dela que você vai desenvolver as outras dicas. Você está mechendo com vários tamanhos de telas. Geralmente quando planejo algo, eu não meço as posições em pixels ou uma unidade estática. Costumo usar porcentagem da tela. Por exemplo, digo que um botão tem que ter 20% do espaço horizontal e 10% do espaço vertical tela centralizado horizontalmente e posicionado na posição 10%. Agora é só botar o computador calcular as posições usando as medidas de tela em tempo de execução. Por exemplo, estamos rodando em um aplicativo 640x1096 (do iPhone 5), esse botão teria uma:

largura = 640*0,20 =  128 pixels [largura da tela * 20%]
altura = 1096 * 0,10 = 109,6 pixels [altura da tela * 10%]

E estaria na posição:
x = (640/2)-(128/2) =  320 - 64 = 256 
[metade da largura da tela - metade da largura do botão]

y = (1096/2) - (109,6/2) = 548 - 54,8 = 493,2 
[metade da altura da tela - metade da altura do botão]

Claro que seria muito ingênuo da minha parte dizer que só isso resolve. Claro que não. Muitos botões são criados com imagens bitmaps, o que significa perda de qualidade se ampliá-las. Neste caso, você se vê obrigado a usar os tradicionais pixels como unidade de medida. Com isso, temos o gancho para a...

Dica 2: Se está preso nos pixels, crie versões diferentes em tamanhos-chaves: Essa que é a ideia do Android em classificar os recursos. Você cria uma quantidade limitada de versões, e no caso do iPhone escolhe o qual se adapta melhor (Android tem um sistema automático que escolhe a versão mais apropriada).

Dica 3: Tudo é relativo com outros elementos: Vamos voltar para o nosso exemplo, temos o botão que criamos, mas também precisamos de outros 2 botões, alinhados e com um certo espaçamento, dizemos, uns 10 pixels (ou calcule um espaço relativo). O que podemos fazer é utilizar os atributos dos elementos anteriores para calcular a posição do novo botão. Vamos calcular a posição desse segundo botão:

x = 256 
[posição x do botão anterior]

y = 493,2+109,6+10 = 612,8 
[posição y do botão anterior + altura do botão anterior + espaçamento]

e calculando o terceiro fica:

x = 256
y = 612,8+109,6+10 = 732,4

Agora, o que acontece se eu pegar o primeiro botão e adicionar 30 pixels na posição y? Todos os outros botões vão automaticamente ter 30 pixels a mais comparado anteriormente. Então quando se trata de praticidade, isso acaba sendo muito perfeito.

Dica 4: Separe os elementos, mesmo os de plano de fundo: A imagem de plano de fundo sempre tem que ser simples, de forma que não se torne percepetível a perda de qualidade entre os diferentes tamanhos de telas (que se enquadram na mesma categoria). Mas claro que um plano de fundo simples pode deixar uma sensação de vazio, então queremos colocar alguma coisa a mais. Como fazer isso sem que ela sofra distorção? Criando elementos separado do plano de fundo. Assim, mesmo que o fundo seja esticado, a imagem não será. Mas lembre-se que a posição da imagem deve estar relativisada com o espaço da tela, senão vamos acabar encontrando rodapés no meio da tela.

Bônus: Pegar o tamanho da tela no iOS: Utilize o seguinte código para verificar o tamanho da tela:

CGRect espacoDaTela = [[UIScreen mainScreen] bounds];
NSLog(@"%f",espacoDaTela.size.width); //Largura da tela
NSLog(@"%f",espacoDaTela.size.heigh); //Altura da tela