Adicionar um ícone de aplicativo a um projeto de aplicativo .NET MAUI
Cada aplicativo tem um ícone de logotipo que o representa, e esse ícone normalmente aparece em vários lugares. Por exemplo, no iOS, o ícone do aplicativo aparece na tela inicial e em todo o sistema, como em Configurações, notificações e resultados de pesquisa e na App Store. No Android, o ícone do aplicativo aparece como um ícone de iniciador e em todo o sistema, como na barra de ações, notificações e na Google Play Store. No Windows, o ícone do aplicativo aparece na lista de aplicativos no menu Iniciar, na barra de tarefas, no bloco do aplicativo e na Microsoft Store.
Em um projeto de aplicativo .NET Multi-platform App UI (.NET MAUI), um ícone de aplicativo pode ser especificado em um único local em seu projeto de aplicativo. Em tempo de compilação, esse ícone pode ser redimensionado automaticamente para a resolução correta para a plataforma e o dispositivo de destino e adicionado ao pacote do aplicativo. Isso evita ter que duplicar manualmente e nomear o ícone do aplicativo por plataforma. Por padrão, os formatos de imagem bitmap (não vetoriais) não são redimensionados automaticamente pelo .NET MAUI.
Um ícone de aplicativo .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 (Portable Network Graphic). 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.
Altere o ícone
Em seu projeto .NET MAUI, a imagem com a ação de compilação designa o ícone a MauiIcon ser usado para seu aplicativo. Isso é representado no arquivo de projeto como o <MauiIcon> item. Você pode ter apenas um ícone definido para seu aplicativo. Todos os itens subsequentes <MauiIcon> são ignorados.
O ícone definido pelo seu aplicativo pode ser composto de uma única imagem, especificando o arquivo como o Include atributo:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" />
</ItemGroup>
Somente o primeiro <MauiIcon> item definido no arquivo de projeto é processado pelo .NET MAUI. Se você quiser usar um arquivo diferente como ícone, primeiro exclua o ícone existente do seu projeto e, em seguida, adicione o novo ícone arrastando-o para a pasta Resources\AppIcon do seu projeto. O Visual Studio definirá automaticamente sua ação de compilação e MauiIcon criará um item correspondente <MauiIcon> em seu arquivo de projeto.
Observação
Um ícone de aplicativo também pode ser adicionado a outras pastas do seu projeto de aplicativo. No entanto, nesse cenário, sua ação de compilação deve ser definida manualmente como MauiIcon na janela Propriedades .
Para estar em conformidade com as regras de nomenclatura de recursos do Android, os nomes de arquivos de ícones de aplicativos 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.
Depois de alterar o arquivo de ícone, talvez seja necessário limpar o projeto no Visual Studio. Para limpar o projeto, clique com o botão direito do mouse no arquivo de projeto no painel Gerenciador de Soluções e selecione Limpar. Você também pode precisar desinstalar o aplicativo da plataforma de destino com a qual está testando.
Cuidado
Se você não limpar o projeto e desinstalar o aplicativo da plataforma de destino, talvez não veja seu novo ícone.
Depois de alterar o ícone, revise as informações de configuração específicas da plataforma.
Ícone composto
Como alternativa, o ícone do aplicativo pode ser composto por duas imagens, uma representando o plano de fundo e outra representando o primeiro plano. Como os ícones são transformados em arquivos PNG, o ícone do aplicativo composto será primeiro colocado em camadas com a imagem de fundo, normalmente uma imagem de um padrão ou cor sólida, seguida pela imagem de primeiro plano. Nesse caso, o atributo representa a imagem de plano de fundo do ícone e o IncludeForeground atributo representa a imagem de primeiro plano:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
</ItemGroup>
Importante
A imagem de plano de fundo (Include atributo ) deve ser especificada para o <MauiIcon> item. A imagem de primeiro plano (ForegroundFile atributo) é opcional.
Definir o tamanho base
O .NET MAUI usa seu ícone em várias plataformas e dispositivos e tenta redimensionar o ícone de acordo com cada plataforma e dispositivo. O ícone do aplicativo também é usado para diferentes finalidades, como uma entrada da loja para seu aplicativo ou o ícone usado para representar o aplicativo depois que ele é instalado em um dispositivo.
O tamanho base do ícone representa a densidade da linha de base da imagem e é efetivamente o fator de escala 1.0 do qual todos os outros tamanhos são derivados. Se você não especificar o tamanho base de um ícone de aplicativo baseado em bitmap, como um arquivo PNG, a imagem não será redimensionada. Se você não especificar o tamanho base para um ícone de aplicativo baseado em vetor, como um arquivo SVG, as dimensões especificadas na imagem serão usadas como o tamanho base. Para impedir que uma imagem vetorial seja redimensionada, defina o Resize atributo como false.
A figura a seguir ilustra como o tamanho base afeta uma imagem:
O processo mostrado na figura anterior segue estas etapas:
- A: A imagem é adicionada como o ícone do .NET MAUI e tem dimensões de 210x260, e o tamanho base é definido como 424x520.
- B: .NET MAUI dimensiona automaticamente a imagem para corresponder ao tamanho base de 424x520.
- C: Como diferentes plataformas de destino exigem tamanhos diferentes da imagem, o .NET MAUI dimensiona automaticamente a imagem do tamanho base para tamanhos diferentes.
Dica
Use uma imagem SVG como ícone. 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 BaseSize="W,H" atributo , onde W é a largura do ícone e H é a altura do ícone. O exemplo a seguir define o tamanho base:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="128,128" />
</ItemGroup>
E o exemplo a seguir interrompe o redimensionamento automático de uma imagem baseada em vetor:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" Resize="false" />
</ItemGroup>
Recolorir o plano de fundo
Se a imagem de plano de fundo usada na composição do ícone do aplicativo usar transparência, ela poderá ser recolorida especificando o Color atributo no <MauiIcon>. O exemplo a seguir define a cor do plano de fundo do ícone do aplicativo como vermelho:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#FF0000" />
</ItemGroup>
Os valores de cor podem ser especificados em hexadecimal, usando o formato: #RRGGBB ou #AARRGGBB. O valor de RR representa o canal vermelho, GG o canal verde, BB o canal azul e AA o canal alfa. Em vez de um valor hexadecimal, você pode usar uma cor MAUI .NET nomeada, como Red ou PaleVioletRed.
Cuidado
Se você não definir uma cor de plano de fundo para o ícone do aplicativo, o plano de fundo será considerado transparente no iOS e no Mac Catalyst. Isso causará um erro durante a verificação do App Store Connect e você não poderá carregar seu aplicativo.
Recolorir o primeiro plano
Se o ícone do aplicativo for composto por uma imagem de plano de fundo () e uma imagem de primeiro plano (IncludeForegroundFile), a imagem de primeiro plano poderá ser colorida. Para tingir a imagem de primeiro plano, especifique uma cor com o TintColor atributo. O exemplo a seguir matiza a imagem de primeiro plano em amarelo:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
Os valores de cor podem ser especificados em hexadecimal, usando o formato: #RRGGBB ou #AARRGGBB. O valor de RR representa o canal vermelho, GG o canal verde, BB o canal azul e AA o canal alfa. Em vez de um valor hexadecimal, você pode usar uma cor MAUI .NET nomeada, como Red ou PaleVioletRed.
Usar um ícone diferente por plataforma
Se você quiser usar recursos de ícone ou configurações diferentes por plataforma, adicione o Condition atributo ao <MauiIcon> item e consulte a plataforma específica. Se a condição for atendida, o <MauiIcon> item será processado. Somente o primeiro item válido <MauiIcon> é usado pelo .NET MAUI, portanto, todos os itens condicionais devem ser declarados primeiro, seguidos por um item padrão <MauiIcon> sem uma condição. O XML a seguir demonstra a declaração de um ícone específico para o Windows e um ícone de fallback para todas as outras plataformas:
<ItemGroup>
<!-- App icon for Windows -->
<MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'"
Include="Resources\AppIcon\backicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="#40FF00FF" />
<!-- App icon for all other platforms -->
<MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
Você pode definir a plataforma de destino alterando o valor comparado na condição para um dos seguintes valores:
'ios''maccatalyst''android''windows'
Por exemplo, uma condição voltada para o Android seria Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'".
Configuração específica da plataforma
Embora o arquivo de projeto declare de quais recursos o ícone do aplicativo é composto, você ainda precisará atualizar as configurações de plataforma individuais com referência a esses ícones de aplicativo. As informações a seguir descrevem essas configurações específicas da plataforma.
O ícone que o Android usa é especificado no manifesto do Android, que está localizado em Platforms\Android\AndroidManifest.xml. O manifest/application nó contém dois atributos para definir o ícone: android:icon e android:roundIcon. Os valores desses dois atributos seguem este formato: @mipmap/{name} e @mipmap/{name}_round, respectivamente. O valor para {name} é derivado do item do arquivo de projeto .NET MAUI, especificamente o nome do arquivo <MauiIcon> definido pelo Include atributo, sem seu caminho ou extensão.
Considere o exemplo a seguir, que define o recurso Resources\AppIcon\healthapp.png como o ícone:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\healthapp.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
O nome transformado, o recurso sem o caminho ou extensão, é healthapp. Os valores para android:icon e seriam @mipmap/healthapp e android:roundIcon@mipmap/healthapp_round, respectivamente. O manifesto do Android deve ser atualizado para corresponder healthapp como o ícone:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:icon="@mipmap/healthapp" android:roundIcon="@mipmap/healthapp_round" android:supportsRtl="true"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
Dica
Em vez de criar novos arquivos de imagem para o ícone, basta substituir os dois arquivos de imagem fornecidos pelo modelo .NET MAUI: Resources\AppIcon\appicon.svg para o plano de fundo e Resources\AppIcon\appiconfg.svg para o primeiro plano.
Lançador adaptável
O .NET MAUI oferece suporte à criação de um ícone de iniciador adaptável no Android 8.0 e superior, a partir do ícone do aplicativo. Os ícones do iniciador adaptável podem ser exibidos como várias formas em diferentes modelos de dispositivos, incluindo circulares e quadrados. Para obter mais informações sobre ícones adaptáveis, consulte o Guia do desenvolvedor do Android: ícones adaptáveis.
Os ícones do iniciador adaptável são ícones compostos, usando uma camada de plano de fundo e uma camada de primeiro plano, e um valor de dimensionamento opcional. Para obter mais informações, consulte a seção Ícone composto. Se o ícone composto for definido, especificando o atributo ForegroundFile , um ícone do ativador adaptável será gerado. O XML a seguir demonstra a definição de um ícone que é usado como um ícone do iniciador adaptável:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" ForegroundScale="0.65" Color="#512BD4" />
</ItemGroup>
O ForegroundScale atributo pode ser opcionalmente especificado para alterar o dimensionamento da camada de primeiro plano que está sendo renderizada sobre a camada de plano de fundo.
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de