XamarinでのSVGリソースの使用

モバイルアプリケーションを開発する際には、注意すべき点がたくさんあります。これは、それが記述されるテクノロジーの選択、アプリケーションアーキテクチャの開発、そして実際にはコードの記述です。遅かれ早かれ、アプリケーションのバックボーンがそこにあり、すべてのロジックが記述され、アプリケーションは一般に機能する瞬間が来ますが、...外観はありません。ここでは、使用されるグラフィックリソースについて検討する価値があります。グラフィックは、Androidの.apkでもiOSの.ipaでも、最終的なアセンブリのサイズの大部分を占めるためです。原則として、モバイルゲームには巨大なアセンブリが期待されますが、PlayMarketからは、最大2 GBのデータボリュームをダウンロードする必要がある場合があります。ダウンロード中にWi-Fiに接続できる場合、またはモバイルオペレーターが高速無制限接続を提供する場合は、この方法が適しています。しかし、ゲームの場合、これは予想されることであり、このサイズのビジネスアプリケーションは、「これはどこから来たのか」という疑問を思わず提起します。ビジネスアプリケーションのアセンブリのサイズが大きい理由の1つは、その中に表示する必要のあるアイコンや画像の数が多いことです。また、大量のグラフィックがアプリケーションのパフォーマンスに比例して影響することも忘れないでください。

アプリケーションのグラフィカルコンポーネントを作成する場合、多くの場合、深刻な問題が発生します。時計からタブレットまで、非常に多くのモバイルデバイスがあり、それらの画面解像度は大きく異なります。このため、多くの場合、既存のタイプごとに個別のファイルでアセンブリにグラフィックリソースを含める必要があります。Androidの場合は5部、iOSの場合は3部。これは、ストアにアップロードする最終的なアセンブリのサイズに大きく影響します。



この記事では、このような状況にならないようにするために何ができるかを説明します。

PNG形式とSVG形式の比較

1. ラスターグラフィックスを使用すると、ファイルサイズを大幅に失うことなく、ほぼすべての複雑な図面を作成できます。
2. 画像のスケーリングが必要ない場合、複雑な画像の処理速度は非常に速くなります。
3. 画像のビットマップ表現は、ほとんどのI / Oデバイスにとって自然です。

ただし、欠点もあります。



たとえば、ビットマップを完全にスケーリングすることはできません。小さな画像を拡大すると、画像が「泡立ち」、それを構成するピクセルを確認できます。

SVG形式は、実際にはイメージではありません。ウィキペディアの記事によると、 SVGはスケーラブルなベクターグラフィックスマークアップ言語であり、必要に応じてファイルを読み取ったり編集したりできます。



また、マークアップ言語であるSVGを使用すると、ドキュメント内にフィルターを適用できます（たとえば、ぼかし、バンプなど）。これらは、ビューアがレンダリングを担当するタグとして宣言されています。つまり、元のファイルのサイズには影響しません。

上記に加えて、SVG形式には他にも多くの利点があります。

1. ベクトル形式として、SVGを使用すると、品質を損なうことなく画像の任意の部分を拡大縮小できます。
2. ラスターグラフィックはSVGドキュメントに挿入できます。
3. HTMLおよびXHTMLドキュメントと簡単に統合できます。

1. 画像の細部が細かいほど、SVGデータのサイズは速くなります。場合によっては、SVGは利点を提供するだけでなく、ラスターを失うこともあります。
2. 画像のごく一部を正しく表示するには、ドキュメント全体を読む必要があるため、カートグラフィックアプリケーションでの使用の複雑さ。

Xamarin.AndroidでのSVG形式の操作

上記のように、XamarinはSVGをそのままではサポートしていません。この問題を解決するには、サードパーティのライブラリまたはVectorDrawableを使用できます。XamarinのライブラリのほとんどがXamarin.Formsでのクロスプラットフォームの使用に焦点を合わせているため、最近、開発者は後者をますます好んでいます。ネイティブandroidのソリューションは、開発者によってサポートされなくなって古くなっているか、独自に構築しようとすると深刻な問題が発生します。 Xamarinのライブラリ。この点で、ここではVectorDrawableの使用を検討します。

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.
   
   

AndroidStudioのインストールを必要とする十分な準備作業。残念ながら、この記事の執筆時点では、正しく機能するオンラインコンバーターを見つけることができませんでした。提供されたSVGファイルを変換しようとしたときにエラーが発生したものもあれば、Vector AssetStudioを使用する方がよいと指摘したものもあります。

<?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>

仕事の結果

Huawei Honor 20 Pro

ネクサス5

ご覧のとおり、画像の品質は同じです。つまり、目的の結果が得られています。

Xamarin.iOSでのSVG形式の操作

Xamarin.iOSの場合、SVGファイルの操作がそのままではサポートされていないという意味で、状況はXamarin.Androidの場合と同じです。ただし、その実装には多くの労力は必要ありません。ネイティブiOS開発の場合、SVGにはSVGKitが含まれている必要があります。これにより、サードパーティのソリューションに頼ることなく、このようなファイルを処理できます。Xamarin.iOSの場合、SVGKit.Bindingライブラリを使用できます。これは、元のSVGKitのC＃ラッパーです。

必要なのは、NuGetパッケージをプロジェクトに接続することだけです。この記事の執筆時点では、最新バージョンは1.0.4です。

ここでは、SVGKImageクラス（SVGイメージ自体）とSVGKFastImageView（そのようなイメージを表示するためのコントロール）が実装されています。

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は、SVGKImageを提供しない場合の初期化をサポートしません-コードで提供されたコンストラクターを使用する必要があることを示すエラーがスローされます。
2. 他のコントロールでSVGファイルを使用する方法はありません。ただし、これが不要な場合は使用できます。

プログラムの成果

ImageViewだけでなくSVGファイルを使用するためにアプリケーションが重要な場合は、他のライブラリを使用できます。たとえば、FFImageLoading。これは、ネイティブXamarin.iOS UIImageでSVGイメージをアンロードできるだけでなく、目的のコントロールに直接アンロードして開発時間を節約できる強力なライブラリです。インターネットから画像をダウンロードする機能もありますが、この記事では考慮しません。

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();

Xamarin.FormsでのSVG形式の操作

概して、フォームのライブラリを探す必要はありません。プロジェクトに認識されているプラ​​ットフォームを接続するだけで、使用する各コントロールのレンダリングを書き直すのに長い時間と手間がかかります。幸いなことに、私たちが共有する解決策があります。

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. XAMLファイルで、プラットフォームプロジェクトリソースにあるSVGファイルの名前を指定します。
   
   

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

2. XAMLファイルで、PCLプロジェクトの埋め込みリソースであるSVGファイルへのフルパスを指定します。
   
   
   
   

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

   
   
   埋め込みリソースからロードする場合、別のアセンブリの名前を指定できます。
   
   
   
   

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

3. コードから作業するときは、最初にコントロールに名前を付けます。
   
   
   
   

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

   
   
   次に、使用されているリソースに応じて、次のいずれかのオプションを選択します。
   
   
   
   
   • 埋め込みリソースを使用するには
     
     

     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リソースにも小さな欠点があります。GoogleとAppleのガイドラインに従ってアイコンとして使用できるのは、PNGファイルとJPEGファイルのみであるため、アプリケーションアイコンとして提供することはできません。