この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
前回に続いてXamarin.Formsのコントロールについての紹介です。 これらのコントロールを概観することで、Xamarin.Formsで「果たして何が表現できるのか?」という疑問に、大体答えが見えて来るのでは無いでしょうか。
それでは、いつものとおり、可能な限りシンプルなサンプルコードで紹介を始めます。
2 コントロール
(1) Picker
あらかじめ作成されたリスト(文字列)から、データを選択するためのコントロールです。 iOSでは「UITextField、UIPickerView」、Androidでは「EditText、NumberPicker」Windows Phoneでは「ListPicker」、WinRTでは「ComboBox」にそれぞれマッピングされています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
// Pickerを生成する
var picker = new Picker {
Title = "選択してください",
VerticalOptions = LayoutOptions.Start // 上詰めで配置する(縦方向)
};
//100行「item-0~item-99」のリスト(文字列)を作成
var ar = Enumerable.Range(0, 100).Select(n => string.Format("item-{0}", n)).ToList();
foreach (var a in ar) {
picker.Items.Add(a);
}
// Pickerのみをコンテンツとして配置する
Content = picker;
}
}
iOS | Android | WindowsPhone |
(2) ProgressBar
作業中の状態がどれだけ進捗しているのかを視覚的に表現するコントロールです。 iOSで「UIProgressView」、Androidで「 ProgressBar」、Windows Phone WinRTで「ProgressBar」にそれぞれマッピングされます。
サンプルには、Xamarin.Formsでのタイマーイベントの扱い方も併せて記載しています。
class MyPage : ContentPage {
public MyPage() {
// ProgressBarを生成する
var progressBar = new ProgressBar {
WidthRequest=300, // 幅を300とする
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// ProgressBarのみをコンテンツとして配置する
Content = progressBar;
// 0.1 秒ごとにタイマーイベントを発火させる
Device.StartTimer(TimeSpan.FromSeconds(0.1), () => {
// プログレスバーの値を0.1増加させる
progressBar.Progress += 0.01;
// プログレスバーの値が1になるまで、タイマーイベントを繰り返す
return progressBar.Progress != 1;
});
}
}
iOS | Android | WindowsPhone |
(3) SearchBar
検索文字を入力するコントロールです。 iOSで「UISearchBar」、Androidで「SearchView」、Windows Phoneで「PhoneTextBox」、WinRTで「SearchBox」にマッピングされます。 サンプルでは、検索文字が確定時点でアラートダイアログを表示するようにしました。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
// SearchBarを生成する
var searchBar = new SearchBar {
Placeholder = "検索文字を入力してください",
VerticalOptions = LayoutOptions.Start // 上詰めで配置する(縦方向)
};
// 検索文字が入力されたときのイベント処理
searchBar.SearchButtonPressed += (a,r) => {
// アラートダイログで入力された文字を表示する
DisplayAlert("Search", searchBar.Text, "OK");
};
// SearchBarのみをコンテンツとして配置する
Content = searchBar;
}
}
iOS | Android | WindowsPhone |
(4) Slider
スライダーコントロールは、つまみをドラッグして値を設定するコントロールです。 iOSで「UISlider」、Androidで「SeekBar」、そして、Windows Phone 及びWinRTで「Slider」にマッピングされます。 サンプルでは、値が変化した際に発生するイベントでラベルに値を表示しています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
//Labelを生成する
var label = new Label {
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
};
// Sliderを生成する
var slider = new Slider {
WidthRequest = 300, // サイズ
Minimum = 0, // 最小値
Maximum = 100, // 最大値
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
};
// スライダーの値が変化したときのイベント処理
slider.ValueChanged += (s, e) => {
// ラベルに変化した値を表示する
label.Text = String.Format("{0:F1}", e.NewValue);
};
// LabelとSliderをStacklayoutで縦に並べて配置する
Content = new StackLayout {
Children = { slider, label }
};
}
}
iOS | Android | WindowsPhone |
(5) Stepper
ステッパーコントロールは、「+」若しくは「ー」をタップすることで値を設定するコントロールです。 使い方は、先のスライダーコントロールと全く同じです。 iOSで「UIStepper」、Androidで「LinearLayout」、Windows Phoneで「StackPanelとButtons」、WinRTで「UserControl」にマッピングされています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
//Labelを生成する
var label = new Label {
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
};
// Stepperを生成する
var stepper = new Stepper {
Minimum = 0,
Maximum = 10,
Increment = 0.1,
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
};
// スライダーの値が変化したときのイベント処理
stepper.ValueChanged += (s, e) => {
// ラベルに変化した値を表示する
label.Text = String.Format("{0:F1}", e.NewValue);
};
// LabelとStepperをStacklayoutで縦に並べて配置する
Content = new StackLayout {
Children = { stepper, label }
};
}
}
iOS | Android | WindowsPhone |
(6) Switch
スイッチは、ONかOFFかを設定するコントロールです。 iOSでは「UISwitch」、Androidでは「Switch」、Windows Phoneでは「Border 、ToggleSwitchButton」、WinRTで「ToggleSwitch」にマッピングされます。
App.cs
class MyPage : ContentPage {
public MyPage() {
// Switcrを生成する
var sw = new Switch {
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// Switchのみをコンテンツとして配置する
Content = sw;
}
}
iOS | Android | WindowsPhone |
(7) WebView
Webブラウザを表示します。 iOSで「UIWebView」、Androidで「 WebView」、Windows Phoneで「WebBrowser」、WinRTで「 WebView」にマッピングされます。
使用方法は、特に難しく無いですが、iOS9では、ATS(App Transport Security)が有効ですので、対処が必要です。 info.plistで対処する場合は、iOSプロジェクトの中のファイルを編集してください。
サンプルでは、LayoutOptions.FillAndExpandを使用して、縦方向を最大限使用して配置するように指定していますが、これが無いと、Androidでは、画面いっぱいまで表示されません。
App.cs
class MyPage : ContentPage {
public MyPage() {
// WebViewを生成する
var webView = new WebView {
Source = new UrlWebViewSource {
Url = "https://dev.classmethod.jp/",
},
VerticalOptions = LayoutOptions.FillAndExpand // 画面全体に配置する(縦方向)
};
// WebViewのみをコンテンツとして配置する
Content = webView;
}
}
iOS | Android | WindowsPhone |
(8) ListView
一般に言うリストビューです。 iOSで「UITableView」、Androidで「ListView」、Windows Phoneで「LongListSelector」、WinRTで「ListView」にマッピングされます。
今回は、文字列だけの超簡単なサンプルにしましたが、ListViewは高機能で、まだまだ利用方法が複雑なので、改めて紹介できればと考えています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
// ListViewを生成する
var listView = new ListView {
//100行「item-0~item-99」のリストを作成
ItemsSource = Enumerable.Range(0, 100).Select(n => string.Format("item-{0}", n)).ToList()
};
// VistViewのみをコンテンツとして配置する
Content = listView;
}
}
iOS | Android | WindowsPhone |
(9) TableView
iOSで「UITableView」、Androidで「ListView」、WindowsPhoneで「Grid、TextBlock、ListBox」、WinRTで「ListView」にマッリングされています。
iOSアプリの設定画面などで利用されているテーブルビューですが、他のプラットフォームでは、同様のコントロールが無いため、組み合わせで無理やり表現しているような感じです。 このため、このコントロールを使用すると、iOS以外で違和感があるかも知れません。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
// TableViewを生成する
var tableView = new TableView {
Intent = TableIntent.Form,
Root = new TableRoot("設定"){
new TableSection("オプション"){
new TextCell{
Text = "Text Cell",
Detail = "詳細",
},
new SwitchCell{
Text = "Switch Cell"
},
new EntryCell{
Label = "Entry Cell",
Placeholder = "文字を入力してください"
}
}
}
};
// TableViewのみをコンテンツとして配置する
Content = tableView;
}
}
iOS | Android | WindowsPhone |
3 まとめ
前回と今回で2回に分けて、Xamarin.Formsのコントロールについて紹介しました。 ListViewやWebViewなどの高機能なコントロールに関しては、簡単なサンプルだけではピンとこないものもあります。この辺は、また改めて紹介できればと考えています。
サンプルコード(https://github.com/furuya02/Xamarin.Forms.ViewSamples)
本記事は、2015年10月30日現在で最新の Xamarin.Forms 1.5.1.6471 を使用して作成されています。
4 参考リンク
Xamarin Developers Guide 「Xamarin.Forms Views」
Renderer Base Classes and Native Controls
https://github.com/xamarin/xamarin-forms-samples/
この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015
Xamarin記事一覧(SAPPOROWORKSの覚書)