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

Image for post
Image for post

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/

Image for post
Image for post
Todas as Resoluções do IOS

Mais facil , não ?

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

Image for post
Image for post

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

Image for post
Image for post
Tabela das Guidelines da Apple para Navigation e Toolbar
Image for post
Image for post

Para a barra inferior :

Image for post
Image for post
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

Image for post
Image for post
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.

Image for post
Image for post

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 @ .

Image for post
Image for post
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 :

Image for post
Image for post

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

Image for post
Image for post
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.

Image for post
Image for post
Pasta Assets MeuProjeto.IOS

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

Image for post
Image for post
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).

Image for post
Image for post
MakeApp Icon

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

Espero ter ajudado!

Aquele abraço!

Written by

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