Adición de un icono de aplicación a un proyecto de aplicación MAUI de .NET
Cada aplicación tiene un icono de logotipo que lo representa y ese icono suele aparecer en varios lugares. Por ejemplo, en iOS, el icono de la aplicación aparece en la pantalla Inicio y en todo el sistema, como en Configuración, notificaciones y resultados de búsqueda, y en app Store. En Android, el icono de la aplicación aparece como un icono de iniciador y en todo el sistema, como en la barra de acciones, las notificaciones y en Google Play Store. En Windows, el icono de la aplicación aparece en la lista de aplicaciones en el menú Inicio, la barra de tareas, el icono de la aplicación y en Microsoft Store.
En un proyecto de aplicación .NET Multi-platform App UI (.NET MAUI), se puede especificar un icono de aplicación en una sola ubicación del proyecto de aplicación. En tiempo de compilación, este icono se puede cambiar automáticamente a la resolución correcta para la plataforma y el dispositivo de destino, y agregarse al paquete de la aplicación. Esto evita tener que duplicar manualmente y asignar un nombre al icono de la aplicación por plataforma. De forma predeterminada, los formatos de imagen de mapa de bits (no vectoriales) no cambian automáticamente el tamaño de .NET MAUI.
Un icono de aplicación MAUI de .NET puede usar cualquiera de los formatos de imagen de plataforma estándar, incluidos los archivos de gráficos vectoriales escalables (SVG).
Importante
.NET MAUI convierte archivos SVG en archivos Portable Network Graphic (PNG). Por lo tanto, al agregar un archivo SVG al proyecto de aplicación MAUI de .NET, se debe hacer referencia desde XAML o C# con una extensión .png . La única referencia al archivo SVG debe estar en el archivo del proyecto.
Cambiar el icono
En el proyecto MAUI de .NET, la imagen con la MauiIcon acción de compilación designa el icono que se va a usar para la aplicación. Esto se representa en el archivo del proyecto como elemento <MauiIcon> . Es posible que solo tenga un icono definido para la aplicación. Se omiten los elementos posteriores <MauiIcon> .
El icono definido por la aplicación se puede componer de una sola imagen, especificando el archivo como el Include atributo :
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" />
</ItemGroup>
Solo el primer <MauiIcon> elemento definido en el archivo de proyecto lo procesa .NET MAUI. Si desea usar un archivo diferente como icono, elimine primero el icono existente del proyecto y, a continuación, agregue el nuevo icono arrastrándolo a la carpeta Resources\AppIcon del proyecto. Visual Studio establecerá automáticamente su acción MauiIcon de compilación en y creará un elemento correspondiente <MauiIcon> en el archivo del proyecto.
Nota:
También se puede agregar un icono de aplicación a otras carpetas del proyecto de aplicación. Sin embargo, en este escenario, su acción de compilación debe establecerse MauiIcon manualmente en en la ventana Propiedades .
Para cumplir con las reglas de nomenclatura de recursos de Android, los nombres de archivo de icono de aplicación deben estar en minúsculas, iniciar y terminar con un carácter de letra y contener solo caracteres alfanuméricos o caracteres de subrayado. Para obtener más información, consulta Descripción general de los recursos de las apps en developer.android.com.
Después de cambiar el archivo de icono, es posible que tenga que limpiar el proyecto en Visual Studio. Para limpiar el proyecto, haga clic con el botón derecho en el archivo del proyecto en el panel Explorador de soluciones y seleccione Limpiar. También es posible que deba desinstalar la aplicación de la plataforma de destino con la que está probando.
Precaución
Si no limpia el proyecto y desinstala la aplicación de la plataforma de destino, es posible que no vea el nuevo icono.
Después de cambiar el icono, revise la información de configuración específica de la plataforma.
Icono compuesto
Como alternativa, el icono de la aplicación se puede componer de dos imágenes, una imagen que representa el fondo y otra que representa el primer plano. Dado que los iconos se transforman en archivos PNG, el icono de la aplicación compuesta se superpondrá primero a la imagen de fondo, normalmente una imagen de un patrón o un color sólido, seguido de la imagen en primer plano. En este caso, el Include atributo representa la imagen de fondo del icono y el Foreground atributo representa la imagen en primer plano:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
</ItemGroup>
Importante
La imagen de fondo (Include atributo) debe especificarse para el <MauiIcon> elemento. La imagen en primer plano (ForegroundFile atributo) es opcional.
Establecimiento del tamaño base
.NET MAUI usa el icono en varias plataformas y dispositivos e intenta cambiar el tamaño del icono según cada plataforma y dispositivo. El icono de la aplicación también se usa para diferentes propósitos, como una entrada de la tienda para la aplicación o el icono que se usa para representar la aplicación después de instalarla en un dispositivo.
El tamaño base del icono representa la densidad de línea base de la imagen y es eficazmente el factor de escala de 1,0 del que se derivan todos los demás tamaños. Si no especifica el tamaño base de un icono de aplicación basado en mapa de bits, como un archivo PNG, la imagen no cambia de tamaño. Si no especifica el tamaño base de un icono de aplicación basado en vectores, como un archivo SVG, las dimensiones especificadas en la imagen se usan como tamaño base. Para impedir que se cambie el tamaño de una imagen vectorial, establezca el Resize atributo falseen .
En la ilustración siguiente se muestra cómo afecta el tamaño base a una imagen:
El proceso que se muestra en la ilustración anterior sigue estos pasos:
- A: la imagen se agrega como el icono de MAUI de .NET y tiene dimensiones de 210x260 y el tamaño base se establece en 424x520.
- B: .NET MAUI escala automáticamente la imagen para que coincida con el tamaño base de 424x520.
- C: a medida que diferentes plataformas de destino requieren diferentes tamaños de la imagen, .NET MAUI escala automáticamente la imagen del tamaño base a diferentes tamaños.
Sugerencia
Use una imagen SVG como icono. Las imágenes SVG se pueden escalar a tamaños más grandes y seguir teniendo un aspecto nítido y limpio. Las imágenes basadas en mapas de bits, como una imagen PNG o JPG, se ven borrosas cuando se escalan verticalmente.
El tamaño base se especifica con el BaseSize="W,H" atributo , donde W es el ancho del icono y H es el alto del icono. En el siguiente ejemplo, se establece el tamaño base:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="128,128" />
</ItemGroup>
Y en el ejemplo siguiente se detiene el cambio automático de tamaño de una imagen basada en vectores:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" Resize="false" />
</ItemGroup>
Volver a colorear el fondo
Si la imagen de fondo usada en la redacción del icono de la aplicación usa transparencia, se puede volver a colorear especificando el Color atributo en .<MauiIcon> En el ejemplo siguiente se establece el color de fondo del icono de la aplicación en rojo:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#FF0000" />
</ItemGroup>
Los valores de color se pueden especificar en hexadecimal, con el formato : #RRGGBB o #AARRGGBB. El valor de RR representa el canal rojo, GG el canal verde, BB el canal azul y AA el canal alfa. En lugar de un valor hexadecimal, puede usar un color .NET MAUI con nombre, como Red o PaleVioletRed.
Precaución
Si no defines un color de fondo para el icono de la aplicación, el fondo se considera transparente en iOS y Mac Catalyst. Esto provocará un error durante la comprobación de App Store Conectar y no podrá cargar la aplicación.
Volver a colorear el primer plano
Si el icono de la aplicación se compone de una imagen de fondo (Include) y una imagen de primer plano (ForegroundFile), la imagen de primer plano se puede tintar. Para dibujar la imagen en primer plano, especifique un color con el TintColor atributo . En el ejemplo siguiente se tinta la imagen de primer plano en amarillo:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
Los valores de color se pueden especificar en hexadecimal, con el formato : #RRGGBB o #AARRGGBB. El valor de RR representa el canal rojo, GG el canal verde, BB el canal azul y AA el canal alfa. En lugar de un valor hexadecimal, puede usar un color .NET MAUI con nombre, como Red o PaleVioletRed.
Uso de un icono diferente por plataforma
Si desea usar diferentes recursos de icono o configuración por plataforma, agregue el Condition atributo al <MauiIcon> elemento y consulte la plataforma específica. Si se cumple la condición, se procesa el <MauiIcon> elemento. Solo .NET MAUI usa el primer elemento válido <MauiIcon> , por lo que todos los elementos condicionales deben declararse primero, seguidos de un elemento predeterminado <MauiIcon> sin una condición. En el siguiente XML se muestra cómo declarar un icono específico para Windows y un icono de reserva para todas las demás 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>
Puede establecer la plataforma de destino cambiando el valor comparado en la condición a uno de los siguientes valores:
'ios''maccatalyst''android''windows'
Por ejemplo, una condición destinada a Android sería Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'".
Configuración específica de la plataforma
Aunque el archivo de proyecto declara los recursos a los que se compone el icono de la aplicación, sigue siendo necesario actualizar las configuraciones de plataforma individuales con referencia a esos iconos de aplicación. En la siguiente información se describe esta configuración específica de la plataforma.
El icono que usa Android se especifica en el manifiesto de Android, que se encuentra en Platforms\Android\AndroidManifest.xml. El manifest/application nodo contiene dos atributos para definir el icono: android:icon y android:roundIcon. Los valores de estos dos atributos siguen este formato: @mipmap/{name} y @mipmap/{name}_round, respectivamente. El valor de {name} se deriva del elemento del archivo de <MauiIcon> proyecto MAUI de .NET, específicamente el nombre de archivo definido por el Include atributo, sin su ruta de acceso o extensión.
Considere el ejemplo siguiente, que define el recurso Resources\AppIcon\healthapp.png como el icono:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\healthapp.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
El nombre transformado, el recurso sin la ruta de acceso o la extensión, es healthapp. Los valores de android:icon y android:roundIcon serían @mipmap/healthapp y @mipmap/healthapp_round, respectivamente. El manifiesto de Android debe actualizarse para que coincida healthapp como el icono:
<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>
Sugerencia
En lugar de crear nuevos archivos de imagen para el icono, simplemente reemplace los dos archivos de imagen proporcionados por la plantilla MAUI de .NET: Resources\AppIcon\appicon.svg para el fondo y Resources\AppIcon\appiconfg.svg para el primer plano.
Iniciador adaptable
.NET MAUI admite la creación de un icono de iniciador adaptable en Android 8.0 y versiones posteriores, desde el icono de la aplicación. Los iconos del iniciador adaptable pueden mostrarse como varias formas en diferentes modelos de dispositivo, incluidos circulares y cuadrados. Para obtener más información sobre los iconos adaptables, consulte la guía para desarrolladores de Android: Iconos adaptables.
Los iconos del iniciador adaptable son iconos compuestos, mediante una capa de fondo y una capa de primer plano, y un valor de escalado opcional. Para obtener más información, consulte la sección Icono compuesto. Si se define el icono compuesto, especificando el ForegroundFile atributo , se generará un icono de iniciador adaptable. El siguiente XML muestra cómo definir un icono que se usa como icono de iniciador adaptable:
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" ForegroundScale="0.65" Color="#512BD4" />
</ItemGroup>
El ForegroundScale atributo se puede especificar opcionalmente para cambiar el escalado de la capa de primer plano que se representa en la capa de fondo.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de