Splash Screen

Baixar o exemplo

Um aplicativo Android leva algum tempo para ser iniciado, especialmente quando o aplicativo é iniciado pela primeira vez em um dispositivo. Uma tela inicial pode exibir o progresso da inicialização para o usuário ou para indicar a identidade visual.

Visão geral

Um aplicativo Android leva algum tempo para ser iniciado, especialmente durante a primeira vez em que o aplicativo é executado em um dispositivo (às vezes, isso é conhecido como um início frio). A tela inicial pode exibir o progresso da inicialização para o usuário ou pode exibir informações de identidade visual para identificar e promover o aplicativo.

Este guia discute uma técnica para implementar uma tela inicial em um aplicativo Android. Ele aborda as seguintes etapas:

1. Criando um recurso desenhável para a tela inicial.

2. Definindo um novo tema que exibirá o recurso desenhável.

3. Adicionando uma nova Atividade ao aplicativo que será usada como a tela inicial definida pelo tema criado na etapa anterior.

Requisitos

Este guia pressupõe que o aplicativo tenha como destino o nível 21 ou superior da API do Android. O aplicativo também deve ter os pacotes NuGet Xamarin.Android.Support.v4 e Xamarin.Android.Support.v7.AppCompat adicionados ao projeto.

Todo o código e XML neste guia podem ser encontrados no projeto de exemplo SplashScreen para este guia.

Implementando uma tela inicial

A maneira mais rápida de renderizar e exibir a tela inicial é criar um tema personalizado e aplicá-lo a uma Atividade que exibe a tela inicial. Quando a Atividade é renderizada, ela carrega o tema e aplica o recurso desenhável (referenciado pelo tema) à tela de fundo da atividade. Essa abordagem evita a necessidade de criar um arquivo de layout.

A tela inicial é implementada como uma Atividade que exibe a marca que pode ser desenhada, executa todas as inicializações e inicia todas as tarefas. Depois que o aplicativo tiver inicializado, a tela inicial Atividade iniciará o main Atividade e removerá-se da pilha de volta do aplicativo.

Criando um desenhável para a tela inicial

A tela inicial exibirá um XML desenhado na tela de fundo da Atividade da tela inicial. É necessário usar uma imagem bitmapped (como um PNG ou JPG) para que a imagem seja exibida.

O aplicativo de exemplo define um desenhável chamado splash_screen.xml. Esse desenho usa uma Lista de Camadas para centralizar a imagem de tela inicial no aplicativo, conforme mostrado no xml a seguir:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Isso layer-list centraliza a imagem inicial em uma cor de plano de fundo especificada pelo @color/splash_background recurso. O aplicativo de exemplo define essa cor no arquivo Resources/values/colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="splash_background">#FFFFFF</color>
</resources>

Para obter mais informações sobre Drawable objetos, consulte a documentação do Google sobre o Android Drawable.

Implementando um tema

Para criar um tema personalizado para a atividade da tela inicial, edite (ou adicione) os valores de arquivo/styles.xml e crie um novo style elemento para a tela inicial. Um arquivo de exemplo de valores/style.xml é mostrado abaixo com um style chamado MyTheme.Splash:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

MyTheme.Splash é muito espartano – ele declara a tela de fundo da janela, remove explicitamente a barra de título da janela e declara que ela é de tela inteira. Se você quiser criar uma tela inicial que emule a interface do usuário do seu aplicativo antes que a atividade infla o primeiro layout, você pode usar windowContentOverlay em vez de windowBackground em sua definição de estilo. Nesse caso, você também deve modificar o splash_screen.xml desenhável para que ele exiba uma emulação da interface do usuário.

Criar uma atividade splash

