Verwenden von SVG-Ressourcen in Xamarin

Bei der Entwicklung einer mobilen Anwendung sind viele Punkte zu beachten. Dies ist die Wahl der Technologie, auf die es geschrieben wird, und die Entwicklung der Anwendungsarchitektur und tatsächlich das Schreiben des Codes. Früher oder später kommt ein Moment, in dem das Rückgrat der Anwendung vorhanden ist, die gesamte Logik geschrieben ist und die Anwendung im Allgemeinen funktioniert, aber ... es gibt kein Erscheinungsbild. Hier lohnt es sich, über die verwendeten Grafikressourcen nachzudenken, da Grafiken den Löwenanteil der Größe der Endmontage ausmachen, sei es .apk unter Android oder .ipa unter iOS. Für mobile Spiele werden im Prinzip große Baugruppen erwartet. Selbst jetzt müssen Sie von PlayMarket manchmal Datenmengen von bis zu 2 GB herunterladen. Es ist gut, wenn Sie während des Downloads eine Verbindung zu Wi-Fi herstellen können oder der Mobilfunkbetreiber eine unbegrenzte Hochgeschwindigkeitsverbindung bereitstellt.Für Spiele wird dies jedoch erwartet, und eine Geschäftsanwendung dieser Größe wirft unfreiwillig die Frage auf, woher das kommt. Einer der Gründe für die große Größe der Baugruppe einer Geschäftsanwendung kann eine erhebliche Anzahl von Symbolen und Bildern sein, die darin angezeigt werden müssen. Vergessen Sie auch nicht, dass eine große Anzahl von Grafiken die Leistung der Anwendung proportional beeinflusst.

Beim Erstellen der grafischen Komponente einer Anwendung tritt häufig ein ernstes Problem auf. Es gibt sehr viele mobile Geräte, von Uhren bis zu Tablets, und ihre Bildschirmauflösungen sind sehr unterschiedlich. Aus diesem Grund ist es häufig erforderlich, Grafikressourcen in einer Assembly in separate Dateien für jeden der vorhandenen Typen aufzunehmen. 5 Kopien für Android und 3 für iOS. Dies wirkt sich erheblich auf die Größe der Endmontage aus, die Sie in den Store hochladen.



In diesem Artikel erfahren Sie, was getan werden kann, um nicht in eine solche Situation zu geraten.

Vergleich von PNG- und SVG-Formaten

1. Mit Rastergrafiken können Sie Zeichnungen nahezu beliebiger Komplexität erstellen, ohne die Dateigröße wesentlich zu verlieren.
2. Wenn keine Bildskalierung erforderlich ist, ist die Verarbeitungsgeschwindigkeit komplexer Bilder sehr hoch.
3. Die Bitmap-Darstellung von Bildern ist für die meisten E / A-Geräte selbstverständlich.

Es gibt jedoch auch Nachteile.



Beispielsweise kann eine Bitmap nicht perfekt skaliert werden. Wenn Sie ein kleines Bild vergrößern, "schäumt" das Bild auf und Sie können die Pixel sehen, aus denen es besteht.

Das SVG-Format ist wiederum kein Bild. Laut dem Wikipedia-Artikel ist SVG eine skalierbare Vektorgrafik-Markup-Sprache, mit der Sie eine Datei nach Bedarf lesen und bearbeiten können.



Als Auszeichnungssprache können Sie mit SVG auch Filter innerhalb eines Dokuments anwenden (z. B. Unschärfe, Unebenheiten usw.). Sie werden als Tags deklariert, für deren Rendern der Betrachter verantwortlich ist. Dies bedeutet, dass sie die Größe der Originaldatei nicht beeinflussen.

Darüber hinaus bietet das SVG-Format eine Reihe weiterer Vorteile:

1. Als Vektorformat können Sie mit SVG jeden Teil eines Bildes ohne Qualitätsverlust skalieren.
2. Rastergrafiken können in ein SVG-Dokument eingefügt werden.
3. Einfache Integration in HTML- und XHTML-Dokumente.

