Personalizar iconos¶
Hasta ahora, nuestra aplicación ha utilizado un ícono predeterminado de "abeja gris". ¿Cómo actualizamos la aplicación para usar nuestro propio ícono?
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 las aplicaciones, y algunas plataformas necesitan múltiples iconos de diferentes tamaños y formas. Para tener esto en cuenta, Briefcase proporciona una forma abreviada de configurar un icono una vez, y luego hacer que esa definición se expanda en todos los diferentes iconos necesarios para cada plataforma individual.
Edita tu pyproject.toml, añadiendo un nuevo elemento de configuración icon
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 se utilizará como prefijo; cada plataforma añadirá elementos adicionales a este prefijo para construir los archivos necesarios para cada plataforma. Algunas plataformas requieren múltiples archivos de iconos; este prefijo se combinará con modificadores de tamaño de archivo y variantes para generar la lista de archivos de iconos que se utilizan.
Ahora podemos ejecutar briefcase update de nuevo - pero esta vez, le pasamos
la bandera --update-resources, diciéndole a Briefcase que queremos instalar
nuevos recursos de la aplicación (es decir, los iconos):
(beeware-venv) $ briefcase update --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Unable to find icons/helloworld.icns for application icon; using default
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
(beeware-venv) $ briefcase update --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Unable to find icons/helloworld-16.png for 16px application icon; using default
Unable to find icons/helloworld-32.png for 32px application icon; using default
Unable to find icons/helloworld-64.png for 64px application icon; using default
Unable to find icons/helloworld-128.png for 128px application icon; using default
Unable to find icons/helloworld-256.png for 256px application icon; using default
Unable to find icons/helloworld-512.png for 512px application icon; using default
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
(beeware-venv) C:\...>briefcase update --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Unable to find icons/helloworld.ico for application icon; using default
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
(beeware-venv) $ briefcase update android --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Unable to find icons/helloworld-round-48.png for 48px round application icon; using default
Unable to find icons/helloworld-round-72.png for 72px round application icon; using default
Unable to find icons/helloworld-round-96.png for 96px round application icon; using default
Unable to find icons/helloworld-round-144.png for 144px round application icon; using default
Unable to find icons/helloworld-round-192.png for 192px round application icon; using default
Unable to find icons/helloworld-square-48.png for 48px square application icon; using default
Unable to find icons/helloworld-square-72.png for 72px square application icon; using default
Unable to find icons/helloworld-square-96.png for 96px square application icon; using default
Unable to find icons/helloworld-square-144.png for 144px square application icon; using default
Unable to find icons/helloworld-square-192.png for 192px square application icon; using default
Unable to find icons/helloworld-square-320.png for 320px square application icon; using default
Unable to find icons/helloworld-square-480.png for 480px square application icon; using default
Unable to find icons/helloworld-square-640.png for 640px square application icon; using default
Unable to find icons/helloworld-square-960.png for 960px square application icon; using default
Unable to find icons/helloworld-square-1280.png for 1280px square application icon; using default
Unable to find icons/helloworld-adaptive-108.png for 108px adaptive application icon; using default
Unable to find icons/helloworld-adaptive-162.png for 162px adaptive application icon; using default
Unable to find icons/helloworld-adaptive-216.png for 216px adaptive application icon; using default
Unable to find icons/helloworld-adaptive-324.png for 324px adaptive application icon; using default
Unable to find icons/helloworld-adaptive-432.png for 432px adaptive application icon; using default
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
(beeware-venv) $ briefcase iOS --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Unable to find icons/helloworld-20.png for 20px application icon; using default
Unable to find icons/helloworld-29.png for 29px application icon; using default
Unable to find icons/helloworld-40.png for 40px application icon; using default
Unable to find icons/helloworld-58.png for 58px application icon; using default
Unable to find icons/helloworld-60.png for 60px application icon; using default
Unable to find icons/helloworld-76.png for 76px application icon; using default
Unable to find icons/helloworld-80.png for 80px application icon; using default
Unable to find icons/helloworld-87.png for 87px application icon; using default
Unable to find icons/helloworld-120.png for 120px application icon; using default
Unable to find icons/helloworld-152.png for 152px application icon; using default
Unable to find icons/helloworld-167.png for 167px application icon; using default
Unable to find icons/helloworld-180.png for 180px application icon; using default
Unable to find icons/helloworld-640.png for 640px application icon; using default
Unable to find icons/helloworld-1024.png for 1024px application icon; using default
Unable to find icons/helloworld-1280.png for 1280px application icon; using default
Unable to find icons/helloworld-1920.png for 1920px application icon; using default
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
Esto informa del archivo (o archivos) de icono específico que Briefcase está esperando. Sin embargo, como no hemos proporcionado los archivos de icono reales, la instalación falla y Briefcase vuelve a un valor predeterminado (el mismo icono de "abeja gris").
Vamos a proporcionar algunos iconos reales. Descarga este paquete icons.zip, y descomprímelo en la raíz del directorio de tu proyecto. Después de descomprimir, el directorio del proyecto debe ser algo así:
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:
Icono de serpiente verde con fondo azul claro](../../images/icon.png)
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 los iconos, podemos actualizar la aplicación de nuevo. Sin
embargo, briefcase update sólo copiará los recursos actualizados en el
directorio de compilación; también queremos reconstruir la aplicación para
asegurarnos de que el nuevo icono está incluido, y luego iniciar la aplicación.
Podemos acortar este proceso pasando --update-resources a nuestra llamada a
run - esto actualizará la aplicación, actualizará los recursos de la
aplicación, y luego iniciará la aplicación:
(beeware-venv) $ briefcase run --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Installing icons/helloworld.icns as application icon... done
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
[helloworld] Ad-hoc signing app...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100.0% • 00:01
[helloworld] Built build/helloworld/macos/app/Hello World.app
[helloworld] Starting app...
(beeware-venv) $ briefcase run --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Installing icons/helloworld-16.png as 16px application icon... done
Installing icons/helloworld-32.png as 32px application icon... done
Installing icons/helloworld-64.png as 64px application icon... done
Installing icons/helloworld-128.png as 128px application icon... done
Installing icons/helloworld-256.png as 256px application icon... done
Installing icons/helloworld-512.png as 512px application icon... done
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
[helloworld] Building application...
Build bootstrap binary...
...
[helloworld] Built build/helloworld/linux/ubuntu/jammy/helloworld-0.0.1/usr/bin/helloworld
[helloworld] Starting app...
(beeware-venv) C:\...>briefcase build --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Installing icons/helloworld.ico as application icon... done
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
[helloworld] Building App...
Removing any digital signatures from stub app... done
Setting stub app details... done
[helloworld] Built build\helloworld\windows\app\src\Hello World.exe
[helloworld] Starting app...
(beeware-venv) $ briefcase build android --update-resources
[helloworld] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Installing icons/helloworld-round-48.png as 48px round application icon... done
Installing icons/helloworld-round-72.png as 72px round application icon... done
Installing icons/helloworld-round-96.png as 96px round application icon... done
Installing icons/helloworld-round-144.png as 144px round application icon... done
Installing icons/helloworld-round-192.png as 192px round application icon... done
Installing icons/helloworld-square-48.png as 48px square application icon... done
Installing icons/helloworld-square-72.png as 72px square application icon... done
Installing icons/helloworld-square-96.png as 96px square application icon... done
Installing icons/helloworld-square-144.png as 144px square application icon... done
Installing icons/helloworld-square-192.png as 192px square application icon... done
Installing icons/helloworld-square-320.png as 320px square application icon... done
Installing icons/helloworld-square-480.png as 480px square application icon... done
Installing icons/helloworld-square-640.png as 640px square application icon... done
Installing icons/helloworld-square-960.png as 960px square application icon... done
Installing icons/helloworld-square-1280.png as 1280px square application icon... done
Installing icons/helloworld-adaptive-108.png as 108px adaptive application icon... done
Installing icons/helloworld-adaptive-162.png as 162px adaptive application icon... done
Installing icons/helloworld-adaptive-216.png as 216px adaptive application icon... done
Installing icons/helloworld-adaptive-324.png as 324px adaptive application icon... done
Installing icons/helloworld-adaptive-432.png as 432px adaptive application icon... done
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
[helloworld] Starting app...
Nota
Si utilizas una versión reciente de Android, puede que notes 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] Updating application code...
Installing src/helloworld... done
[helloworld] Updating application resources...
Installing icons/helloworld-20.png as 20px application icon... done
Installing icons/helloworld-29.png as 29px application icon... done
Installing icons/helloworld-40.png as 40px application icon... done
Installing icons/helloworld-58.png as 58px application icon... done
Installing icons/helloworld-60.png as 60px application icon... done
Installing icons/helloworld-76.png as 76px application icon... done
Installing icons/helloworld-80.png as 80px application icon... done
Installing icons/helloworld-87.png as 87px application icon... done
Installing icons/helloworld-120.png as 120px application icon... done
Installing icons/helloworld-152.png as 152px application icon... done
Installing icons/helloworld-167.png as 167px application icon... done
Installing icons/helloworld-180.png as 180px application icon... done
Installing icons/helloworld-640.png as 640px application icon... done
Installing icons/helloworld-1024.png as 1024px application icon... done
Installing icons/helloworld-1280.png as 1280px application icon... done
Installing icons/helloworld-1920.png as 1920px application icon... done
[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done
[helloworld] Application updated.
[helloworld] Starting app...
Nota
Si obtienes un stack trace haciendo referencia a faker o httpx cuando
ejecutas la app, es posible que no hayas ejecutado tu app durante el paso 7 u 8
del tutorial. Vuelve a ejecutar la aplicación, añadiendo el argumento -r para
actualizar los requisitos de la aplicación.
Cuando ejecutes la aplicación en iOS o Android, además del cambio de icono,
también deberías notar que la pantalla de inicio incorpora el nuevo icono. 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 siguiente definición a tu
pyproject.toml, justo después de la definición 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
se generó durante la llamada 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
Application 'helloworld' already exists; overwrite [y/N]? y
[helloworld] Removing old application bundle...
[helloworld] Generating application template...
...
[helloworld] Created build/helloworld/macos/app
(beeware-venv) $ briefcase create
Application 'helloworld' already exists; overwrite [y/N]? y
[helloworld] Removing old application bundle...
[helloworld] Generating application template...
...
[helloworld] Created build/helloworld/linux/ubuntu/jammy
(beeware-venv) C:\...>briefcase create
Application 'helloworld' already exists; overwrite [y/N]? y
[helloworld] Removing old application bundle...
[helloworld] Generating application template...
...
[helloworld] Created build\helloworld\windows\app
(beeware-venv) $ briefcase create android
Application 'helloworld' already exists; overwrite [y/N]? y
[helloworld] Removing old application bundle...
[helloworld] Generating application template...
...
[helloworld] Created build/helloworld/android/gradle
(beeware-venv) $ briefcase create iOS
Application 'helloworld' already exists; overwrite [y/N]? y
[helloworld] Removing old application bundle...
[helloworld] Generating application template...
...
[helloworld] Created build/helloworld/ios/xcode
A continuación, puede volver a compilar 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 deberían tener ahora 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 distinto al de los iconos de la aplicación. Haz
clic con el botón derecho del ratón sobre Tiberio el yak, guarda la imagen como
un archivo .png y llámalo helloworld. El archivo debe guardarse en la
carpeta icons/ del paquete fuente de tu aplicación.
(../../images/runtime-icon.png)Icono de Tiberio el yak
Su directorio se parecerá al siguiente:
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 un icono o 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.