O X do Xamarin Forms : Xamarin.IOS : Tamanhos de Tela,Icones e Botões

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 na resolução. Ícones com baixa resolução em telas grandes podem ficar muito pixeados.

Felizmente existem formas para resolver este problema.

Neste artigo abordarei especificamente o IOS, mas no futuro irei criar um para Android.

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

bora!

1— Qual a resolução dos dispositivos IOS ?

Antigamente existia apenas um tamanho de tela de Iphone/ipad (abraço jobs!). Mas com o passar dos anos, novos tipos foram surgindo.Porem 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/

Todas as Resoluções do IOS

Mais facil , não ?

Cada parte do IOS, possui resoluções especificas.

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

Tabela das Guidelines da Apple para Navigation e Toolbar

Para a barra inferior :

Tabela das Guidelines da Apple para Tabbar

Note que no caso da Tabbar, a resolução muda de acordo com o seu tipo de Icone. Circular,quadrado e etc.

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

É muito simples adicionar icones no seu projeto IOS, primeira coisa localize no seu MeuProjeto.IOS a pasta Resources

Pasta Resource no MeuProjeto.IOS

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 icone 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, utilizar o nome sem nenhum @ .

Exemplo de utilização de icone

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 ? Clica aqui

3 — Icones do App e uma solução mais facil :

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

Tabela das Guidelines da Apple para Ícone do APP

A unica mudança que temos é a localização. Nos icones do app, devemos alterar na pasta de Assets do MeuProjeto.IOS.

Pasta Assets MeuProjeto.IOS

La teremos todos os icones de nossa aplicação, inclusive os da loja/itunes.

Conteúdo de Assets

Mas eu tenho que criar um por um ? BEEEEEEEEEEEEEEM, ai fica a dica abaixo.

Um Site muito bacana para criar icones gratis 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 9,99 e ter o APP no seu MAC. (Quem me deu a Dica foi o MVP : Valerio Ferreira).

MakeApp Icon

Bom inicialmente, era isso que eu tinha para falar de Icones e Imagens para IOS!

Espero ter ajudado!

Aquele abraço!

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store