Symbole anpassen¶
Die App, die wir im Haupttutorial entwickelt haben, verwendet beim Verpacken standardmäßig das Symbol „gray bee“. Personalisieren wir diese Anwendung, indem wir sie so konfigurieren, dass sie unser eigenes Symbol verwendet.
Hinweis
In BeeWare kann sich der Begriff Icon auf zwei verschiedene Dinge beziehen:
-
Anwendungssymbol - Das Bild, das Ihre Anwendung auf dem Desktop, dem Dock oder dem Startbildschirm darstellt.
-
Laufzeitsymbole - Bilder, die innerhalb der Benutzeroberfläche Ihrer Anwendung verwendet werden (z. B. in Schaltflächen oder Tabellen).
Hinzufügen eines Symbols¶
Jede Plattform verwendet ein anderes Format für Anwendungssymbole – und einige Plattformen benötigen mehrere Symbole in unterschiedlichen Größen und Formen. Um dies zu berücksichtigen, bietet Briefcase eine Kurzform, mit der Sie ein Symbol einmal konfigurieren und diese Definition dann auf alle verschiedenen Symbole erweitern können, die für jede einzelne Plattform erforderlich sind.
Bearbeiten Sie Ihr pyproject.toml und fügen Sie ein neues
Konfigurationselement Symbol im Konfigurationsabschnitt
[tool.briefcase.app.helloworld] direkt über der Definition von Quellen
hinzu:
icon = "icons/helloworld"
Diese Icon-Definition gibt keine Dateierweiterung an. Der Wert wird als Präfix verwendet; jede Plattform fügt diesem Präfix zusätzliche Elemente hinzu, um die für die jeweilige Plattform erforderlichen Dateien zu erstellen. Einige Plattformen erfordern mehrere Icon-Dateien; dieses Präfix wird mit Dateigröße und Variantenmodifikatoren kombiniert, um die Liste der verwendeten Icon-Dateien zu generieren.
Wir können nun erneut briefcase update ausführen – diesmal jedoch mit dem Flag
--update-resources, um Briefcase mitzuteilen, dass wir neue
Anwendungsressourcen (d. h. die Symbole) installieren möchten:
(beeware-venv) $ briefcase update --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installiere src/helloworld... fertig
[helloworld] Aktualisiere Anwendungsressourcen...
icons/helloworld.icns für das Anwendungssymbol nicht gefunden; verwende Standard
[helloworld] Entferne nicht benötigte App-Inhalte...
Entferne nicht benötigte App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
(beeware-venv) $ briefcase update --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... abgeschlossen
[helloworld] Anwendungsressourcen werden aktualisiert...
icons/helloworld-16.png für das 16px-Anwendungssymbol nicht gefunden; Standardwert wird verwendet
icons/helloworld-32.png für 32px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-64.png für 64px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-128.png für 128px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-256.png für 256px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-512.png für 512px-Anwendungssymbol nicht gefunden; Standard wird verwendet
[helloworld] Entfernen nicht benötigter App-Inhalte...
Entfernen nicht benötigter App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
(beeware-venv) C:\...>briefcase update --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... fertig
[helloworld] Aktualisierung der Anwendungsressourcen...
icons/helloworld.ico für das Anwendungssymbol nicht gefunden; Standard wird verwendet
[helloworld] Entfernen nicht benötigter App-Inhalte...
Entfernen nicht benötigter App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
(beeware-venv) $ briefcase update android --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... abgeschlossen
[helloworld] Anwendungsressourcen werden aktualisiert...
Die Datei „icons/helloworld-round-48.png“ für das runde Anwendungssymbol (48 px) wurde nicht gefunden; Standardwert wird verwendet
icons/helloworld-round-72.png für das runde Anwendungssymbol (72px) nicht gefunden; Standard wird verwendet
icons/helloworld-round-96.png für das runde Anwendungssymbol (96px) nicht gefunden; Standard wird verwendet
icons/helloworld-round-144.png für das runde Anwendungssymbol (144px) nicht gefunden; Standard wird verwendet
Icons/helloworld-round-192.png für 192px rundes Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-square-48.png für 48px quadratisches Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-square-72.png für 72px quadratisches Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-square-96.png für 96px quadratisches Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-square-144.png für 144px quadratisches Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-square-192.png für 192px quadratisches Anwendungssymbol nicht gefunden; Standard wird verwendet
Das quadratische Anwendungssymbol mit 320 px (icons/helloworld-square-320.png) wurde nicht gefunden; Standard wird verwendet
Das quadratische Anwendungssymbol mit 480 px (icons/helloworld-square-480.png) wurde nicht gefunden; Standard wird verwendet
Das quadratische Anwendungssymbol mit 640 px (icons/helloworld-square-640.png) wurde nicht gefunden; Standard wird verwendet
Icons/helloworld-square-960.png für quadratisches Anwendungssymbol (960 px) nicht gefunden; Standard wird verwendet
Icons/helloworld-square-1280.png für quadratisches Anwendungssymbol (1280 px) nicht gefunden; Standard wird verwendet
Icons/helloworld-adaptive-108.png für adaptives Anwendungssymbol (108 px) nicht gefunden; Standard wird verwendet
Icons/helloworld-adaptive-162.png für 162px adaptives Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-adaptive-216.png für 216px adaptives Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-adaptive-324.png für 324px adaptives Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-adaptive-432.png für 432px adaptives Anwendungssymbol nicht gefunden; Standard wird verwendet
[helloworld] Entfernen nicht benötigter App-Inhalte...
Entfernen nicht benötigter App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
(beeware-venv) $ briefcase iOS --update-resources
[helloworld] Anwendungscode wird aktualisiert...
src/helloworld wird installiert... fertig
[helloworld] Anwendungsressourcen werden aktualisiert...
icons/helloworld-20.png für das 20px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-29.png für das 29px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-40.png für das 40px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-58.png für 58px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-60.png für 60px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-76.png für 76px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-80.png für 80px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-87.png für 87px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-120.png für 120px-Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-152.png für 152px-Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-167.png für 167px-Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-180.png für 180px-Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-640.png für 640px-Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-1024.png für 1024px-Anwendungssymbol nicht gefunden; Standard wird verwendet
Icons/helloworld-1280.png für 1280px-Anwendungssymbol nicht gefunden; Standard wird verwendet
icons/helloworld-1920.png für 1920px-Anwendungssymbol nicht gefunden; Standard wird verwendet
[helloworld] Nicht benötigte App-Inhalte werden entfernt...
Nicht benötigte App-Bundle-Inhalte werden entfernt... fertig
[helloworld] Anwendung aktualisiert.
Dies gibt die spezifische(n) Icon-Datei(en) an, die Briefcase erwartet. Da wir jedoch keine tatsächlichen Icon-Dateien bereitgestellt haben, schlägt die Installation fehl und Briefcase greift auf einen Standardwert zurück (das gleiche „graue Bienen”-Icon).
Lassen Sie uns einige aktuelle Symbole bereitstellen. Laden Sie dieses icons.zip-Paket herunter, und entpacken Sie es in das Stammverzeichnis Ihres Projekts. Nach dem Entpacken sollte Ihr Projektverzeichnis etwa so aussehen:
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ └── ...
└── pyproject.toml
In diesem Ordner befinden sich sehr viele Symbole, aber die meisten davon sollten gleich aussehen: eine grüne Schlange auf hellblauem Hintergrund:
Die einzige Ausnahme bilden die Symbole mit '-adaptive-' im Namen; diese haben einen transparenten Hintergrund. Dies umfasst alle verschiedenen Symbolgrößen und -formen, die Sie benötigen, um eine App auf jeder von Briefcase unterstützten Plattform zu unterstützen.
Jetzt, da wir über Symbole verfügen, können wir die Anwendung erneut
aktualisieren. Allerdings kopiert briefcase update nur die aktualisierten
Ressourcen in das Build-Verzeichnis. Wir möchten jedoch auch die Anwendung neu
erstellen, um sicherzustellen, dass das neue Symbol enthalten ist, und dann die
Anwendung starten. Wir können diesen Vorgang abkürzen, indem wir
--update-resources an unseren Aufruf von run übergeben. Dadurch wird die
Anwendung aktualisiert, die Ressourcen der Anwendung aktualisiert und
anschließend die Anwendung gestartet:
(beeware-venv) $ briefcase run --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... fertig
[helloworld] Anwendungsressourcen werden aktualisiert...
Installiere icons/helloworld.icns als Anwendungssymbol... fertig
[helloworld] Entferne nicht benötigte App-Inhalte...
Entferne nicht benötigte App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
[helloworld] Ad-hoc-Signierung der App...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100,0 % • 00:01
[helloworld] build/helloworld/macos/app/Hello World.app erstellt
[helloworld] App wird gestartet...
(beeware-venv) $ briefcase run --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... fertig
[helloworld] Anwendungsressourcen werden aktualisiert...
Installation von icons/helloworld-16.png als 16px-Anwendungssymbol... fertig
Installiere icons/helloworld-32.png als 32px-Anwendungssymbol... fertig
Installiere icons/helloworld-64.png als 64px-Anwendungssymbol... fertig
Installiere icons/helloworld-128.png als 128px-Anwendungssymbol... fertig
Installiere icons/helloworld-256.png als 256px-Anwendungssymbol... fertig
Installiere icons/helloworld-512.png als 512px-Anwendungssymbol... fertig
[helloworld] Entferne nicht benötigte App-Inhalte...
Entferne nicht benötigte App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
[helloworld] Anwendung wird erstellt...
Bootstrap-Binärdatei erstellen...
...
[helloworld] Erstellt: build/helloworld/linux/ubuntu/jammy/helloworld-0.0.1/usr/bin/helloworld
[helloworld] App wird gestartet...
(beeware-venv) C:\...>briefcase build --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... fertig
[helloworld] Anwendungsressourcen werden aktualisiert...
Installiere icons/helloworld.ico als Anwendungssymbol... fertig
[helloworld] Entferne nicht benötigte App-Inhalte...
Entfernen nicht benötigter App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
[helloworld] App erstellen...
Entfernen aller digitalen Signaturen aus der Stub-App... fertig
Festlegen der Stub-App-Details... fertig
[helloworld] Erstellt build\helloworld\windows\app\src\Hello World.exe
[helloworld] App starten...
(beeware-venv) $ briefcase build android --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... fertig
[helloworld] Anwendungsressourcen werden aktualisiert...
Installation von icons/helloworld-round-48.png als rundes Anwendungssymbol mit 48 px... fertig
Installiere icons/helloworld-round-72.png als rundes Anwendungssymbol mit 72 px... fertig
Installiere icons/helloworld-round-96.png als rundes Anwendungssymbol mit 96 px... fertig
Installiere icons/helloworld-round-144.png als rundes Anwendungssymbol mit 144 px... fertig
Installiere icons/helloworld-round-192.png als rundes Anwendungssymbol mit 192 px... fertig
Installiere icons/helloworld-square-48.png als quadratisches Anwendungssymbol mit 48 px... fertig
Installiere icons/helloworld-square-72.png als quadratisches Anwendungssymbol mit 72 px... fertig
Installiere icons/helloworld-square-96.png als quadratisches Anwendungssymbol mit 96 px... fertig
Installiere icons/helloworld-square-144.png als quadratisches Anwendungssymbol mit 144 px... fertig
Installiere icons/helloworld-square-192.png als quadratisches Anwendungssymbol mit 192 px... fertig
Installiere icons/helloworld-square-320.png als quadratisches Anwendungssymbol mit 320 px... fertig
Installiere icons/helloworld-square-480.png als quadratisches Anwendungssymbol mit 480 px... fertig
Installiere icons/helloworld-square-640.png als quadratisches Anwendungssymbol mit 640 px... fertig
Installiere icons/helloworld-square-960.png als quadratisches Anwendungssymbol mit 960 px... fertig
Installiere icons/helloworld-square-1280.png als quadratisches Anwendungssymbol mit 1280 px... fertig
Installiere icons/helloworld-adaptive-108.png als adaptives Anwendungssymbol mit 108 px... fertig
Installiere icons/helloworld-adaptive-162.png als adaptives Anwendungssymbol mit 162 px... fertig
Installiere icons/helloworld-adaptive-216.png als adaptives Anwendungssymbol mit 216 px... fertig
Installiere icons/helloworld-adaptive-324.png als adaptives Anwendungssymbol mit 324 px... fertig
Installiere icons/helloworld-adaptive-432.png als adaptives Anwendungssymbol mit 432 px... fertig
[helloworld] Entferne nicht benötigte App-Inhalte...
Entferne nicht benötigte App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
[helloworld] Starte App...
Hinweis
Wenn Sie eine aktuelle Version von Android verwenden, werden Sie möglicherweise feststellen, dass das App-Symbol zu einer grünen Schlange geändert wurde, der Hintergrund des Symbols jedoch weiß statt hellblau ist. Wir werden dies im nächsten Schritt beheben.
(beeware-venv) $ briefcase build iOS --update-resources
[helloworld] Anwendungscode wird aktualisiert...
Installation von src/helloworld... fertig
[helloworld] Anwendungsressourcen werden aktualisiert...
Installiere icons/helloworld-20.png als 20px-Anwendungssymbol... fertig
Installiere icons/helloworld-29.png als 29px-Anwendungssymbol... fertig
Installiere icons/helloworld-40.png als 40px-Anwendungssymbol... fertig
Installiere icons/helloworld-58.png als 58px-Anwendungssymbol... fertig
Installiere icons/helloworld-60.png als 60px-Anwendungssymbol... fertig
Installiere icons/helloworld-76.png als 76px-Anwendungssymbol... fertig
Installiere icons/helloworld-80.png als 80px-Anwendungssymbol... fertig
Installiere icons/helloworld-87.png als 87px-Anwendungssymbol... fertig
Installiere icons/helloworld-120.png als 120px-Anwendungssymbol... fertig
Installiere icons/helloworld-152.png als 152px-Anwendungssymbol... fertig
Installiere icons/helloworld-167.png als 167px-Anwendungssymbol... fertig
Installiere icons/helloworld-180.png als 180px-Anwendungssymbol... fertig
Installiere icons/helloworld-640.png als 640px-Anwendungssymbol... fertig
Installiere icons/helloworld-1024.png als 1024px-Anwendungssymbol... fertig
Installiere icons/helloworld-1280.png als 1280px-Anwendungssymbol... fertig
Installiere icons/helloworld-1920.png als 1920px-Anwendungssymbol... fertig
[helloworld] Entferne nicht benötigte App-Inhalte...
Entferne nicht benötigte App-Bundle-Inhalte... fertig
[helloworld] Anwendung aktualisiert.
[helloworld] Starte App...
Hinweis
Wenn Sie beim Ausführen der App einen Stacktrace erhalten, der auf faker oder
httpx verweist, haben Sie möglicherweise Schritt 7 oder 8 des Tutorials
übersprungen. Führen Sie die App erneut aus und fügen Sie das Argument -r
hinzu, um die App-Anforderungen zu aktualisieren.
Wenn Sie die App auf iOS oder Android ausführen, sollten Sie neben der Änderung
des Symbols auch feststellen, dass das neue Symbol in den Begrüßungsbildschirm
integriert ist. Allerdings wirkt der hellblaue Hintergrund des Symbols vor dem
weißen Hintergrund des Begrüßungsbildschirms etwas deplatziert. Wir können dies
beheben, indem wir die Hintergrundfarbe des Begrüßungsbildschirms anpassen.
Fügen Sie die folgende Definition zu Ihrer pyproject.toml hinzu, direkt nach
der Definition icon:
splash_background_color = "#D3E6F5"
Leider kann Briefcase diese Änderung nicht auf ein bereits generiertes Projekt
anwenden, da dafür Änderungen an einer der Dateien vorgenommen werden müssen,
die beim ursprünglichen Aufruf von briefcase create generiert wurden. Um diese
Änderung anzuwenden, müssen wir die App neu erstellen, indem wir briefcase
create erneut ausführen. Dabei werden wir aufgefordert, zu bestätigen, dass wir
das vorhandene Projekt überschreiben möchten:
(beeware-venv) $ briefcase create
Die Anwendung „helloworld“ existiert bereits; überschreiben [y/N]? y
[helloworld] Altes Anwendungs-Bundle wird entfernt...
[helloworld] Anwendungsvorlage wird erstellt...
...
[helloworld] Erstellt: build/helloworld/macos/app
(beeware-venv) $ briefcase create
Die Anwendung „helloworld“ existiert bereits; überschreiben [y/N]? y
[helloworld] Altes Anwendungs-Bundle wird entfernt...
[helloworld] Anwendungsvorlage wird erstellt...
...
[helloworld] Erstellt: build/helloworld/linux/ubuntu/jammy
(beeware-venv) C:\...>briefcase create
Die Anwendung „helloworld“ ist bereits vorhanden; überschreiben [y/N]? y
[helloworld] Altes Anwendungs-Bundle wird entfernt...
[helloworld] Anwendungsvorlage wird erstellt...
...
[helloworld] Erstellt: build\helloworld\windows\app
(beeware-venv) $ briefcase create android
Die Anwendung „helloworld“ existiert bereits; überschreiben [y/N]? y
[helloworld] Altes Anwendungs-Bundle wird entfernt...
[helloworld] Anwendungsvorlage wird erstellt...
...
[helloworld] Erstellt: build/helloworld/android/gradle
(beeware-venv) $ briefcase create iOS
Die Anwendung „helloworld“ existiert bereits; überschreiben [y/N]? y
[helloworld] Altes Anwendungs-Bundle wird entfernt...
[helloworld] Anwendungsvorlage wird erstellt...
...
[helloworld] Erstellt: build/helloworld/ios/xcode
Sie können die App dann mit briefcase run neu erstellen und erneut ausführen.
An der Desktop-App werden Sie keine Änderungen bemerken, aber die Android- oder
iOS-Apps sollten nun einen hellblauen Hintergrund für den Begrüßungsbildschirm
haben.
Sie müssen die App jedes Mal neu erstellen, wenn Sie Änderungen an Ihrer
pyproject.toml vornehmen, die nicht den Quellcode oder die Abhängigkeiten
betreffen. Jede Änderung an Beschreibungen, Versionsnummern, Farben oder
Berechtigungen erfordert einen Neuanlegungsvorgang. Aus diesem Grund sollten Sie
während der Entwicklung Ihres Projekts keine manuellen Änderungen am Inhalt des
Ordners build vornehmen und den Ordner build nicht zu Ihrem
Versionskontrollsystem hinzufügen. Der Ordner build sollte als vollständig
vergänglich betrachtet werden – als Ausgabe des Build-Systems, die bei Bedarf
neu erstellt werden kann, um die aktuelle Konfiguration Ihres Projekts
widerzuspiegeln.
Hinzufügen eines Laufzeitsymbols¶
Wenn Sie der Benutzeroberfläche der Anwendung ein Symbol hinzufügen möchten,
muss diese Art von Symbol in einem anderen Verzeichnis als die Anwendungssymbole
gespeichert werden. Klicken Sie mit der rechten Maustaste auf Tiberius den Yak,
speichern Sie das Bild als .png-Datei und nennen Sie es helloworld. Die
Datei sollte dann im Ordner "icons/" in Ihrem Quellpaket der Anwendung
gespeichert werden.
Ihr Verzeichnis wird wie folgt aussehen:
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ ├── helloworld
│ │ └── icons/
│ │ └── helloworld.png
│ └──...
└── pyproject.toml
Nun, da das Laufzeitsymbol vorhanden ist, fügen wir ein Symbol zu unserer Schaltfläche hinzu. Das Toga-Schaltflächen-Widget kann nur entweder ein Symbol oder einen Text aufnehmen (nicht beides), also aktualisieren wir den Code für die Schaltfläche, um das Laufzeitsymbol aufzunehmen.
helloworld_icon = toga.Icon("icons/helloworld")
button = toga.Button(
icon=helloworld_icon,
on_press=self.say_hello,
margin=5,
)
Da es sich bei den Laufzeitsymbolen um Anwendungsressourcen handelt, die in
Ihrem Python-Paket gebündelt sind, ist kein Rebuild oder eine Aktualisierung der
Ressourcen erforderlich. An diesem Punkt können Sie briefcase dev (oder
briefcase run) ausführen, um das der Schaltfläche hinzugefügte Symbol zu
sehen.