Tela inicial

Um aplicativo Android leva algum tempo para iniciar, 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 iniciar, especialmente durante a primeira vez que o aplicativo é executado em um dispositivo (às vezes isso é chamado de inicialização a frio). A tela inicial pode exibir o progresso da inicialização para o usuário ou pode exibir informações de marca para identificar e promover o aplicativo.

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

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

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

3. Adicionar 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 alvo 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.

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) ao plano de fundo da atividade. Essa abordagem evita a necessidade de criar um arquivo de layout.

A tela inicial é implementada como uma Atividade que exibe o desenho com marca, executa quaisquer inicializações e inicia quaisquer tarefas. Depois que o aplicativo é inicializado, a Atividade da tela inicial inicia a Atividade principal e se remove da pilha traseira do aplicativo.

Criando um desenho para a tela inicial

A tela inicial exibirá um XML desenhável no plano de fundo da Atividade da tela inicial. É necessário usar uma imagem bitmap (como um PNG ou JPG) para que a imagem seja exibida.

O aplicativo de exemplo define um desenho chamado splash_screen.xml. Esse desenho usa uma lista de camadas para centralizar a imagem da tela inicial no aplicativo, conforme mostrado no seguinte xml:

<?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 no Android Drawable.

Implementando um tema

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

<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 o fundo da janela, remove explicitamente a barra de título da janela, e declara que é tela cheia. Se você quiser criar uma tela inicial que emule a interface do usuário do seu aplicativo antes que a atividade inflacione o primeiro layout, você pode usar windowContentOverlay em vez de windowBackground na 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 de splash

Agora precisamos de uma nova atividade para Android para lançar que tem a nossa imagem inicial e executa quaisquer tarefas de inicialização. O código a seguir é um exemplo de uma implementação de tela inicial completa:

[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 há necessidade de carregar um layout OnCreate , pois o tema declara um desenho como plano de fundo.

É importante definir o NoHistory=true atributo para que a atividade seja removida da pilha traseira. Para evitar 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 no OnResume. Isso é necessário para que o trabalho de inicialização não diminua ou atrase o aparecimento da tela de lançamento. Quando o trabalho for concluído, SplashActivity será iniciado MainActivity e o usuário poderá começar a interagir com o aplicativo.

Esse novo SplashActivity é definido como a atividade do iniciador para o aplicativo, definindo o MainLauncher atributo como true. Como SplashActivity agora é a atividade do iniciador, 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 nos modos retrato e paisagem. No entanto, em alguns casos, é necessário ter telas iniciais separadas para os modos retrato e paisagem (por exemplo, se a imagem inicial for de tela cheia).

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 da tela inicial que você deseja usar. Neste exemplo, splash_logo_land.png é a versão paisagem do logotipo que foi usado nos exemplos acima (ele usa letras brancas em vez de azuis).

2. Na pasta Recursos/desenhável, crie uma versão paisagem do layer-list desenho que foi definida anteriormente (por exemplo, splash_screen_land.xml). Nesse arquivo, defina o caminho do bitmap para a versão paisagem da imagem da 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 (estes podem ser copiados e modificados a partir dos arquivos de valores/colors.xml e valores/style.xml existentes).

5. Modifique valores-terra/style.xml para que ele use a versão paisagem do desenho 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 do plano de fundo de splash é 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 no modo paisagem nem sempre fornece uma experiência perfeita. Por padrão, o Android inicia o aplicativo no modo retrato e 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 retrato e, em seguida, animará a rotação da tela inicial retrato para a tela inicial paisagem. Infelizmente, essa transição inicial de retrato para paisagem ocorre mesmo quando ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape é especificada nos sinalizadores da Atividade de splash. A melhor maneira de contornar essa limitação é criar uma única imagem de tela inicial que renderiza corretamente nos modos retrato e paisagem.

Resumo

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

Links relacionados

• layer-list Desenhável
• Padrões de Design de Materiais - Telas de Lançamento