Xamarin.Formsの弱点、グラフ表示を補強できるコンポーネント「Xuni」を使ってみた

可能な限りコードを共有化してみたサンプル

プロジェクトの構造

図6　プロジェクトの構造

　今回のサンプルコードは、Portable Class Library（PCL）、Android、iOS、Windows Phoneの4つのプロジェクトから構成されています。

　PCLプロジェクト部分にプラットフォーム共通部分を記述します。今回のサンプルでは、ほぼすべてのコードと画面定義をPCLに記述して共通化を最大限行っています。Xuniに必要な定義もその大部分がPCLプロジェクトに記述されています。

　ただし、Xamarin.Formsの初期化が各プラットフォームで必要なようにXuniの初期化も各プラットフォームで必要です。そのため、NuGetを使ったXuniのインストールもPCLプロジェクトだけではなく各プロジェクトで必要になります。

Androidプロジェクトの設定

　AndroidプロジェクトでのXamarin.Formsの初期化は、MainActivity.csに記述されています。Xuniの初期化も同じところに記述するのかと思ったのですが、Androidプロジェクトでは例外的にXuniの初期化を明記しないでよいようです。

iOSプロジェクトの設定

　iOSプロジェクトでのXamarin.Formsの初期化は、AppDelegate.csに記述されています。当たり前のようですが、iOSアプリにもかかわらずコードはC#で記述します。Xamarin.Formsの初期化直後にXuniの初期化を行います。

リスト1　AppDelegate.csから抜粋

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    //
    Xuni.Xamarin.FlexChart.Platform.iOS.Forms.Init();  //……【追加】
    //
    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

Windows Phoneプロジェクトの設定

　Windows PhoneプロジェクトでのXamarin.Formsの初期化は、MainPage.xaml.csに記述されています。

リスト2　MainPage.xaml.cs（WindowsPhoneプロジェクト）から抜粋

public MainPage()
{
    InitializeComponent();
    SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

    global::Xamarin.Forms.Forms.Init();
    //
    Xuni.Xamarin.FlexChart.Platform.WinPhone.FlexChartRenderer.Init();  //……【追加】
    //
    LoadApplication(new CZ1506Graph.App());
}

PCLプロジェクトでの画面定義

　Xamarin.Formsの画面定義は、XAMLと呼ばれるWPFアプリやWindowsストアアプリと同じ構造の画面定義体を使います。ただし両者には100%の互換性はありませんので、Xamarin.Formsの画面定義をXAMLデザイナでビジュアル表示することはできません。

リスト3　MainPage.xaml（PCLプロジェクト）から抜粋

<ContentPage.Content>
  <StackLayout>
    <local:AdaptiveFlexChart ChartType = "Line"  BindingX="Count" 
                          ItemsSource="{Binding Accele}">
      <local:AdaptiveFlexChart.Series>
        <xuni:ChartSeries Binding="ValueX" SymbolBorderWidth="2" BorderColor="Red"/>
        <xuni:ChartSeries Binding="ValueY" SymbolBorderWidth="2" BorderColor="Green"/>
        <xuni:ChartSeries Binding="ValueZ" SymbolBorderWidth="2" BorderColor="Yellow"/>
      </local:AdaptiveFlexChart.Series>
    </local:AdaptiveFlexChart>
  </StackLayout>
</ContentPage.Content>

　Xuniで折れ線グラフを表示するのは非常に簡単で、ItemsSourceにデータの入ったコレクションをBindingします。コレクションの中の各要素値はChartSeriesにBindingします。

　これで自動的にグラフ表示が可能になります。

実行結果

　手元にあったAndroid（Nexus 5）とWindows Phone（MADOSMA 501）で実行した結果は次のようになります。同じ画面定義体なのにそれぞれのプラットフォームに合わせて、バージョン情報画面を表示するためのメニューの実装が変わっています。

図7　実行結果

　このようなプラットフォーム固有の実装への変換は、実行時ではなくビルド時にXamarin.FormsのXAMLから各プラットフォーム固有の画面定義体に変換することで実現しているので、実行に伴うオーバーヘッドは発生しません。

まとめ

　Xuniを使えば、Xamarin.Formsの弱点である折れ線グラフや円グラフなどのグラフ表示のコントロールがない問題をクリアできます。

　NuGetで簡単に導入できる点も含めて、XuniはまさにUniversal時代の新しい市販コンポーネントの世界を体現しているのかもしれません。ぜひ、トライアル版でそのコンセプトを体感してみてください。

　この記事で提供しているサンプルにはランタイムライセンスを組み込み済みですので、Xamarinの開発環境を準備すれば、そのまま動作させることができます。