Personalizar iconos¶
La aplicación desarrollada en el tutorial principal utiliza un icono de "abeja gris" predeterminado cuando esté empaquetado. Personalice esta aplicación para configurarla para utilizar su propio icono.
Nota
En BeeWare, el término icono puede referirse a dos cosas diferentes:
-
Icono de aplicación — La imagen que representa tu aplicación en el escritorio, el dock o la pantalla de inicio.
-
Iconos de tiempo de ejecución — Imágenes utilizadas en la interfaz de tu aplicación (por ejemplo, en botones o tablas).
Añadir un icono¶
Cada plataforma utiliza un formato diferente para los iconos de la aplicación; y algunas plataformas necesitan múltiples iconos de tamaños y formas diferentes. Para tener esto en cuenta, Briefcase proporciona una forma abreviada para configurar un icono una vez, y luego hacer que esa definición se expanda en todos los iconos diferentes necesarios para cada plataforma individual.
Edita tu pyproject.toml, añadiendo un elemento de configuración icon nuevo
en la sección de configuración [tool.briefcase.app.helloworld], justo encima
de la definición sources:
icon = "icons/helloworld"
Esta definición de icono no especifica ninguna extensión de archivo. El valor será utilizada como prefijo; cada plataforma añadirá elementos adicionales a este prefijo para crear los archivos necesarios para cada plataforma. Algunas plataformas requieren múltiples archivos de icono; este prefijo se combinará con modificadores de tamaño de archivo y variantes para generar la lista de archivos de iconos que son utilizados.
Ahora podemos ejecutar briefcase update de nuevo — pero esta vez, le pasamos
el indicador --update-resources, diciéndole a Briefcase que queremos instalar
recursos nuevos de la aplicación (es decir, los iconos):
(beeware-venv) $ briefcase update --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
No se encuentra icons/helloworld.icns para el icono de la aplicación; se utiliza el predeterminado
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
(beeware-venv) $ briefcase update --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
No se encuentra icons/helloworld-16.png para el icono de la aplicación de 16 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-32.png para el icono de la aplicación de 32 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-64.png para el icono de la aplicación de 64 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-128.png para el icono de la aplicación de 128 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-256.png para el icono de la aplicación de 256 píxeles; se utilizará el predeterminado
No se encuentra icons/helloworld-512.png para el icono de la aplicación de 512 píxeles; se utilizará el predeterminado
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
(beeware-venv) C:\...>briefcase update --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
No se encuentra icons/helloworld.ico para el icono de la aplicación; se utiliza el predeterminado
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
(beeware-venv) $ briefcase update android --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
No se encuentra icons/helloworld-round-48.png para el icono redondo de 48 píxeles de la aplicación; se utiliza el predeterminado
No se encuentra icons/helloworld-round-72.png para el icono redondo de 72 píxeles de la aplicación; se utiliza el predeterminado
No se encuentra icons/helloworld-round-96.png para el icono redondo de 96 píxeles de la aplicación; se utiliza el predeterminado
No se encuentra icons/helloworld-round-144.png para el icono redondo de 144 píxeles de la aplicación; se utiliza el predeterminado
No se encuentra icons/helloworld-round-192.png para el icono de aplicación redondo de 192 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-48.png para el icono de aplicación cuadrado de 48 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-72.png para el icono de aplicación cuadrado de 72 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-96.png para el icono de aplicación cuadrado de 96 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-144.png para el icono de aplicación cuadrado de 144 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-192.png para el icono de aplicación cuadrado de 192 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-320.png para el icono de aplicación cuadrado de 320 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-480.png para el icono de aplicación cuadrado de 480 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-640.png para el icono de aplicación cuadrado de 640 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-960.png para el icono de aplicación cuadrado de 960 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-square-1280.png para el icono de aplicación cuadrado de 1280 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-adaptive-108.png para el icono de aplicación adaptativo de 108 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-adaptive-162.png para el icono de aplicación adaptativo de 162 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-adaptive-216.png para el icono de aplicación adaptativo de 216 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-adaptive-324.png para el icono de aplicación adaptativo de 324 píxeles; se utiliza el predeterminado
No se encuentra icons/helloworld-adaptive-432.png para el icono de aplicación adaptativo de 432 píxeles; se utilizará el predeterminado
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
(beeware-venv) $ briefcase iOS --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
No se encuentra el icons/helloworld-20.png para el icono de la aplicación de 20 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-29.png para el icono de la aplicación de 29 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-40.png para el icono de la aplicación de 40 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-58.png para el icono de la aplicación de 58 píxeles; se utilizará el predeterminado
No se encuentra el icons/helloworld-60.png para el icono de la aplicación de 60 píxeles; se utilizará el predeterminado
No se encuentra el icons/helloworld-76.png para el icono de la aplicación de 76 píxeles; se utilizará el predeterminado
No se encuentra el icons/helloworld-80.png para el icono de la aplicación de 80 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-87.png para el icono de la aplicación de 87 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-120.png para el icono de la aplicación de 120 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-152.png para el icono de la aplicación de 152 píxeles; se utilizará el predeterminado
No se encuentra el icons/helloworld-167.png para el icono de la aplicación de 167 píxeles; se utilizará el predeterminado
No se encuentra el icons/helloworld-180.png para el icono de la aplicación de 180 píxeles; se utilizará el predeterminado
No se encuentra el icons/helloworld-640.png para el icono de la aplicación de 640 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-1024.png para el icono de la aplicación de 1024 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-1280.png para el icono de la aplicación de 1280 píxeles; se utiliza el predeterminado
No se encuentra el icons/helloworld-1920.png para el icono de la aplicación de 1920 píxeles; se utiliza el predeterminado
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
Esto presenta el archivo (o archivos) de icono específico que Briefcase está esperando. Sin embargo, como no hemos proporcionado los archivos de icono actuales, la instalación falla y Briefcase retrocede a un valor predeterminado (el mismo icono de “abeja gris”).
Vamos a proporcionar algunos iconos actuales. Descarga este paquete icons.zip, y descomprímelo en la raíz del directorio de tu proyecto. Después de descomprimir, tu directorio del proyecto debe parecer algo como:
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ └── ...
└── pyproject.toml
Hay muchos iconos en esta carpeta, pero la mayoría deberían tener el mismo aspecto: una serpiente verde sobre un fondo azul claro:
/// subtítulo
///
La única excepción serán los iconos con -adaptive- en su nombre; éstos tendrán
un fondo transparente. Esto representa todos los diferentes tamaños y formas de
iconos que necesitas para soportar una aplicación en todas las plataformas que
soporta Briefcase.
Ahora que tenemos iconos, de nuevo podemos actualizar la aplicación. Sin
embargo, briefcase update solo copiará los recursos actualizados en el
directorio de construcción; queremos además recrear la aplicación para
asegurarnos que el icono nuevo está incluido, luego iniciar la aplicación.
Podemos acortar este proceso pasando --update-resources a nuestra invocación a
run - esto actualizará la aplicación y los recursos de la aplicación, y luego
iniciará la aplicación:
(beeware-venv) $ briefcase run --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
Instalando icons/helloworld.icns como icono de la aplicación... hecho
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
[helloworld] Firmando la aplicación de forma ad hoc...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100,0 % • 00:01
[helloworld] Se ha creado build/helloworld/macos/app/Hello World.app
[helloworld] Iniciando la aplicación...
(beeware-venv) $ briefcase run --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
Instalando icons/helloworld-16.png como icono de la aplicación de 16 píxeles... hecho
Instalando icons/helloworld-32.png como icono de aplicación de 32 píxeles... hecho
Instalando icons/helloworld-64.png como icono de aplicación de 64 píxeles... hecho
Instalando icons/helloworld-128.png como icono de aplicación de 128 píxeles... hecho
Instalando icons/helloworld-256.png como icono de aplicación de 256 píxeles... hecho
Instalando icons/helloworld-512.png como icono de aplicación de 512 píxeles... hecho
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
[helloworld] Creando la aplicación...
Creando el binario de arranque...
...
[helloworld] Creando build/helloworld/linux/ubuntu/jammy/helloworld-0.0.1/usr/bin/helloworld
[helloworld] Iniciando la aplicación...
(beeware-venv) C:\...>briefcase build --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
Instalando icons/helloworld.ico como icono de la aplicación... hecho
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
[helloworld] Compilando la aplicación...
Eliminando cualquier firma digital de la aplicación stub... hecho
Configurando los detalles de la aplicación stub... hecho
[helloworld] Compilado build\helloworld\windows\app\src\Hello World.exe
[helloworld] Iniciando la aplicación...
(beeware-venv) $ briefcase build android --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
Instalando icons/helloworld-round-48.png como icono redondo de la aplicación de 48 píxeles... hecho
Instalando icons/helloworld-round-72.png como icono de aplicación redondo de 72 píxeles... hecho
Instalando icons/helloworld-round-96.png como icono de aplicación redondo de 96 píxeles... hecho
Instalando icons/helloworld-round-144.png como icono de aplicación redondo de 144 píxeles... hecho
Instalando icons/helloworld-round-192.png como icono de aplicación redondo de 192 píxeles... hecho
Instalando icons/helloworld-square-48.png como icono de aplicación cuadrado de 48 píxeles... hecho
Instalando icons/helloworld-square-72.png como icono de aplicación cuadrado de 72 píxeles... hecho
Instalando icons/helloworld-square-96.png como icono de aplicación cuadrado de 96 píxeles... hecho
Instalando icons/helloworld-square-144.png como icono de aplicación cuadrado de 144 píxeles... hecho
Instalando icons/helloworld-square-192.png como icono de aplicación cuadrado de 192 píxeles... hecho
Instalando icons/helloworld-square-320.png como icono de aplicación cuadrado de 320 píxeles... hecho
Instalando icons/helloworld-square-480.png como icono de aplicación cuadrado de 480 píxeles... hecho
Instalando icons/helloworld-square-640.png como icono de aplicación cuadrado de 640 píxeles... hecho
Instalando icons/helloworld-square-960.png como icono de aplicación cuadrado de 960 píxeles... hecho
Instalando icons/helloworld-square-1280.png como icono de aplicación cuadrado de 1280 píxeles... hecho
Instalando icons/helloworld-adaptive-108.png como icono de aplicación adaptativo de 108 píxeles... hecho
Instalando icons/helloworld-adaptive-162.png como icono de aplicación adaptativo de 162 píxeles... hecho
Instalando icons/helloworld-adaptive-216.png como icono de aplicación adaptativo de 216 píxeles... hecho
Instalando icons/helloworld-adaptive-324.png como icono de aplicación adaptativo de 324 píxeles... hecho
Instalando icons/helloworld-adaptive-432.png como icono de aplicación adaptativo de 432 píxeles... hecho
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
[helloworld] Iniciando la aplicación...
Nota
Si estás utilizando una versión reciente de Android, puedes que observes que el icono de la aplicación ha cambiado a una serpiente verde, pero el fondo del icono es blanco, en lugar de azul claro. Arreglaremos esto en el siguiente paso.
(beeware-venv) $ briefcase build iOS --update-resources
[helloworld] Actualizando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Actualizando los recursos de la aplicación...
Instalando icons/helloworld-20.png como icono de aplicación de 20 píxeles... hecho
Instalando icons/helloworld-29.png como icono de aplicación de 29 píxeles... hecho
Instalando icons/helloworld-40.png como icono de aplicación de 40 píxeles... hecho
Instalando icons/helloworld-58.png como icono de aplicación de 58 píxeles... hecho
Instalando icons/helloworld-60.png como icono de aplicación de 60 píxeles... hecho
Instalando icons/helloworld-76.png como icono de aplicación de 76 píxeles... hecho
Instalando icons/helloworld-80.png como icono de aplicación de 80 píxeles... hecho
Instalando icons/helloworld-87.png como icono de aplicación de 87 píxeles... hecho
Instalando icons/helloworld-120.png como icono de aplicación de 120 píxeles... hecho
Instalando icons/helloworld-152.png como icono de aplicación de 152 píxeles... hecho
Instalando icons/helloworld-167.png como icono de aplicación de 167 píxeles... hecho
Instalando icons/helloworld-180.png como icono de aplicación de 180 píxeles... hecho
Instalando icons/helloworld-640.png como icono de aplicación de 640 píxeles... hecho
Instalando icons/helloworld-1024.png como icono de aplicación de 1024 píxeles... hecho
Instalando icons/helloworld-1280.png como icono de aplicación de 1280 píxeles... hecho
Instalando icons/helloworld-1920.png como icono de aplicación de 1920 píxeles... hecho
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Aplicación actualizada.
[helloworld] Iniciando la aplicación...
Nota
Si obtienes una traza de pila en referencia a faker o httpx cuando ejecutas
la app, es posible que olvidaste ejecutar tu app durante el paso 7 u 8 del
tutorial. Vuelve a ejecutar la aplicación, añadiendo el argumento -r para
actualizar los requerimientos de la aplicación.
Cuando ejecutes la aplicación en iOS o Android, además del cambio de icono,
también deberías tener en cuenta que la pantalla de inicio incorpora el icono
nuevo. Sin embargo, el fondo azul claro del icono parece un poco fuera de lugar
frente al fondo blanco de la pantalla de inicio. Podemos arreglar esto
personalizando el color de fondo de la pantalla de inicio. Añade la definición
siguiente a tu pyproject.toml, justo tras la definición de icon:
splash_background_color = "#D3E6F5"
Desafortunadamente, Briefcase no es capaz de aplicar este cambio a un proyecto
ya generado, ya que requiere realizar modificaciones en uno de los archivos que
fue generado durante la invocación original a briefcase create. Para aplicar
este cambio, tenemos que volver a crear la aplicación ejecutando de nuevo
briefcase create. Cuando hagamos esto, se nos pedirá que confirmemos que
queremos sobrescribir el proyecto existente:
(beeware-venv) $ briefcase create
La aplicación «helloworld» ya existe; ¿desea sobrescribirla [y/N]? s
[helloworld] Eliminando el paquete de la aplicación anterior...
[helloworld] Generando la plantilla de la aplicación...
...
[helloworld] Creado build/helloworld/macos/app
(beeware-venv) $ briefcase create
La aplicación «helloworld» ya existe; ¿desea sobrescribirla [y/N]? s
[helloworld] Eliminando el paquete de la aplicación anterior...
[helloworld] Generando la plantilla de la aplicación...
...
[helloworld] Creado build/helloworld/linux/ubuntu/jammy
(beeware-venv) C:\...>briefcase create
La aplicación «helloworld» ya existe; ¿desea sobrescribirla [y/N]? S
[helloworld] Eliminando el paquete de la aplicación anterior...
[helloworld] Generando la plantilla de la aplicación...
...
[helloworld] Creado build\helloworld\windows\app
(beeware-venv) $ briefcase create android
La aplicación «helloworld» ya existe; ¿desea sobrescribirla [y/N]? s
[helloworld] Eliminando el paquete de la aplicación anterior...
[helloworld] Generando la plantilla de la aplicación...
...
[helloworld] Creado build/helloworld/android/gradle
(beeware-venv) $ briefcase create iOS
La aplicación «helloworld» ya existe; ¿desea sobrescribirla [y/N]? s
[helloworld] Eliminando el paquete de la aplicación anterior...
[helloworld] Generando la plantilla de la aplicación...
...
[helloworld] Creado build/helloworld/ios/xcode
A continuación, puede volver a re-crear y volver a ejecutar la aplicación
utilizando briefcase run. No notarás ningún cambio en la aplicación de
escritorio; pero las aplicaciones para Android o iOS ahora tendrían un fondo de
pantalla azul claro.
Tendrás que volver a crear la aplicación de esta manera cada vez que realices un
cambio en tu pyproject.toml que no esté relacionado con el código fuente o las
dependencias. Cualquier cambio en las descripciones, números de versión, colores
o permisos requerirá un paso de recreación. Debido a esto, mientras estés
desarrollando tu proyecto, no deberías hacer ningún cambio manual a los
contenidos de la carpeta build, y no deberías añadir la carpeta build a tu
sistema de control de versiones. La carpeta build debe ser considerada
completamente efímera — una salida del sistema de compilación que puede ser
recreada cuando sea necesario para reflejar la configuración actual de tu
proyecto.
Añadir un icono de ejecución¶
A la hora de añadir un icono a la interfaz de la aplicación, este tipo de icono
debe guardarse en un directorio separado desde los iconos de la aplicación.
Pulsa con el botón secundario del ratón sobre Tiberio el yak, guarda la imagen
como un archivo .png y nómbralo helloworld. El archivo debería guardarse en
la carpeta icons/ del paquete fuente de tu aplicación.
/// subtítulo
///
Tu directorio se parecerá así:
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ ├── helloworld
│ │ └── icons/
│ │ └── helloworld.png
│ └──...
└── pyproject.toml
Ahora que el icono de tiempo de ejecución está en su lugar, vamos a añadir un icono a nuestro botón. El widget del botón Toga sólo admite o bien un icono o bien un texto (no ambos), así que vamos a actualizar el código del botón para incluir el icono de tiempo de ejecución.
helloworld_icon = toga.Icon("icons/helloworld")
button = toga.Button(
icon=helloworld_icon,
on_press=self.say_hello,
margin=5,
)
Dado que los iconos en tiempo de ejecución son recursos de la aplicación
incluidos en el paquete de Python, no es necesario reconstruir o actualizar los
recursos. En este punto puedes ejecutar briefcase dev (o briefcase run) para
ver el icono añadido al botón.