Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/13 14:00

ダウンロード Sample.zip (306.6 KB)

目次

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

プロジェクトの構造

図6 プロジェクトの構造
図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 実行結果
図7 実行結果

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

まとめ

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

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

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



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 初音玲(ハツネアキラ)

     国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。  個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。  Microsoft MVP for Windows Development...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(Xuni)
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5