1. Je feiner die Details im Bild sind, desto schneller wächst die Größe der SVG-Daten. In einigen Fällen bietet SVG nicht nur keine Vorteile, sondern verliert auch gegenüber dem Raster.
2. Die Komplexität der Verwendung in kartografischen Anwendungen, da Sie für die korrekte Anzeige eines kleinen Teils des Bildes das gesamte Dokument lesen müssen.

Arbeiten mit dem SVG-Format in Xamarin.Android

Wie oben erwähnt, unterstützt Xamarin SVG nicht sofort. Um dieses Problem zu lösen, können Sie Bibliotheken von Drittanbietern oder VectorDrawable verwenden. In letzter Zeit bevorzugen Entwickler zunehmend Letzteres, da sich die meisten Bibliotheken für Xamarin auf die plattformübergreifende Verwendung in Xamarin.Forms konzentrieren und Lösungen für natives Android entweder nicht mehr von ihren Entwicklern unterstützt werden und veraltet sind oder es ernsthafte Probleme gibt, wenn versucht wird, auf ihrer Basis aufzubauen Bibliothek für Xamarin. In diesem Zusammenhang werden wir hier die Verwendung von VectorDrawable in Betracht ziehen.

1. Android Studio File -> New -> New Project;
   
   , — Vector Asset Studio, .
2. drawable -> New -> Vector Asset;
   
   
   
   
   
   Asset Studio. Material Design, SVG PSD, xml-. .
3. Asset Studio
   
   
   
   
   
   ,  , .
4. Next 
   
   
   
   
   
   Xamarin.Android.
   
   

Genug vorbereitende Arbeiten, für die Android Studio installiert sein muss. Leider konnten wir zum Zeitpunkt dieses Schreibens keine korrekt funktionierenden Online-Konverter finden. Einige gaben beim Versuch, die bereitgestellte SVG-Datei zu konvertieren, einen Fehler an, andere gaben an, dass die Verwendung von Vector Asset Studio besser sei.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	xmlns:android        ="http://schemas.android.com/apk/res/android"
	xmlns:app            ="http://schemas.android.com/apk/res-auto"
	android:layout_width ="match_parent"
	android:layout_height="match_parent"
	android:minWidth="25px"
	android:minHeight="25px">
	<ImageView
		android:layout_width="150dp"
		android:layout_height="150dp"
		android:layout_alignParentLeft="true"
		android:id="@+id/imageView1"
		android:adjustViewBounds="true"
		app:srcCompat="@drawable/question_svg"
		android:background="@android:color/holo_red_dark"/>
	<ImageView
		android:layout_width="150dp"
		android:layout_height="150dp"
		android:layout_alignParentRight="true"
		android:id="@+id/imageView2"
		android:adjustViewBounds="true"
		app:src="@drawable/question"
		android:background="@android:color/holo_red_dark"/>
	<ImageView
		android:layout_width="150dp"
		android:layout_height="150dp"
		android:id="@+id/imageView3"
		android:adjustViewBounds="true"
		android:layout_marginTop="30dp"
		app:srcCompat="@drawable/question"
		android:layout_below="@id/imageView1"/>
</RelativeLayout>

Arbeitsergebnisse

Huawei Honor 20 Pro

Nexus 5

Wie Sie sehen, ist die Qualität der Bilder gleich, was bedeutet, dass wir das gewünschte Ergebnis erzielt haben.

Arbeiten mit dem SVG-Format in Xamarin.iOS

Bei Xamarin.iOS ist die Situation dieselbe wie bei Xamarin.Android, da die Arbeit mit SVG-Dateien nicht sofort unterstützt wird. Die Implementierung erfordert jedoch keinen großen Aufwand. Bei der nativen iOS-Entwicklung muss für SVG SVGKit enthalten sein. Sie können solche Dateien verarbeiten, ohne auf Lösungen von Drittanbietern zurückgreifen zu müssen. Im Fall von Xamarin.iOS können wir die SVGKit.Binding- Bibliothek verwenden . Dies ist ein C # -Wrapper über dem ursprünglichen SVGKit.

Wir müssen lediglich das NuGet-Paket mit unserem Projekt verbinden. Zum Zeitpunkt dieses Schreibens ist die neueste Version 1.0.4.

