Depois que você começa a brincar um pouco mais com Ionic, a necessidade de deixar o App mais bonitinho vai aparecendo. Se você ja gerou o apk do seu aplicativo, deve ter se perguntado como altera a Splash Screen e o ícone do seu App…
Splash Screen
Splash Screen é a tela de carregamento inicial do seu App, portanto uma das primeiras impressões que o usuário vai ter do seu App.
Cada celular dispositivo tem dimensões diferentes e portanto deve ter um splash Screen diferente.
O Ionic tem uma solução bem interessante para isso, mas primeiro vamos encontrar o local da Splash Screen dentro dos diretórios do seu App.
Dentro da pasta do seu projeto acesse a pasta resources. Nela já vem uma imagem padrão para a Splash Screen e para o ícone.
Prefere aprender em vídeo?
Entendendo o processo
Como cada plataforma tem diferentes requisitos para as imagens de Splash Screen e ícone, é melhor fazer uma imagem com o maior tamanho necessário e deixar o o Ionic fazer o resto.
Na documentação do Ionic, tem um PSD template para a Splash Screen.
Mas, para te ajudar eu já criei uma Splash Screen com as medidas certas que você pode baixar aqui.
Customizando a Splash Screen Ionic
Delete a imagem splash.png que está dentro da pasta resources do seu projeto. Depois coloque a que você quer usar com o mesmo nome (também poderia ser uma splash.psd ou splash.ai).
No prompt de comando, navegue até a pasta do seu projeto. Depois digite o seguinte comando:
ionic resources --splash
Para as versões mais recentes do Ionic utilize o seguinte comando:
ionic cordova resources --splash
Você precisa de internet. Ele vai fazer upload do seu arquivo, gerar uma para cada tamanho necessário e já colocar dentro da pasta. Demais não é?
Para testar, você deve estar usando um emulador ou rodando no próprio celular.
Ícone
Para mudar o ícone o processo é praticamente igual ao da Splash Screen Ionic. Você pode baixar aqui o template da própria documentação do Ionic, ou baixar o meu ícone já pronto.
Depois vamos lá na pasta resources de novo, deletamos o arquivo icon.png e colocamos o que acabamos de baixar.
Mais uma vez no prompt, digite o comando:
ionic resources --icon
Para as versões mais recentes do Ionic utilize o seguinte comando:
ionic cordova resources --icon
Curtiu? Mole né? Em breve uma série de Ionic com apps completos do início ao fim!
Aproveita e curte minha página, para ver os posts em primeira mão!
[wpdevart_like_box profile_id=”514623068560386″ connections=”show” width=”300″ height=”550″ header=”small” cover_photo=”show” locale=”pt_BR”]
