Visual Studio＋Xamarin.Forms＋Xuniでクロスプラットフォーム開発：特集：クロスプラットフォーム開発新時代（3/4 ページ）

Xuniはモバイルアプリ開発で便利に使えるコントロールキットだ。本稿ではXamarin.FormsとXuniを組み合わせて簡単なアプリを作ってみる。

[かわさきしんじ，Insider.NET編集部]

FlexGridコントロールを使用してみる

　Xamarin.Formsを使用する場合、作成するアプリに共通なUI要素とロジックはPCLまたは共有プロジェクトにまとめて記述する。本稿ではPCLを利用しているので、ここにUIとFlexGridコントロールに表示するデータを置くことにしよう。手抜きで申し訳ないが、ここではデータをそのままUIへ流し込むだけのものとする。

データソース

　ここではデータソースとして以下のようなクラスを作成して、PCLプロジェクトに「J1Teams.cs」という名前で保存した。パイプ記号で2016年のJ1リーグに所属するチームの名前とそのチームが所属する県の組（カンマ区切り）を区切り、それを分割して文字列配列にした後、今度はカンマでそれらを分割したもの（とID）を含んだTeamクラスのインスタンスのコレクションをデータソースとしている。

public class J1Teams
{
  public class Team
  {
    public int id { get; set; }
    public string Name { get; set; }
    public string Hometown { get; set; }
  }

  static string[] teams =
    ("ベガルタ仙台,宮城|鹿島アントラーズ,茨城|浦和レッズ,埼玉|"
     + "大宮アルディージャ,埼玉|柏レイソル,千葉|FC東京,東京|"
     + "川崎フロンターレ,神奈川|横浜Fマリノス,神奈川|湘南ベルマーレ,神奈川|"
     + "ヴァンフォーレ甲府,山梨|アルビレックス新潟,新潟|ジュビロ磐田,静岡|"
     + "名古屋グランパス,愛知|ガンバ大阪,大阪|ヴィッセル神戸,兵庫|"
     + "サンフレッチェ広島,広島|アビスパ福岡,福岡|サガン鳥栖,佐賀").Split('|');

  public static List<Team> GetTeamList()
  {
    var _teamlist = new List<Team>();
    for (var i = 0; i < teams.Length; i++)
    {
      var tmp = teams[i].Split(',');
      var team = new Team() { id = i+1, Name = tmp[0], Hometown = tmp[1] };
      _teamlist.Add(team);
    }
    return _teamlist;
  }
}

本稿で使用するデータソース（J1Teams.csファイル）

FlexGridコントロールをPCLプロジェクトに追加

　まずはC#のコードを使って、FlexGridコントロールをPCLプロジェクトに追加しよう。それには、PCLプロジェクトにクラスを追加する。ここではFlexGridPageクラスとした。コードはとてもシンプルだ。

using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xuni.Forms.FlexGrid;

namespace XamarinXuniTestPCL
{
  public class FlexGridPage
  {
    public static FlexGrid GetGridControl()
    {
      FlexGrid grid = new FlexGrid();
      grid.ItemsSource = J1Teams.GetTeamList();
      return grid;
    }
  }
}

FlexGridPageクラス

　FlexGridオブジェクトを作成し、そのItemsSourceプロパティに先ほど見たJ1TeamsクラスのGetTeamListメソッドの戻り値をセットしている。その戻り値のFlexGridオブジェクトを、次にXamarin.Formsのメインのコンテンツとして設定する。これはPCLプロジェクトにあるAppクラスのコンストラクタで行う。

public App()
{
  MainPage = new ContentPage
  {
    Content = FlexGridPage.GetGridControl()
  };
  Xuni.Forms.Core.LicenseManager.Key = License.Key;
}

Xamarin.FormsアプリのメインのコンテンツをFlexGridオブジェクトにする
最後の行は配布ライセンスキーを登録するコードだ（後述）。

　次にWindows PhoneプロジェクトにあるMainPage.xaml.csファイルにXuniの初期化を行うコードを記述する（Androidプロジェクトでは不要。iOSプロジェクトについては割愛）。

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

  global::Xamarin.Forms.Forms.Init();
  Xuni.Forms.FlexGrid.Platform.WinPhone.FlexGridRenderer.Init();
  LoadApplication(new XamarinXuniTestPCL.App());
}

Xuniの初期化を行う

　最後に配布ライセンスについて触れておこう。Xuniのドキュメントでは、これはPCLプロジェクトにあるAppクラスのOnStartメソッドに記述することが推奨されている。

protected override void OnStart()
{
  Xuni.Forms.Core.LicenseManager.Key = License.Key;
}

OnStartメソッドでの配布ライセンスの登録

　Windows Phoneアプリを実行した場合にはこれでよいのだが、Androidアプリではライセンスキーを見つけられなかった。そのため、上で見たように、本稿ではAppクラスのコンストラクタで登録をするようにしている。ここではPCLプロジェクトに先ほど保存しておいたLicenseクラスのKeyプロパティの値を登録している。