Hier werden die SVGKImage-Klasse (das SVG-Bild selbst) und SVGKFastImageView (das Steuerelement zum Anzeigen solcher Bilder) implementiert.

void CreateControls()
{
	var image_bundle_resource = new SVGKImage("SVGImages/question.svg");
	img1 = new SVGKFastImageView(image_bundle_resource);
	Add(img1);
	img1.Frame = new CGRect(View.Frame.Width / 4, 50, View.Frame.Width / 2, View.Frame.Width / 2);

	var image_content = new SVGKImage(Path.Combine(NSBundle.MainBundle.BundlePath, "SVGImages/question1.svg"));
	img2 = new SVGKFastImageView(image_content);
	Add(img2);
	img2.Frame = new CGRect(5, img1.Frame.Bottom + 5, View.Frame.Width - 5, View.Frame.Width - 5);
}

1. SVGKFastImageView unterstützt keine Initialisierung ohne SVGKImage. Es wird ein Fehler ausgegeben, der darauf hinweist, dass der im Code angegebene Konstruktor verwendet werden muss.
2. Es gibt keine Möglichkeit, SVG-Dateien in anderen Steuerelementen zu verwenden. Wenn dies jedoch nicht erforderlich ist, können Sie es verwenden.

Ergebnis des Programms

Wenn die Anwendung für die Verwendung von SVG-Dateien nicht nur in ImageView von entscheidender Bedeutung ist, können Sie auch andere Bibliotheken verwenden. Zum Beispiel FFImageLoading . Dies ist eine leistungsstarke Bibliothek, mit der Sie SVG-Bilder nicht nur im nativen Xamarin.iOS UIImage entladen, sondern auch direkt im gewünschten Steuerelement ausführen können, um Entwicklungszeit zu sparen. Es gibt auch Funktionen zum Herunterladen von Bildern aus dem Internet, die wir in diesem Artikel jedoch nicht berücksichtigen werden.

private async Task CreateControls()
{
    img1 = new UIImageView();
    Add(img1);
    img1.Frame = new CGRect(View.Frame.Width / 4, 50, View.Frame.Width/2, View.Frame.Width/2);

    ImageService.Instance
                .LoadFile("SVGImages/question.svg")
                .WithCustomDataResolver(new SvgDataResolver((int)img1.Frame.Width, 0, true))
                .Into(img1);

    var button = new UIButton() { BackgroundColor = UIColor.Red};
    Add(button);
    button.Frame = new CGRect(View.Frame.Width/2 - 25, img1.Frame.Bottom + 20, 50, 50);

    UIImage imageSVG = await ImageService.Instance
                .LoadFile("SVGImages/question.svg")
                .WithCustomDataResolver(new SvgDataResolver((int)View.Frame.Width, 0, true))
                .AsUIImageAsync();
    if(imageSVG != null)
        button.SetBackgroundImage(imageSVG, UIControlState.Normal);
}

    var svgString = @"<svg><rect width=""30"" height=""30"" style=""fill:blue"" /></svg>";

    UIImage img = await ImageService.Instance
		.LoadString(svgString)
		.WithCustomDataResolver(new SvgDataResolver(64, 0, true))
		.AsUIImageAsync();

Arbeiten mit dem SVG-Format in Xamarin.Forms

Im Großen und Ganzen ist es nicht erforderlich, nach Bibliotheken für Formulare zu suchen. Sie können einfach die Plattformen verbinden, die Projekten bekannt sind, und es dauert lange und mühsam, Renderings für jedes Steuerelement, das Sie verwenden möchten, neu zu schreiben. Glücklicherweise gibt es eine Lösung, die wir teilen werden.

Xamarin.FFImageLoading Xamarin.FFImageLoading.SVG, Xamarin.Forms (Xamarin.FFImageLoading.Forms Xamarin.FFImageLoading.SVG.Forms). Xamarin.Forms , , :

