Pokédex – Kleines Xamarin.Forms Projekt – Teil 6

Ich habe bereits fünf Teile dieser kleinen Xamarin.Forms Serie in meinem Blog veröffentlicht. Im ersten Beitrag haben wir begonnen unsere Pokédex-App zu erstellen und ein generelles Grundsetup durchgeführt. Im zweiten Beitrag ging es mit der Entwicklung weiter. So haben wir die ersten Services und auch die ersten Calls in Richtung der öffentliche API gemacht und diese Informationen in der App anzeigen. Im dritten Beitrag haben wir begonnen die Pokémon-Details abzurufen und per inkrementellem Laden auf der Übersichtsseite anzuzeigen. Im vierten Beitrag haben wir ein kleines Popup entwickelt, welches uns weitere Details anzeigt, sofern der Nutzer einen Eintrag in der Übersicht angeklickt hat. Im fünften Teil dieser Serie wollen wir noch ein paar Anpassungen vornehmen und unseren Code ein wenig aufräumen bzw. optimieren. Im nun sechsten Beitrag wollen wir ein App-Icon unserem Projekt hinzufügen.

Den bisherigen Stand könnt ihr über folgenden Download-Button herunterladen.

Um nun ein kleines App-Icon zu erstellen, gehe ich wieder auf die Webseite mit den Material Icons und suche nach Pokémon. Hier findet man nun einen Pokéball, welchen wir herunterladen.

Dieses Icon nutze ich nun, um mit der Hilfe von paint.net ein Icon in der Auflösung von 1024px x 1024px zu erstellen.

Um nun die Icons in der passenden Auflösung sowohl für Android und iOS zu erstellen, nutze ich die Webseite icon.kitchen. Hier kann man einfach das gerade von uns erstelle Logo hochladen und entsprechend anpassen, wie z.B. das Padding auf 0 reduzieren.

Da ich für Android sowohl runde als auch quadratische Icons benötige, müssen wir sowohl bei Shape Square als auch Circle herunterladen. Anschließend können wir die Icons einfach in die passenden Ordner im Android-Projekt kopieren.

Die vorhandenen Dateien in den jeweiligen Ordnern können gelöscht werden. Damit sollten ihr jetzt die folgende Struktur haben.

Nun öffnen wir die Datei MainActivity.cs und passen das Activity-Attribut hat. Hier tauschen wir zunächst das Icon aus und fügen dann noch die RoundIcon-Definition hinzu. Damit erhalten wir nun das folgende Activity-Attribut.

[Activity(Label = "Pokedex", Icon = "@mipmap/appicon", RoundIcon = "@mipmap/appicon_round",
        Theme = "@style/MainTheme", MainLauncher = true,
        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation 
        | ConfigChanges.UiMode | ConfigChanges.ScreenLayout 
        | ConfigChanges.SmallestScreenSize)]

Wenn wir die App nun auf unser Gerät deployen, so stellen wir fest, dass das neue Icon vorhanden ist und wir sind mit unseren Anpassungen bzgl. des Icons für Android fertig.

Machen wir weiter mit iOS. Hier habe ich die Dateinamen angepasst, indem ich hier einfach die Größe der Datei angehängt habe.

Im iOS-Projekt gibt es den Eintrag Asset Catalogs und darin den Unterpunkt Assets. Diesen können wir per Doppelklick öffnen und dann die einzelnen Icons auswählen und entsprechend den verschiedenen Größen zuordnen.

Wenn wir jetzt die App zum Beispiel in einem iOS-Simulator starten, so sehen wir auch hier entsprechend das neue Icon.

Nun fehlt nur noch UWP. Hierfür öffnen wir die Datei Package.appxmanifest und darin wechseln wir auf den Reiter Visual Assets. Unter Source öffnen wir nun unser Icon in der Größe 1024px x 1024px. Anschließend entfernen wir noch das Häkchen bei Apply recommended padding und klicken auf Generate. Ich entferne außerdem noch die Häkchen unter Show name bei allen drei Optionen.

Damit haben wir auch unter UWP nun ein passendes App-Icon.

Den aktuellen Stand könnt ihr euch natürlich wieder über den folgenden Button herunterladen.

Nächste Woche folgt nun noch ein letzter Beitrag, welcher sich mit dem Thema SplashScreen beschäftigt. Anschließend haben wir eine kleine, aber feine App geschrieben, welche einige Konzepte der Xamarin.Forms-Entwicklung aufgezeigt hat. Seid also auch beim nächsten Mal wieder mit dabei.

WordPressXF – Framework für WordPress-Blogs Xamarin.Forms Controls: RepeaterView mit DataTemplateSelector Deutschlands Kennzeichen: Meine erste iOS-App