Fala, galera!

Assim como o Cometa Halley, passei novamente para dar algumas dicas de resolução de ícones pra galera do Xamarin Forms, que podem ser muito úteis.

Um dos grandes problemas de se desenvolver para mobile, é o tamanho das telas e dos nossos ícones. Cada dispositivo possui suas próprias dimensões e isso afeta a resolução.

Ícones com baixa resolução em telas grandes podem ficar muito pixelados. Felizmente, existem formas de resolver este problema.

Neste artigo abordarei especificamente iOS, mas no futuro pretendo cobrir o Android também.

Antes de mais nada, se quer saber mais detalhes sobre as regras das interfaces do iOS, sugiro que dê uma lida nas guidelines da Apple.

Vamos lá!

Qual a resolução dos dispositivos iOS?

Antigamente existia apenas um tamanho de tela de iPhone/iPad, mas com o passar dos anos, novos tipos foram surgindo.

Porém, para ajudar, existe um site muito bacana que é atualizado a cada lançamento de iPhone novo, que mostra todas as medidas das telas:

• http://iosres.com/

Mais fácil, não?

Legal, mas qual a resolução dos ícones para iOS? E onde eu coloco eles? Cada parte do iOS possui resoluções específicas.

Navigation Bar e Toolbar

Para a nossa querida barra de navegação, as resoluções corretas, são:

Tab Bar

Para a barra inferior:

Note que, no caso da Tabbar, a resolução muda de acordo com o seu tipo de ícone – circular, quadrado e etc.

• Mas onde eu coloco os icones? E como ele sabe qual aplicar?

É muito simples adicionar ícones no seu projeto iOS. Primeira coisa: localize no seu MeuProjeto.IOS a pasta Resources

Prestaram atenção nos @2x e @3x? É com essa informação que você especifica ao iOS qual ícone ele deve utilizar em cada aparelho.

Basta criar o ícone com a resolução correta e adicionar um @2x ou @3x no final do nome. Notem que no meu projeto eu criei um ícone para todos os tipos de tela.

Então, no seu projeto Xamarin Forms vamos utilizar o nome sem nenhum @.

O próprio iOS vai procurar o ícone correto. Caso você não crie ícones específicos para cada aparelho, o iOS vai usar o default para todos, e corre o risco de ficar bem pixelado.

Quer saber onde procurar ícones legais? Clique aqui.

Ícones do App e uma solução mais fácil

Da mesma forma que especificamos a resolução dos ícones dos nossos menus, devemos seguir a mesma ideia para o ícone do nosso APP.

A única mudança que temos é a localização. Nos ícones do app, devemos alterar na pasta de Assets do MeuProjeto.IOS.

Lá teremos todos os ícones de nossa aplicação, inclusive os da loja/itunes.

• Mas eu tenho que criar um por um?

Bem, ai fica a dica abaixo:

Um site muito bacana para criar ícones grátis no formato do iOS e do Android, é o https://makeappicon.com/. Ele exporta nos formatos corretos e envia por e-mail. Você também pode pagar US$ 9,99 e ter o app no seu MAC (dica do MVP Valério Ferreira).

Bom, inicialmente era isso que eu tinha pra falar de Ícones e Imagens para iOS. Espero ter ajudado.

Aquele abraço!