Xamarin逆引きTips
XamarinのUIやコードの実行結果を簡単に確認できる「Sketches」を使うには？
Xamarin.Formsのレイアウトなどを、ビルドすることなくREPL環境で手軽に確認できるSketchesの使い方を紹介する。
Xamarin Sketches（ザマリン・スケッチ。以下、Sketches）は、XcodeのPlaygroundと同じ機能を持つREPL環境（Read-eval-print loop： 対話型評価環境）だ。Xamarin.iOS、Xamarin.Android、Xamarin.MacのUI（ユーザーインターフェース）やコードの実行結果を、ビルドをしなくてもすぐその場で確認できる。対象プログラミング言語はC#だけであるが、Xamarin.Formsにも対応しており、2015年11月現在、デザイナーやビューアーがサポートされていないXamarin.FormsのUI構築の練習、確認に大いに役に立つだろう。
必要なシステム
残念ながら現時点で、SketchesはVisual Studioをサポートしていないため、Mac（OS X）で作業する必要がある。Mac上には、Xamarin Studio 5.7以上、Xcode 6.1以上と、最新のiOS API、最新のAndroid SDKが必要だ。全てStable版の最新バージョンにアップデートしておくとよいだろう。
Sketchesファイルの作成
Xamarin Studioを起動し、（メニューバーの）［ファイル］メニューから［新規］－［ファイル］をクリックする。［新しいファイル］ダイアログで、［C#］－［Sketches］をクリックし、［Xamarin.Forms Sketches (iOS)］テンプレートを選択し、任意の名前を付けて（ここでは［XF_iOS］と名前を付けた）、［新規］ボタンをクリックする（図1）。
iOS Simulatorが起動し、図2のようになるはずだ。
Xamarin Studioの一番左から、［コードエディター］エリア、［評価結果］エリア、［出力＆解析］エリアとなっている。
【コラム】Sketches専用のXamarin Studioレイアウトを作成しよう
図2の例では、一番右に［Sketches Properties］パッドを表示するSketches用のレイアウトを自作して使用している。通常のビュー（＝あらかじめ用意されている各種レイアウト）では、左側にソリューションパッドが表示されているが、Sketchesでは使用しないため、専用のレイアウトを作成することをお勧めする。以下の手順に従ってほしい。
- Xamarin Studioの［ビュー］メニューから［新しいレイアウト］をクリックする
- ［新しいレイアウト］ダイアログで「Sketches」と名前を付けて［レイアウトの作成］ボタンをクリックして新しいレイアウトを保存する
- ［ソリューション］パッドの右上の［×］アイコンをクリックしてパッドを閉じる
- 再度［ビュー］メニューから［パッド］－［Sketches Properties］をクリックする（図3）
以上で完了だ。Sketchesを使う際には、Xamarin Studioの［ビュー］メニューから［Sketches］ビューを選択すればよい。開発時には、［ソリューション］ビューなどに切り替えるとよい。
基本コードのSketches
まずは練習として、コンソールのコードを［コードエディター］エリア内に記述してみよう。
|
……省略……
var s = "Hello World!";
Console.WriteLine (s);
s.Substring (6);
|
次のように、すぐに［評価結果］エリア（＝図4の中央）に変数sの中身やSubstringメソッドの結果が表示され、Console.WriteLineメソッドによる出力は［出力＆解析］エリア（＝図4の右側）のコンソール出力専用の領域に表示されているのが分かる。
Substringメソッドの［評価結果］エリアの［"World!"］にオンマウスすると、目のアイコンの［Quick Look］、（＋）アイコンの［Add to timeline］が表示される。forループなどを回す場合は、（＋）アイコンをクリックすることで［出力＆解析］エリアにグラフが表示される。
- Visual Studio 2015のUpdate 1で搭載予定のC# Interactive Windowがリリースされるまでは、コンソールアプリの代わりに使用してもよいだろう。
Xamarin.FormsのSketches
Sketchesの環境に慣れたところで、Xamarin.FormsのUIとコードをSketchesで実行していこう。
シンプルな構成
まずはラベルとボタンを配置したシンプルなUIを作成して実行してみる。先ほどのコードは削除して、次のXamarin.Formsのコードを記述しよう。
|
using Xamarin.Forms;
var i = 1;
var label = new Label {
Text = "Hello Sketches!",
XAlign = TextAlignment.Center
};
var button = new Button {
Text = "Push me",
Command = new Command (() => { // Command にラムダ式で処理を記述
label.Text = string.Format ("{0} clicked!", i);
i++;
})
};
var layout = new StackLayout { // 積み上げ式のレイアウトの子に上記で宣言したlabel,buttonを配置
VerticalOptions = LayoutOptions.Center,
Children = {
label,
button,
}
}
RootPage.Children.Add(new ContentPage { // POINT 1
Padding = new Thickness (0, 20, 0, 0),
Content = layout
});
|
即座にiOS Simulatorの画面にラベルとボタンが表示され、ボタンをクリックすると数値がインクリメントするのが分かる（図5）。
POINT 1: Xamarin.Forms／Android／iOS／Mac向けのSketchesでUIエレメントを表示する方法
コードの最後にある、
|
RootPage.Children.Add(new ContentPage {
Padding = new Thickness (0, 20, 0, 0),
Content = layout
});
|
は、Xamarin.Forms SketchesでUIエレメントを表示するためのコードだ。Xamarin.FormsなのでRootPage.Children.Add (Page);を使用しているが、Android SketchesではRootActivity、iOS SketchesではRootView.AddSubview (View);、MacではRootWindow.ContentView.AddSubview (someViewYouCreated);を使用する必要があることに注意してほしい。
ListViewのSketches
次にXamarin.Formsで最もよく使用するであろうListViewのSketchesを作成してみよう。まずはデータを用意する。これには次のコードを記述する。
|
var data = new List<Tuple<UriImageSource, string, string>> {
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1s07h2W") }, "Miguel", "CTO and Co-founder"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1rYGvGU") }, "Nat", "CEO and Co-founder"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1EhFsao") }, "Stephanie", "SVP of Sales and Customer Success"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1oIYpso") }, "Joanne", "VP of Marketing"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/10CbVZE") }, "Joseph", "Director of Developer Relations and Co-founder"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1vCRbKh ") }, "Rob", "VP of Business Development"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1rPp1vm") }, "Bryan", "Vice President of Education Services"),
Tuple.Create (new UriImageSource { Uri = new Uri ("http://bit.ly/1sXguu1") }, "Jason", "Team Lead - Xamarin.Forms"),
};
|
POINT 2： Xamarin Forms用データを作成するときの制限
Tupleでデータを用意するのは、Xamarin.FormsのSketchesには次の制限があるからだ。
- クラスの作成、匿名型はサポートされていない。
Tupleを使用してほしい。メソッドを作成する代わりにFunc<>デリゲートを使用してほしい - SketchesはC# REPLと同じく行ごとに評価される。
if／then／elseステートメントが独自の行にある場合はエラーになる可能性があることに注意してほしい - AndroidのSketchesは、現時点ではXamarin Android Playerでのみサポートされているので注意してほしい
次にSearchBarとデータテンプレートを定義する。具体的には次のコードを記述する。
|
var searchBar = new SearchBar { Placeholder = "Search ..." };
var template = new DataTemplate (() => {
var image = new Image {
WidthRequest = 100,
HeightRequest = 100
};
image.SetBinding (Image.SourceProperty, "Item1"); // データバインディング。通常、第1引数にバインドするプロパティを、第2引数にクラスメンバーを指定するが、Sketchesでは“Tuple”のため、［ItemX］を指定する
var nameLabel = new Label ();
nameLabel.SetBinding (Label.TextProperty, "Item2");
nameLabel.TextColor = Color.FromHex ("#3498DB"); // Labelのテキスト色の指定
var titleLabel = new Label ();
titleLabel.SetBinding (Label.TextProperty, "Item3");
titleLabel.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)); // Labelのフォントサイズの指定。ここでは各OS標準で用意されているサイズから最小のMicroを指定した
var textLayout = new StackLayout {
Children = { nameLabel, titleLabel }
};
var cellLayout = new StackLayout { // StackLayoutを入れ子にして配置
Padding = 10,
Orientation = StackOrientation.Horizontal,
Children = { image, textLayout }
};
var cell = new ViewCell {
View = cellLayout,
};
return cell;
});
|
最後にListViewとStackLayoutを追加し、UIを描画する（リスト5）。
|
var listView = new ListView {
ItemTemplate = template,
ItemsSource = data,
RowHeight = 100,
//HasUnevenRows = true // ListViewの高さを可変長にするプロパティ。Sketchesで使用しているXamarin.Formsのバージョンによる問題だと思われるが、正しく動作しない
};
var layout = new StackLayout {
Children = {
searchBar,
listView
}
};
RootPage.Children.Add(new ContentPage {
Content = layout
});
|
以上のコードを全て入力した結果、次のような画面が表示されるはずだ。
まとめ
Xamarin.Formsの学習用として非常に便利なSketchesを紹介した。Xamarin.Formsはコードで画面を構築する必要があるが、Xamarin.Formsのレイアウトはプロジェクトをビルドして実行しないと結果が分からない。これからXamarin.Formsを使ってみようという方は、最初に勝手が分からずにつまづいてしまうかもしれない。
Sketchesを有効活用して、まずはXamarin.Formsの画面構築に慣れていただきたい。
※以下では、本稿の前後を合わせて5回分（第58回～第62回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
58. MvvmCrossで文字列をローカライズ（多言語化）するには？
MvvmCrossでのiOS／Androidアプリ開発において、ViewModelの文字列リソースを多言語化してローカライズする方法を解説する。
59. MvvmCrossでViewModelからViewにイベントを通知するには？（Messengerパターン）
MvvmCrossでのiOS／Androidアプリ開発において、ViewModelからViewにイベントを通知するMessengerパターンの実装方法を紹介する。
60. 【現在、表示中】≫ XamarinのUIやコードの実行結果を簡単に確認できる「Sketches」を使うには？
Xamarin.Formsのレイアウトなどを、ビルドすることなくREPL環境で手軽に確認できるSketchesの使い方を紹介する。
62. Plugins for Xamarinを使いこなすには？（ファイルシステム編）
デバイス固有の機能に簡単にアクセスできるPlugins for Xamarinを複数回にわたって紹介していく。今回は、簡単にファイルの入出力が行える「PCL Storage」プラグインを説明する。