1. (PCL ) NuGet- — Xamarin.FFImageLoading.Forms Xamarin.FFImageLoading.SVG.Forms;
2. AppDelegate.cs iOS-:
   
   

   public override bool FinishedLaunching( UIApplication app, NSDictionary options )
   {
       global::Xamarin.Forms.Forms.Init();
       FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
       CachedImageRenderer.InitImageSourceHandler();
       var ignore = typeof(SvgCachedImage);
       LoadApplication(new App());
       return base.FinishedLaunching(app, options);
   }

3. MainActivity.cs Android-:
   
   

   protected override void OnCreate( Bundle savedInstanceState )
   {
       TabLayoutResource = Resource.Layout.Tabbar;
       ToolbarResource = Resource.Layout.Toolbar;
       base.OnCreate(savedInstanceState);
   
       Xamarin.Essentials.Platform.Init(this, savedInstanceState);
       global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
       FFImageLoading.Forms.Platform.CachedImageRenderer.Init(true);
       CachedImageRenderer.InitImageViewHandler();
       var ignore = typeof(SvgCachedImage);
       LoadApplication(new App());
   }
   

xmlns:svg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"

1. Geben Sie in der XAML-Datei den Namen der SVG-Datei an, die sich in den Ressourcen des Plattformprojekts befindet:
   
   

   <svg:SvgCachedImage
               Source="question.svg"
               WidthRequest="100"
               HeightRequest="100"/>
   

2. Geben Sie in der XAML-Datei den vollständigen Pfad zur SVG-Datei an, die eine eingebettete Ressource im PCL-Projekt ist:
   
   
   
   

   <svg:SvgCachedImage
               Source="resource://SVGFormsTest.SVG.question1.svg"
               WidthRequest="100"
               HeightRequest="100"/>
   

   
   
   Beim Laden aus eingebetteten Ressourcen können Sie den Namen einer anderen Assembly angeben:
   
   
   
   

   resource://SVGFormsTest.SVG.question1.svg?assembly=[ASSEMBLY FULL NAME]
   

3. Wenn Sie mit Code arbeiten, geben wir den Steuerelementen zuerst einen Namen:
   
   
   
   

   <svg:SvgCachedImage
               x:Name="image"
               WidthRequest="100"
               HeightRequest="100"/>
   

   
   
   Je nachdem, welche Ressource verwendet wird, wählen wir eine der folgenden Optionen:
   
   
   
   
   • eingebettete Ressourcen verwenden
     
     

     image.Source = SvgImageSource.FromResource("SVGFormsTest.SVG.question1.svg");

     
     
     
   • 
     
     
     
     

     image.Source = SvgImageSource.FromFile("question.svg");

     
     
     
4. Binding 2 :
   
   
   
   
   • , SvgImageSource. , XAML- :
     
     
     
     

     <svg:SvgCachedImage
                 Source="{Binding Source}"
                 WidthRequest="100"
                 HeightRequest="100"/>
     

   • . , . :
     
     
     
     

     <ContentPage.Resources>
             <ResourceDictionary>
                 <svg:SvgImageSourceConverter
                     x:Key="SourceConverter"/>
             </ResourceDictionary>
         </ContentPage.Resources>
     

     
     
     :
     
     
     
     

     <svg:SvgCachedImage
                 Source="{Binding Source1, Converter={StaticResource SourceConverter}}"
                 WidthRequest="100"
                 HeightRequest="100"/>
     

     
     
     :
     
     
     
     

     public MainVM()
     {
         source1 = "question.svg";
     }
     
     string source1;
     public string Source1
     {
         get => source1;
         set
         {
             source1 = value;
         }
     }
     

     
     
     :
     
     
     
     

     public MainVM()
     {
         source1 = "resource://SVGFormsTest.SVG.question1.svg";
     }
     
     string source1;
     public string Source1
     {
         get => source1;
         set
         {
             source1 = value;
         }
     }
     

     
     
     , . , , .

SVG- , . , , , , , , SVG- . , PNG- , SVG, .

SVG-Ressourcen haben auch einen kleinen Nachteil. Sie können nicht als Anwendungssymbol bereitgestellt werden, da gemäß den Richtlinien von Google und Apple nur PNG- und JPEG-Dateien als Symbol verwendet werden können.