本エントリーは Xamarin Advent Calendar 2016 (その１) 22日目のエントリーです。
Xamarin のイベントに参加するようになり、Prism for Xamarin.Forms のことを知りずっと気になっていました。まだ、一度も触ったことがなかったので、今回の機会が良いと思いこのテーマにしてみました。
ただ、Prism for Xamarin.Forms だけを使ってみるのもつまらないと思い、位置情報系のエンジニアでもあるので地図のテーマと絡めて利用してみました。
個人的には普段、Rails などの MVC モデルの開発に慣れているぶん、MVVM モデルとの区別がまだ分からないところもありましたが、Prism を利用することで、MVVMアーキテクチャを実現するパターンの理解にもつながり、それが簡単にできることに驚きつつ、感動しました。でも、まだ自分の言葉では説明できないのでもっと勉強して理解する必要があると感じています。
Prism for Xamarin.Forms について
Prism for Xamarin.Forms をはじめるにあたり、Xamarin のイベントなども良く発表されている @Nuits さんの記事 Prism for Xamarin.Forms入門 が非常に分かりやすく今回はこちらを参考にして実装しました。Prism for Xamarin.Forms についてもかなり詳しく載っています。
Prism for Xamarin.Forms のアドイン追加とプロジェクトの作成
今回は Mac OS で Xamarin Studio を利用して開発しました。メニューの [Xamarin Studio Commiunity] → [アドイン] でアドイン マネージャーが表示されますので、Prism Template Pack をインストールします。インストールすることで、新しいプロジェクトを作成するときに Prism Unity App が選択できるようになります。
####1. Prism Template Pack のインストール
####2. プロジェクトの作成
####3. ビルドエラー
なぜかここでビルドエラーになってしまいます。
AppDelegate.cs で以下を追加することで回避できました。
using Microsoft.Practices.Unity;
using Prism.Unity;
無事にエラーも解消できて初期画面を起動することができました。
Prism for Xamarin.Forms を利用した地図開発
今回地図を活用してみたいと思い、先日 Esri からリリースされた ArcGIS Runtime SDK for .NET の Esri.ArcGISRuntime.Xamarin.Forms を利用しました。10月の Xamarin 入門者の集い で [LT] (http://www.slideshare.net/TakahiroKamiya3/xamarin-20161026) でも発表しましたが、ようやく11月に正式リリースされました。
パッケージを追加します。
今回は、Prism for Xamarin.Forms でメインページから遷移先のページとして、3ページ用意して、各3ページに対して実装していきました。各ページの追加やページからメインページに戻る方法などは、すべて Prism for Xamarin.Forms入門 を参考にすることで、簡単に実現できました。あとは、各ページで自分が実現したいこと（今回は地図表示など）に集中して開発することができました。
こちらが、メインページで、今回は独断と偏見で
1. ３D地図
2. 背景地図の切り替え
3. 地図のスクリーンショット
を各ページで実装してみました。これ以外にも色々なことができるんですが、今後他の機能についてはブログなどでも紹介していければとも思っています。
####1. ３D地図
Esri.ArcGISRuntime.Xamarin.Forms では、２Dと３Dの地図表現が可能で、３Dには、Scene サービスを利用します。
Scene クラスで表示したい背景地図を作成し、Scene クラスで作成した背景地図を表示するには、SceneView に Scene を割り当てることで 3D の地図を簡単に表現することができます。
以下のソースを見ていただければ分かるかと思いますが、XAML で SceneView を定義して、Next1Page.xaml.cs 側で Scene クラスを利用して背景地図を作成しています。作成した Scene を SceneView に割り当てます。ですので、たとえば、背景地図の上に別の地図などを表示したい場合は、Scene クラス に表示したい別の地図レイヤを追加していくことで、背景地図上に色々な地図レイヤを表現することが可能です。
// create a new scene with a topographic basemap
var myScene = new Scene(Basemap.CreateTopographic());
// add the new scene to the scene view
MySceneView.Scene = myScene;
<esriUI:SceneView x:Name="MySceneView" />
3D の地図表現については、英語ですがこちらにもさらに詳しくありますので、ご興味のある方はぜひ覗いてみてください！
3D の地図表現について（Display a scene）
####2. 背景地図の切り替え
背景地図は、XAML に背景地図を選択できるボタンを設置しています。そのボタンがクリックされると、背景地図一覧が表示されます。一覧から選択された背景地図に対して、MyMapView.Map.Basemap に Basemap クラスで作成した背景地図を設定してあげます。ちなみに、Basemap クラスでは、他にも多くの背景地図を扱うことができます。
private async void OnChangeBasemapButtonClicked(object sender, EventArgs e)
{
// Show sheet and get title from the selection
var selectedBasemap =
await DisplayActionSheet("Select basemap", "Cancel", null, titles);
// If selected cancel do nothing
if (selectedBasemap == "Cancel") return;
switch (selectedBasemap)
{
case "Topo":
// Set the basemap to Topographic
MyMapView.Map.Basemap = Basemap.CreateTopographic();
break;
case "Streets":
// Set the basemap to Streets
MyMapView.Map.Basemap = Basemap.CreateStreets();
break;
case "Imagery":
// Set the basemap to Imagery
MyMapView.Map.Basemap = Basemap.CreateImagery();
break;
case "Ocean":
// Set the basemap to Imagery
MyMapView.Map.Basemap = Basemap.CreateOceans();
break;
default:
break;
}
}
private void initBasemap()
{
// Create new Map with basemap
Map myMap = new Map(Basemap.CreateTopographic());
// Assign the map to the MapView
MyMapView.Map = myMap;
}
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<esriUI:MapView x:Name="MyMapView" />
<Button x:Name="changeBasemapButton" Text="背景地図の変更" Clicked="OnChangeBasemapButtonClicked" Grid.Row="1"/>
</Grid>
####3. スクリーンショット
最後はスクリーンショットです。この機能はベータ版ではなかったので自分でもこんな機能があるのかとも思ってしまいました。まあ、何に利用できるかは置いておき単純に試してみました。
どうやら、GeoView の ExportImageAsync メソッドを使用しているようです。試したところ、表示している範囲をちゃんとスクリーンショットしてくれます。詳細は....
private async void OnTakeScreenshotClicked(object sender, EventArgs e)
{
// Export the image from mapview and assign it to the imageview
var exportedImage = await MyMapView.ExportImageAsync();
// Create layout for sublayers page
// Create root layout
var layout = new StackLayout();
var closeButton = new Button
{
Text = "Close"
};
closeButton.Clicked += CloseButton_Clicked;
// Create image bitmap by getting stream from the exported image
var buffer = await exportedImage.GetEncodedBufferAsync();
byte[] data = new byte[buffer.Length];
buffer.Read(data, 0, data.Length);
var bitmap = ImageSource.FromStream(() => new System.IO.MemoryStream(data));
var image = new Image()
{
Source = bitmap,
Margin = new Thickness(10)
};
// Add elements into the layout
layout.Children.Add(closeButton);
layout.Children.Add(image);
// Create internal page for the navigation page
var screenshotPage = new ContentPage()
{
Content = layout,
Title = "Screenshot"
};
// Navigate to the sublayers page
await Navigation.PushAsync(screenshotPage);
}
まとめ
今回、Prism for Xamarin.Forms を利用して、簡単にページ含めて、画面遷移が実装できたのは感動しました。ほんとに簡単で時間もまったくかかっていません。実際にページ遷移にパラメータの引き渡しなどが入ってくると少し難しくなるのでしょうか。Prism for Xamarin.Forms についてもっと理解したいと思いますので、Prism for Xamarin.Formsの画面遷移 10のベストプラクティスについても勉強していきたいと思います。
今回作成した各サンプルは、こちらの Github にも公開していますので、よろしくお願いします！
２３日になってしまいましたが、なんとか書き終えることができました！
####Xamarin はいいぞ！