Compartilhar via

Adicionar uma tela inicial a um projeto de aplicativo .NET MAUI

  • Artigo

No Android e iOS, os aplicativos .NET Multi-platform App UI (.NET MAUI) podem exibir uma tela inicial enquanto seu processo de inicialização é concluído. A tela inicial é exibida imediatamente quando um aplicativo é iniciado, fornecendo feedback imediato aos usuários enquanto os recursos do aplicativo são inicializados:

.NET MAUI splash screens screenshot.

Quando o aplicativo estiver pronto para interação, sua tela inicial será descartada.

Observação

No Android 12+ (API 31+), a tela inicial mostra um ícone centralizado na tela. Para obter mais informações sobre telas iniciais no Android 12+, consulte Telas iniciais no developer.android.com.

Em um projeto de aplicativo .NET MAUI, uma tela inicial pode ser especificada em um único local em seu projeto de aplicativo e, em tempo de compilação, pode ser redimensionada para a resolução correta para a plataforma de destino e adicionada ao pacote do aplicativo. Isso evita ter que duplicar manualmente e nomear a tela inicial em uma base por plataforma. Por padrão, os formatos de imagem bitmap (não vetoriais) não são redimensionados automaticamente pelo .NET MAUI.

Uma tela inicial do .NET Maui pode usar qualquer um dos formatos de imagem de plataforma padrão, incluindo arquivos SVG (Scalable Vector Graphics).

Importante

O .NET MAUI converte arquivos SVG em arquivos PNG. Portanto, ao adicionar um arquivo SVG ao seu projeto de aplicativo .NET MAUI, ele deve ser referenciado de XAML ou C# com uma extensão .png. A única referência ao arquivo SVG deve estar no arquivo de projeto.

Uma tela inicial pode ser adicionada ao seu projeto de aplicativo arrastando uma imagem para a pasta Resources\Splash do projeto, onde sua ação de compilação será definida automaticamente como MauiSplashScreen. Isso cria uma entrada correspondente no arquivo de projeto:

<ItemGroup>
  <MauiSplashScreen Include="Resources\Splash\splashscreen.svg" />
</ItemGroup>

Observação

Uma tela inicial também pode ser adicionada a outras pastas do seu projeto de aplicativo. No entanto, nesse cenário, sua ação de compilação deve ser definida manualmente como MauiSplashScreen na janela Propriedades .

Para estar em conformidade com as regras de nomenclatura de recursos do Android, os nomes dos arquivos da tela inicial devem ser minúsculos, começar e terminar com um caractere de letra e conter apenas caracteres alfanuméricos ou sublinhados. Para obter mais informações, consulte Visão geral dos recursos do aplicativo no developer.android.com.

Em tempo de compilação, a imagem da tela inicial é redimensionada para o tamanho correto para a plataforma e o dispositivo de destino. A tela inicial redimensionada é adicionada ao pacote do aplicativo. Para obter informações sobre como desabilitar o empacotamento da tela inicial, consulte Desabilitar o empacotamento da tela inicial. Para obter informações sobre como gerar uma tela inicial em branco, consulte Gerar uma tela inicial em branco.

Definir o tamanho base

O .NET MAUI usa sua tela inicial em várias plataformas e pode redimensioná-la para cada plataforma.

O tamanho base de uma imagem de tela inicial representa a densidade de linha de base da imagem e é efetivamente o fator de escala 1.0 para a imagem (o tamanho que você normalmente usaria em seu código para especificar o tamanho da tela inicial) do qual todos os outros tamanhos são derivados. Se você não especificar o tamanho base de uma imagem bitmap, a imagem não será redimensionada. Se você não especificar um tamanho base para uma imagem vetorial, como um arquivo SVG, as dimensões especificadas na imagem serão usadas como o tamanho base.

O diagrama a seguir ilustra como o tamanho base afeta uma imagem:

How base size affects an app icon for .NET MAUI.

O processo mostrado no diagrama segue estas etapas:

  • R: A imagem tem dimensões de 210x260 e o tamanho base é definido como 424x520.
  • B: O .NET MAUI dimensiona a imagem para corresponder ao tamanho base de 424x520.
  • C: Como diferentes plataformas de destino exigem tamanhos diferentes da imagem, o .NET MAUI dimensiona a imagem do tamanho base para tamanhos diferentes.

Dica

Use imagens SVG sempre que possível. As imagens SVG podem aumentar para tamanhos maiores e ainda parecer nítidas e limpas. Imagens baseadas em bitmap, como uma imagem PNG ou JPG, parecem borradas quando ampliadas.

O tamanho base é especificado com o atributo BaseSize="W,H" , onde W é a largura da imagem e H é a altura da imagem. O exemplo a seguir define o tamanho base:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" BaseSize="128,128" />

No momento da compilação, a tela inicial será redimensionada para a resolução correta para a plataforma de destino. A tela inicial resultante é adicionada ao pacote do aplicativo.

Para impedir que as imagens vetoriais sejam redimensionadas, defina o Resize atributo como false:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Resize="false" />

Adicionar tonalidade e cor de fundo

Para adicionar uma tonalidade à tela inicial, que é útil quando você tem uma imagem simples que deseja renderizar em uma cor diferente da origem, defina o TintColor atributo:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" TintColor="#66B3FF" />

Uma cor de plano de fundo para a tela inicial também pode ser especificada:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Color="#512BD4" />

Os valores de cor podem ser especificados em hexadecimal ou como uma cor MAUI do .NET. Por exemplo, Color="Red" é válido.

Configuração específica da plataforma

No Android, a tela inicial é adicionada ao pacote do aplicativo como Recursos/valores/maui_colors.xml e Recursos/desenhável/maui_splash_image.xml. Os aplicativos .NET MAUI usam o por padrão, o Maui.SplashTheme que garante que uma tela inicial será exibida, se presente. Portanto, você não deve especificar um tema diferente em seu arquivo de manifesto ou em sua MainActivity classe:

using Android.App;
using Android.Content.PM;

namespace MyMauiApp
{
      [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
      public class MainActivity : MauiAppCompatActivity
      {
      }
}

Para cenários de tela inicial mais avançados, aplicam-se abordagens por plataforma.