Category

Vergiss built-in Animationen in Xamarin.Forms! SkiaSharp bringt mehr Bewegung in deine Xamarin.Forms App für anspruchsvollere Animationen.

READ MORE

Verschiedene Smartphones haben unterschiedlichste Auflösungen. Möchte man sicherstellen, dass alle Icons in seiner App scharf dargestellt werden, muss man diese entweder in unterschiedlichen Auflösungen bereitstellen oder man verwendet skalierbare Vektorgrafiken, wie etwa SVG.

Ausserdem verwenden Android und iOS verschiedene Standards für die Grösse von Icons. Somit müssen diese pro Plattform eingepflegt werden. Dies bedeutet einen zusätzlichen Aufwand.

Doch wenn wir schon Code sowie UI mit Hilfe von Xamarin.Forms zwischen den verschiedenen Plattformen teilen, können wir dann nicht auch gleich die Icons wiederverwenden und wenn möglich gleich in Form von Vektorgrafiken?

Klar, das geht sogar recht gut. Obwohl Xamarin.Forms von sich aus keine SVG Grafiken unterstützt, können diese mit Hilfe von 3rd-party Libraries leicht eingebunden werden.

In einem Projekt, in welchem ich kürzlich gearbeitet habe, verwendete ich dazu FFImageLoading und SkiaSharp. Beide Libraries wurden bereits im Projekt benutzt, sodass nur noch das NuGet Package von Xamarin.FFImageLoading.Svg.Forms hinzugefügt werden musste. SkiaSharp ist eine Cross-Platform 2D-Grafik Library, welche auf der Skia-Grafikbibliothek von Google basiert.

FFImageLoading

FFImageLoading ist eine viel verwendete Library, wenn es darum geht Bilder aus dem Internet herzunterzuladen und anzuzeigen. Sie bietet eine Vielzahl von Funktionen wie etwa:

• Caching von Bildern
• Wiederholtes herunterladen von Bildern bei Fehlern
• Darstellung von Platzhalterbildern, wenn der Download fehlschlägt
• Skalierung und Transformierung von Bildern

Beispielanwendung

Ich habe ein kleines Demo-Projekt erstellt, in welchem ich zum einen lokal eingebundene SVG-Grafiken anzeige aber auch solche aus dem Internet.

FFImageLoading installieren und initialisieren

Als erstes muss FFImageLoading via NuGet zum Xamarin.Forms- sowie den Plattformprojekten hinzugefügt werden. Dies macht man entweder via NuGet Package Verwaltung oder einfach über die Konsole:

dotnet add package Xamarin.FFImageLoading.Svg.Forms --version 2.4.11.982

Um verwendet werden zu können, muss FFImageLoading beim Starten der App initialisiert werden. Am besten macht man dies noch vor der Initialisierung von Xamarin.Forms in der MainActivity oder im AppDelegate.

SVG Grafiken einbinden

Beim Hinzufügen von SVG Dateien zum Projekt, muss man darauf achten, dass man die Build Action auf “Embedded resource” stellt.

Aus Editoren exportiere SVG Grafiken enthalten oft viele redundante und nutzlose Informationen. Das können zum Beispiel Editor-Metadaten, Kommentare, ausgeblendete Elemente und Standardwerte sein. Diese können entfernt werden, ohne dass die Darstellung beeinträchtigt oder verändert wird. Dazu nutzt man am besten ein Tool wie etwa SVGO.

Die Grafiken können anschliessend direkt per Xaml eingebunden werden:

<ffimageloadingsvg:SvgCachedImage 
    Grid.Column="0" Grid.Row="0"
    WidthRequest="200" HeightRequest="200"
    ErrorPlaceholder="resource://XamarinFormsSvgSample.Resources.outline-warning-24px.svg"
    FadeAnimationForCachedImages="True"
    FadeAnimationEnabled="True"
    FadeAnimationDuration="100"
    Source="{Binding Item.IconUrl}" />

In diesem Beispiel verwende ich für den ErrorPlaceholder eine lokal hinterlegte SVG Grafik und als Source eine Url zu einem SVG im Internet.

Fazit

Mit FFImageLoading und SkiaSharp kann man auf sehr einfache Weise SVG Grafik in seine Xamarin.Forms App einbinden. Dadurch muss man seine Icons nicht für jede Plattform separat einpflegen. Weiter kann die Grösse der App verringert werden, da man nicht mehr dasselbe Icon in unterschiedlichen Auflösungen ausliefern muss. Allerdings muss man beachten, dass die Darstellung von SVG Grafiken etwas mehr Rechenleistung verlangt. Besonders in Zusammenhang mit einer ListView und mehreren SVG Grafiken pro Eintrag konnte ich beobachten, dass das Scrollen zum Teil etwas stockt. Bei der Verwendung von SVG Grafiken in der Toolbar oder in Tabs konnte ich jedoch keine Performance-Einbussen feststellen.