O X do Xamarin Forms — Splash Screen

Fala galera,

beleza?

A primeira impressão é a que fica, o criador dessa frase na época n tinha impressora.. badum tiss! Que piada horrível em? Mas o que não deveria ser horrível é a impressão do seu app , assim que ele é aberto.

Aplicativos utilizam SplashScreen muitas vezes , alem de apresentar um logo do seu app, como artificio para carregar algo que pode demorar um pouco antes da inicialização.

Este recurso acaba sendo muito útil, alem claro, deixar a abertura do seu app muito mais bonita !!

Mas e no Xamarin.Forms? Eu ja vi, quando crio um novo projeto, abrir uma Tela azul no iOS e no Android não vi nada.. Tem como fazer?

Vamos ver hoje como utilizar SplashScreen nas duas plataformas do seu App Xamarin.Forms!

Existem diversas formas de se fazer, eu vou mostrar uma bem simples que vai ajudar muito a deixar o seu App com uma abertura bem legal!

Bora?

Começando facil — iOS

Criar uma SplashScreen no iOS é uma forma errada de se dizer, pois a mesma ja existe e apenas vamos customiza-la :D.

Se você reparar no seu projeto iOS, existe um "LaunchScreen.storyboard" ele é exibido assim que o app é Executado :

Para customizar é muito simples. Para ajudar no exemplo eu adicionei uma imagem na pasta Resources. (não esqueça de atender todos os tipos de telas ). Em seguida basta clicar no LaunchScreen.storyBoard e no Próprio VisualStudio você pode customizar :

Como Xamarin é NATIVO!!!!! Caso não queira utilizar o VisualStudio, é possível customizar também através do Próprio Xcode da Apple :

Vou mostrar nos gifs abaixo como o próprio Xcode reconhece nossos resources e podemos alterar qualquer das propriedades como se fosse um projeto iOS, desenvolvido em Swift :

Basicamente eu apenas selecionei nossa imagem, mudei o fundo para Branco e Adicionei dois Constraints. Estes por sua vez são responsáveis por garantir que não importa o tamanho da tela, a imagem vai aparecer centralizada.

Se você quer entender melhor como funciona os Constraints do iOS e Autolayout clique aqui.

Agora vamos salvar ,voltar ao VisualStudio e Rodar :

Você pode adicionar Imagens, Animações, Label's e etc. Ai vai da sua criatividade / necessidade :) .

Criando a SplashScreen na mão — Android

Antes de mais nada , vamos adicionar a imagem nas pastas do Android, igual do iOS.

Como você deve ter reparado o Android não possui essa LaunchScreen.storyBoard. Então vamos criar um Layout parecido e iniciar ele antes da nossa Main.

Primeiro vamos criar uma cor para nossa tela de Splash , na pasta Values vamos criar uma cor no colors.xml chamada splash_background com a cor branca :

Dentro da pasta Drawable vamos criar o conteúdo da nossa tela , o Xml responsável por exibir a imagem :

Nossa tela é bem simples, ela apenas tem um bitmap. Esse componente exibe uma imagem :D

Em seguida vamos no arquivo Styles.xml criar um style chamado MyTheme.Splash, que ficara responsavel pelas configurações da nossa nova tela :

As propriedades que eu defini são para simular uma tela cheia, ocultando as barras de status e tudo que existe na interface.

Por ultimo e muito importante, vamos criar a nossa Activity , nossa tela nova de splash :

É muito importante que você adicione o MainLauncher = true nessa Activity, e retire da MainActiviy.cs. Isso vai dizer ao Android para abrir essa Activity primeiro.

Eu adicionei um Delay para simular a inicialização, isso pode ser útil caso você queria carregar algo no seu app enquanto ele abre e exibe a Splash.

Em seguida, quando acabar as tarefas abrimos a MainActiviy e iniciamos o app novamente.

Caso queira entender mais sobre Activity temos a documentação oficial do Xamarin.Android clicando aqui.

Rodando :

Como disse no iOS, você pode adicionar outros controles e etc para melhorar sua tela.

Este é um exemplo simples de Splash para Android , não que seja a única forma. É apenas uma forma simples para você não perder muito tempo e ter uma Splash :)

Se quiserem inclusive eu posso começar a fazer umas series de Xamarin abordagem clássica, para ajudar na hora de criar controles nativos :D

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!