Agora, precisamos de uma nova Atividade para Android para iniciar que tenha nossa imagem inicial e execute todas as tarefas de inicialização. O código a seguir é um exemplo de uma implementação completa da tela inicial:

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    // Launches the startup task
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay (8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

SplashActivity usa explicitamente o tema que foi criado na seção anterior, substituindo o tema padrão do aplicativo. Não é necessário carregar um layout no OnCreate , pois o tema declara um desenhável como a tela de fundo.

É importante definir o NoHistory=true atributo para que a Atividade seja removida da pilha traseira. Para impedir que o botão voltar cancele o processo de inicialização, você também pode substituir OnBackPressed e fazer com que ele não faça nada:

public override void OnBackPressed() { }

O trabalho de inicialização é executado de forma assíncrona em OnResume. Isso é necessário para que o trabalho de inicialização não diminua nem atrase a aparência da tela de inicialização. Quando o trabalho for concluído, SplashActivity será iniciado MainActivity e o usuário poderá começar a interagir com o aplicativo.

Essa nova SplashActivity é definida como a atividade inicial do aplicativo definindo o MainLauncher atributo truecomo . Como SplashActivity agora é a atividade do inicializador, você deve editar MainActivity.cse remover o MainLauncher atributo de MainActivity:

[Activity(Label = "@string/ApplicationName")]
public class MainActivity : AppCompatActivity
{
    // Code omitted for brevity
}

Modo paisagem

A tela inicial implementada nas etapas anteriores será exibida corretamente no modo retrato e paisagem. No entanto, em alguns casos, é necessário ter telas inicial separadas para modos retrato e paisagem (por exemplo, se a imagem inicial for de tela inteira).

Para adicionar uma tela inicial para o modo paisagem, use as seguintes etapas:

1. Na pasta Recursos/desenhável , adicione a versão paisagem da imagem de tela inicial que você deseja usar. Neste exemplo, splash_logo_land.png é a versão paisagem do logotipo que foi usada nos exemplos acima (ele usa letras brancas em vez de azul).

2. Na pasta Recursos/desenhável , crie uma versão de paisagem do layer-list desenhável que foi definida anteriormente (por exemplo, splash_screen_land.xml). Nesse arquivo, defina o caminho do bitmap para a versão paisagem da imagem de tela inicial. No exemplo a seguir, splash_screen_land.xml usa splash_logo_land.png:

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
       <color android:color="@color/splash_background"/>
     </item>
     <item>
       <bitmap
           android:src="@drawable/splash_logo_land"
           android:tileMode="disabled"
           android:gravity="center"/>
     </item>
   </layer-list>
   

3. Crie a pasta Resources/values-land se ela ainda não existir.

4. Adicione os arquivos colors.xml e style.xml a values-land (eles podem ser copiados e modificados dos valores/colors.xml e arquivos de valores/style.xmlexistentes ).

5. Modifique values-land/style.xml para que ele use a versão paisagem do desenhável para windowBackground. Neste exemplo, splash_screen_land.xml é usado:

   <resources>
     <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
     </style>
       <style name="MyTheme" parent="MyTheme.Base">
     </style>
     <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
       <item name="android:windowBackground">@drawable/splash_screen_land</item>
       <item name="android:windowNoTitle">true</item>  
       <item name="android:windowFullscreen">true</item>  
       <item name="android:windowContentOverlay">@null</item>  
       <item name="android:windowActionBar">true</item>  
     </style>
   </resources>
   

6. Modifique values-land/colors.xml para configurar as cores que você deseja usar para a versão paisagem da tela inicial. Neste exemplo, a cor da tela de fundo inicial é alterada para azul para o modo paisagem:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <color name="primary">#2196F3</color>
     <color name="primaryDark">#1976D2</color>
     <color name="accent">#FFC107</color>
     <color name="window_background">#F5F5F5</color>
     <color name="splash_background">#3498DB</color>
   </resources>
   

7. Compile e execute o aplicativo novamente. Gire o dispositivo para o modo paisagem enquanto a tela inicial ainda é exibida. A tela inicial muda para a versão paisagem:

   

Observe que o uso de uma tela inicial do modo paisagem nem sempre fornece uma experiência perfeita. Por padrão, o Android inicia o aplicativo no modo retrato e o faz a transição para o modo paisagem, mesmo que o dispositivo já esteja no modo paisagem. Como resultado, se o aplicativo for iniciado enquanto o dispositivo estiver no modo paisagem, o dispositivo apresentará brevemente a tela inicial do retrato e animará a rotação do retrato para a tela inicial da paisagem. Infelizmente, essa transição de retrato para paisagem inicial ocorre mesmo quando ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape é especificada nos sinalizadores da atividade splash. A melhor maneira de contornar essa limitação é criar uma única imagem de tela inicial que seja renderizada corretamente nos modos retrato e paisagem.

Resumo

Este guia discutiu uma maneira de implementar uma tela inicial em um aplicativo Xamarin.Android; ou seja, aplicando um tema personalizado à atividade de inicialização.

Links Relacionados

• SplashScreen (exemplo)
• lista de camadas Desenhável
• Padrões de design de material – Telas de inicialização