Personalização de ícones¶
Até agora, nosso aplicativo tem usado um ícone padrão de "abelha cinza". Como podemos atualizar o aplicativo para usar nosso próprio ícone?
Observação
No BeeWare, o termo ícone pode se referir a duas coisas diferentes:
-
Ícone do aplicativo - A imagem que representa seu aplicativo na área de trabalho, no dock ou na tela inicial.
-
Ícones de tempo de execução - Imagens usadas na interface do seu aplicativo (por exemplo, em botões ou tabelas).
Adição de um ícone¶
Cada plataforma usa um formato diferente para os ícones de aplicativos, e algumas plataformas precisam de vários ícones em diferentes tamanhos e formas. Para levar isso em conta, o Briefcase oferece uma maneira abreviada de configurar um ícone uma vez e, em seguida, expandir essa definição para todos os diferentes ícones necessários para cada plataforma individual.
Edite seu pyproject.toml, adicionando um novo item de configuração icon na
seção de configuração [tool.briefcase.app.helloworld], logo acima da definição
sources:
icon = "icons/helloworld"
Essa definição de ícone não especifica nenhuma extensão de arquivo. O valor será usado como um prefixo; cada plataforma acrescentará itens adicionais a esse prefixo para criar os arquivos necessários para cada plataforma. Algumas plataformas exigem múltiplos arquivos de ícones; esse prefixo será combinado com o tamanho do arquivo e modificadores de variantes para gerar a lista de arquivos de ícones que são usados.
Agora podemos executar o briefcase update novamente, mas, dessa vez, passamos
o sinalizador --update-resources, informando ao Briefcase que queremos
instalar novos recursos do aplicativo (ou seja, os ícones):
(beeware-venv) $ briefcase update --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando recursos do aplicativo...
Não foi possível encontrar icons/helloworld.icns para o ícone do aplicativo; usando o padrão
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
(beeware-venv) $ briefcase update --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Não foi possível encontrar icons/helloworld-16.png para o ícone do aplicativo de 16 px; usando o padrão
Não foi possível encontrar icons/helloworld-32.png para o ícone do aplicativo de 32px; usando o padrão
Não foi possível encontrar icons/helloworld-64.png para o ícone do aplicativo de 64px; usando o padrão
Não foi possível encontrar icons/helloworld-128.png para o ícone do aplicativo de 128px; usando o padrão
Não foi possível encontrar icons/helloworld-256.png para o ícone do aplicativo de 256 px; usando o padrão
Não foi possível encontrar icons/helloworld-512.png para o ícone do aplicativo de 512 px; usando o padrão
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
(beeware-venv) C:\...>briefcase update --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando recursos do aplicativo...
Não foi possível encontrar icons/helloworld.ico para o ícone do aplicativo; usando o padrão
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
(beeware-venv) $ briefcase update android --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Não foi possível encontrar icons/helloworld-round-48.png para o ícone redondo do aplicativo de 48 px; usando o padrão
Não foi possível encontrar icons/helloworld-round-72.png para o ícone redondo de 72px do aplicativo; usando o padrão
Não foi possível encontrar icons/helloworld-round-96.png para o ícone redondo de 96px do aplicativo; usando o padrão
Não foi possível encontrar icons/helloworld-round-144.png para o ícone redondo de 144px do aplicativo; usando o padrão
Não foi possível encontrar icons/helloworld-round-192.png para o ícone redondo do aplicativo de 192px; usando o padrão
Não foi possível encontrar icons/helloworld-square-48.png para o ícone quadrado do aplicativo de 48px; usando o padrão
Não foi possível encontrar icons/helloworld-square-72.png para o ícone quadrado do aplicativo de 72px; usando o padrão
Não foi possível encontrar icons/helloworld-square-96.png para o ícone quadrado do aplicativo de 96px; usando o padrão
Não foi possível encontrar icons/helloworld-square-144.png para o ícone quadrado do aplicativo de 144px; usando o padrão
Não foi possível encontrar icons/helloworld-square-192.png para o ícone quadrado do aplicativo de 192px; usando o padrão
Não foi possível encontrar icons/helloworld-square-320.png para o ícone quadrado do aplicativo de 320 px; usando o padrão
Não foi possível encontrar icons/helloworld-square-480.png para o ícone quadrado do aplicativo de 480 px; usando o padrão
Não foi possível encontrar icons/helloworld-square-640.png para o ícone quadrado do aplicativo de 640 px; usando o padrão
Não foi possível encontrar icons/helloworld-square-960.png para o ícone de aplicativo quadrado de 960 px; usando o padrão
Não foi possível encontrar icons/helloworld-square-1280.png para o ícone de aplicativo quadrado de 1280 px; usando o padrão
Não foi possível encontrar icons/helloworld-adaptive-108.png para o ícone de aplicativo adaptável de 108 px; usando o padrão
Não foi possível encontrar icons/helloworld-adaptive-162.png para o ícone adaptável do aplicativo de 162 px; usando o padrão
Não foi possível encontrar icons/helloworld-adaptive-216.png para o ícone adaptável do aplicativo de 216 px; usando o padrão
Não foi possível encontrar icons/helloworld-adaptive-324.png para o ícone adaptável do aplicativo de 324 px; usando o padrão
Não foi possível encontrar icons/helloworld-adaptive-432.png para o ícone adaptável do aplicativo de 432 px; usando o padrão
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
(beeware-venv) $ briefcase iOS --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Não foi possível encontrar icons/helloworld-20.png para o ícone do aplicativo de 20px; usando o padrão
Não foi possível encontrar icons/helloworld-29.png para o ícone do aplicativo de 29px; usando o padrão
Não foi possível encontrar icons/helloworld-40.png para o ícone do aplicativo de 40px; usando o padrão
Não foi possível encontrar icons/helloworld-58.png para o ícone do aplicativo de 58px; usando o padrão
Não foi possível encontrar icons/helloworld-60.png para o ícone do aplicativo de 60px; usando o padrão
Não foi possível encontrar icons/helloworld-76.png para o ícone do aplicativo de 76px; usando o padrão
Não foi possível encontrar icons/helloworld-80.png para o ícone do aplicativo de 80px; usando o padrão
Não foi possível encontrar icons/helloworld-87.png para o ícone do aplicativo de 87px; usando o padrão
Não foi possível encontrar icons/helloworld-120.png para o ícone do aplicativo de 120px; usando o padrão
Não foi possível encontrar icons/helloworld-152.png para o ícone do aplicativo de 152 px; usando o padrão
Não foi possível encontrar icons/helloworld-167.png para o ícone do aplicativo de 167 px; usando o padrão
Não foi possível encontrar icons/helloworld-180.png para o ícone do aplicativo de 180 px; usando o padrão
Não foi possível encontrar icons/helloworld-640.png para o ícone do aplicativo de 640px; usando o padrão
Não foi possível encontrar icons/helloworld-1024.png para o ícone do aplicativo de 1024px; usando o padrão
Não foi possível encontrar icons/helloworld-1280.png para o ícone do aplicativo de 1280px; usando o padrão
Não foi possível encontrar icons/helloworld-1920.png para o ícone do aplicativo de 1920px; usando o padrão
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
Isso informa o arquivo (ou arquivos) de ícone específico que o Briefcase está esperando. No entanto, como não fornecemos os arquivos de ícone reais, a instalação falha e o Briefcase retorna ao valor padrão (o mesmo ícone de "abelha cinza").
Vamos fornecer alguns ícones reais. Baixe este pacote icons.zip e descompacte-o na raiz do diretório do projeto. Após a descompactação, seu diretório de projeto deverá ter a seguinte aparência
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ └── ...
└── pyproject.toml
Há muitos ícones nessa pasta, mas a maioria deles deve ter a mesma aparência: uma cobra verde em um fundo azul claro:
A única exceção serão os ícones com -adaptive- em seu nome; eles terão um
fundo transparente. Isso representa todos os diferentes tamanhos e formas de
ícones necessários para suportar um aplicativo em todas as plataformas
suportadas pelo Briefcase.
Agora que temos os ícones, podemos atualizar o aplicativo novamente. No entanto,
o briefcase update copiará apenas os recursos atualizados para o diretório de
compilação; também queremos reconstruir o aplicativo para garantir que o novo
ícone seja incluído e, em seguida, iniciar o aplicativo. Podemos encurtar esse
processo passando --update-resources para a nossa chamada para run - isso
atualizará o aplicativo, atualizará os recursos do aplicativo e, em seguida,
iniciará o aplicativo:
(beeware-venv) $ briefcase run --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Instalando icons/helloworld.icns como ícone do aplicativo... concluído
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
[helloworld] Assinando o aplicativo ad-hoc...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100,0% • 00:01
[helloworld] Compilando build/helloworld/macos/app/Hello World.app
[helloworld] Iniciando o aplicativo...
(beeware-venv) $ briefcase run --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Instalando icons/helloworld-16.png como ícone do aplicativo de 16 px... concluído
Instalando icons/helloworld-32.png como ícone de aplicativo de 32px... concluído
Instalando icons/helloworld-64.png como ícone de aplicativo de 64px... concluído
Instalando icons/helloworld-128.png como ícone de aplicativo de 128px... concluído
Instalando icons/helloworld-256.png como ícone do aplicativo de 256px... concluído
Instalando icons/helloworld-512.png como ícone do aplicativo de 512px... concluído
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
[helloworld] Compilando o aplicativo...
Compilando o binário bootstrap...
...
[helloworld] Compilado build/helloworld/linux/ubuntu/jammy/helloworld-0.0.1/usr/bin/helloworld
[helloworld] Iniciando o aplicativo...
(beeware-venv) C:\...>briefcase build --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Instalando icons/helloworld.ico como ícone do aplicativo... concluído
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
[helloworld] Compilando o aplicativo...
Removendo todas as assinaturas digitais do aplicativo stub... concluído
Configurando detalhes do aplicativo stub... concluído
[helloworld] Compilado build\helloworld\windows\app\src\Hello World.exe
[helloworld] Iniciando o aplicativo...
(beeware-venv) $ briefcase build android --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Instalando icons/helloworld-round-48.png como ícone redondo do aplicativo de 48 px... concluído
Instalando icons/helloworld-round-72.png como ícone redondo de 72px do aplicativo... concluído
Instalando icons/helloworld-round-96.png como ícone redondo de 96px do aplicativo... concluído
Instalando icons/helloworld-round-144.png como ícone redondo de 144px do aplicativo... concluído
Instalando icons/helloworld-round-192.png como ícone redondo de 192px para o aplicativo... concluído
Instalando icons/helloworld-square-48.png como ícone quadrado de 48px para o aplicativo... concluído
Instalando icons/helloworld-square-72.png como ícone quadrado de 72px para o aplicativo... concluído
Instalando icons/helloworld-square-96.png como ícone de aplicativo quadrado de 96px... concluído
Instalando icons/helloworld-square-144.png como ícone de aplicativo quadrado de 144px... concluído
Instalando icons/helloworld-square-192.png como ícone de aplicativo quadrado de 192px... concluído
Instalando icons/helloworld-square-320.png como ícone de aplicativo quadrado de 320 px... concluído
Instalando icons/helloworld-square-480.png como ícone de aplicativo quadrado de 480 px... concluído
Instalando icons/helloworld-square-640.png como ícone de aplicativo quadrado de 640 px... concluído
Instalando icons/helloworld-square-960.png como ícone de aplicativo quadrado de 960 px... concluído
Instalando icons/helloworld-square-1280.png como ícone de aplicativo quadrado de 1280 px... concluído
Instalando icons/helloworld-adaptive-108.png como ícone de aplicativo adaptável de 108 px... concluído
Instalando icons/helloworld-adaptive-162.png como ícone de aplicativo adaptável de 162 px... concluído
Instalando icons/helloworld-adaptive-216.png como ícone de aplicativo adaptável de 216 px... concluído
Instalando icons/helloworld-adaptive-324.png como ícone de aplicativo adaptável de 324 px... concluído
Instalando icons/helloworld-adaptive-432.png como ícone adaptável do aplicativo de 432px... concluído
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
[helloworld] Iniciando o aplicativo...
Observação
Se você estiver usando uma versão recente do Android, poderá notar que o ícone do aplicativo foi alterado para uma cobra verde, mas o fundo do ícone é branco, em vez de azul claro. Vamos corrigir isso na próxima etapa.
(beeware-venv) $ briefcase build iOS --update-resources
[helloworld] Atualizando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Atualizando os recursos do aplicativo...
Instalando icons/helloworld-20.png como ícone do aplicativo de 20px... concluído
Instalando icons/helloworld-29.png como ícone do aplicativo de 29px... concluído
Instalando icons/helloworld-40.png como ícone do aplicativo de 40px... concluído
Instalando icons/helloworld-58.png como ícone do aplicativo de 58px... concluído
Instalando icons/helloworld-60.png como ícone do aplicativo de 60px... concluído
Instalando icons/helloworld-76.png como ícone do aplicativo de 76px... concluído
Instalando icons/helloworld-80.png como ícone de aplicativo de 80px... concluído
Instalando icons/helloworld-87.png como ícone de aplicativo de 87px... concluído
Instalando icons/helloworld-120.png como ícone de aplicativo de 120px... concluído
Instalando icons/helloworld-152.png como ícone de aplicativo de 152px... concluído
Instalando icons/helloworld-167.png como ícone de aplicativo de 167px... concluído
Instalando icons/helloworld-180.png como ícone de aplicativo de 180px... concluído
Instalando icons/helloworld-640.png como ícone do aplicativo de 640px... concluído
Instalando icons/helloworld-1024.png como ícone do aplicativo de 1024px... concluído
Instalando icons/helloworld-1280.png como ícone do aplicativo de 1280px... concluído
Instalando icons/helloworld-1920.png como ícone do aplicativo de 1920px... concluído
[helloworld] Removendo conteúdo desnecessário do aplicativo...
Removendo conteúdo desnecessário do pacote do aplicativo... concluído
[helloworld] Aplicativo atualizado.
[helloworld] Iniciando o aplicativo...
Observação
Se você obtiver um rastreamento de pilha referenciando faker ou httpx ao
executar o aplicativo, é possível que você não tenha executado o aplicativo
durante as etapas 7 ou 8 do tutorial. Execute o aplicativo novamente,
adicionando o argumento -r para atualizar os requisitos do aplicativo.
Ao executar o aplicativo no iOS ou Android, além da alteração do ícone, você
também deve notar que a tela inicial incorpora o novo ícone. No entanto, o fundo
azul claro do ícone parece um pouco deslocado em relação ao fundo branco da tela
inicial. Podemos corrigir isso personalizando a cor de fundo da tela inicial.
Adicione a seguinte definição ao seu pyproject.toml, logo após a definição
icon:
splash_background_color = "#D3E6F5"
Infelizmente, o Briefcase não é capaz de aplicar essa alteração a um projeto já
gerado, pois isso requer modificações em um dos arquivos que foi gerado durante
a chamada original do briefcase create. Para aplicar essa alteração, temos que
recriar o aplicativo executando novamente o briefcase create. Quando fizermos
isso, seremos solicitados a confirmar que queremos substituir o projeto
existente:
(beeware-venv) $ briefcase create
A aplicação 'helloworld' já existe; deseja sobrescrever [y/N]? y
[helloworld] Removendo o pacote da aplicação antiga...
[helloworld] Gerando o modelo da aplicação...
...
[helloworld] Criado build/helloworld/macos/app
(beeware-venv) $ briefcase create
A aplicação 'helloworld' já existe; deseja sobrescrever [y/N]? y
[helloworld] Removendo o pacote da aplicação antiga...
[helloworld] Gerando o modelo da aplicação...
...
[helloworld] Criado build/helloworld/linux/ubuntu/jammy
(beeware-venv) C:\...>briefcase create
A aplicação 'helloworld' já existe; deseja sobrescrever [y/N]? y
[helloworld] Removendo o pacote da aplicação antiga...
[helloworld] Gerando modelo de aplicação...
...
[helloworld] Criado build\helloworld\windows\app
(beeware-venv) $ briefcase create android
A aplicação 'helloworld' já existe; deseja sobrescrever [y/N]? y
[helloworld] Removendo o pacote da aplicação antiga...
[helloworld] Gerando modelo de aplicação...
...
[helloworld] Criado build/helloworld/android/gradle
(beeware-venv) $ briefcase create iOS
A aplicação 'helloworld' já existe; deseja sobrescrever [y/N]? y
[helloworld] Removendo o pacote da aplicação antiga...
[helloworld] Gerando o modelo da aplicação...
...
[helloworld] Criado build/helloworld/ios/xcode
Em seguida, você pode recompilar e executar novamente o aplicativo usando o
briefcase run. Você não notará nenhuma alteração no aplicativo para desktop,
mas os aplicativos para Android ou iOS agora devem ter um fundo de tela inicial
azul claro.
Você precisará recriar o aplicativo dessa forma sempre que fizer uma alteração
em seu pyproject.toml que não esteja relacionada ao código-fonte ou às
dependências. Qualquer alteração em descrições, números de versão, cores ou
permissões exigirá uma etapa de recriação. Por esse motivo, enquanto estiver
desenvolvendo o projeto, você não deve fazer nenhuma alteração manual no
conteúdo da pasta build e não deve adicionar a pasta build ao seu sistema de
controle de versão. A pasta build deve ser considerada totalmente efêmera, uma
saída do sistema de compilação que pode ser recriada conforme necessário para
refletir a configuração atual do seu projeto.
Adição de um ícone de tempo de execução¶
Quando se trata de adicionar um ícone à interface do aplicativo, esse tipo de
ícone deve ser armazenado em um diretório separado dos ícones do aplicativo.
Clique com o botão direito do mouse em Tiberius the yak, salve a imagem como um
arquivo .png e nomeie-a helloworld. O arquivo deve ser salvo na pasta
icons/ do pacote de código-fonte do aplicativo.
Seu diretório se parecerá com o seguinte:
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ ├── helloworld
│ │ └── icons/
│ │ └── helloworld.png
│ └──...
└── pyproject.toml
Agora que o ícone de tempo de execução está no lugar, vamos adicionar um ícone ao nosso botão. O widget do botão Toga só acomoda um ícone ou texto (não ambos), portanto, vamos atualizar o código do botão para incluir o ícone de tempo de execução.
helloworld_icon = toga.Icon("icons/helloworld")
button = toga.Button(
icon=helloworld_icon,
on_press=self.say_hello,
margin=5,
)
Como os ícones de tempo de execução são recursos do aplicativo incluídos no
pacote Python, não é necessário reconstruir ou atualizar o recurso. Nesse ponto,
você pode executar o briefcase dev (ou briefcase run) para ver o ícone
adicionado ao botão.