この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
今回は、Xamarin.Formsのコントロールについてです。
Xamarin.Formsの画面作成では、前々回紹介した「ページ」で、全体をどういう形式にするのか決め、その上で、前回の「レイアウト」を使用しながら、「コントロール」を散りばめていくのです。
最近、XamarinのDeveloppersページで、このXamarin.Formsのコントロールが、各プラットフォームで何のコントロールにマッピングされているかのドキュメントが公開されましたので、そちらも併せて紹介させて頂きます。
本記事では、コントロールと呼んでいますが、Xamarin.Formsのフレームワークの中では、「Views」と言う名前でカテゴライズされています。
2 コントロール
Xamarin.Formsには、以下の19種類のコントロールがあります。
- ActivityIndicator
- BoxView
- Button
- DatePicker
- TimePicker
- Editor
- Entry
- Image
- Label
- Picker
- ProgressBar
- SearchBar
- Slider
- Stepper
- Switch
- WebView
- ListView
- TableView
- OpenGLView
今回も、可能な限りシンプルなサンプルコードで、これらを紹介しようと思うのですが、ちょっと量が多くなってしまうので2回に分けて紹介させて頂きます。
※OpenGLViewについては記載しておりません。
(1) ActivityIndicator
ActivityIndicatorは、ビジー状態を表現するコントロールです。 iOSでは、「UIActivityIndicator」、Androidでは、「ProgressBar」、Windows Phoneでは、「ProgressBar」、そしてWinRTで「ProgressBar」にマッピングされます。 色の指定で、Color.Defaultと言うのを使用しているのですが、これは、各プラットフォームごと違う色になります。そもそもデフォルトの背景色が違うので、色を指定するときは注意が必要です。
Windows Phoneは、回転しないのですね・・・
App.cs
class MyPage : ContentPage {
public MyPage() {
// ActivityIndicator を生成する
var activityIndicator = new ActivityIndicator {
Color = Device.OnPlatform(Color.Black, Color.Default, Color.Default),
IsRunning = true, // 回転中
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する
};
// ActivityIndicatorのみをコンテンツとして配置する
Content = activityIndicator;
}
}
iOS | Android | WindowsPhone |
(2) BoxView
BoxViewは、矩形を描画する(だけ)のコントロールです。 指定できるのは、塗りつぶしの色だけで、角丸や枠線の指定もできません。そういう意味では、世界最弱のコントロールかも知れません。 なお、このBoxViewを小さくドット的に利用して、何かを描画しようなんて考えてはいけません。リソースの食いすぎで動かなくなってしまうでしょう。
そうなると、何に使うんだって事になるのですが、後に紹介予定のレンダラー(Renderer)という手法を利用すると、このコントロールが驚くほど大活躍することに気がつきます。
ちなみに、マッピングは、iOSで「UIView」、Androidでは、「 ViewGroup」そして、Windows Phone とWinRTで「Rectangle」になっています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// BoxView を生成する
var boxView = new BoxView {
Color = Color.Blue,// 塗りつぶし色
WidthRequest = 150,// 横のサイズ
HeightRequest = 150,// 縦のサイズ
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// BoxViewのみをコンテンツとして配置する
Content = boxView;
}
}
iOS | Android | WindowsPhone |
(3) Button
そう、そのまんま、ボタンです。 iOSで「UIButton」、Android、Windows Phone、WinRTでは「Button」にマッピングされています。 サンプルでは、ボタンを押した時のイベント処理も書きましたが、このようにラムダ式で書けてしまうのはC#ならではかも知れません。
App.cs
class MyPage : ContentPage {
public MyPage() {
// Button を生成する
var button = new Button {
Text = "Click Me!",
FontSize = 30,
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// クリック時のイベント
button.Clicked += (s, e) => {
// ボタンの文字を変更する
button.Text = "Developers.IO";
};
// Buttonのみをコンテンツとして配置する
Content = button;
}
}
iOS | Android | WindowsPhone |
(4) DatePicker
日付選択のコントロールです。これはターゲット(というかOS)ごと独特のインターフェースとなるので、ポップアップする表示領域がそれぞれ違うので注意が必要です。
iOSでは、「UIDatePicker」その他は、「DatePicker」にマッピングされています。
サンプルの中で、日付の表示フォーマットで”D”を与えていますが、C#でのフォーマット例は下記を参照してください。
String Format for DateTime [C#]
App.cs
class MyPage : ContentPage {
public MyPage() {
// DatePicker を生成する
var datePicker = new DatePicker {
Format = "D", // 日付表示フォーマット
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// DatePickerのみをコンテンツとして配置する
Content = datePicker;
}
}
iOS | Android | WindowsPhone |
(5) TimePicker
時刻選択のためのコントロールです。 iOSでは、「UIDatePicker」その他は、「TimePicker」にマッピングされています。 iOSでは、TimePickerが無いため、UIDateTimeをUIDatePickerModeTimeで使用し、Androidでは、timePickerModeが"clock”の方になっているようです。
iOSの「UIDatePickerModeDateAndTime」のように、日付と時間を同時に設定するモードはありません。
使い方は、DatePickerと同じです。
App.cs
class MyPage : ContentPage {
public MyPage() {
// TimePicker を生成する
var timePicker = new TimePicker {
Format = "T", // 時刻表示フォーマット
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// TimePickerのみをコンテンツとして配置する
Content = timePicker;
}
}
iOS | Android | WindowsPhone |
(6) Editor
複数行にわたるテキスト入力用のコントロールです。 iOSでは、「UITextView」、Androidでは、「EditText」、Windows Phone 及び WinRTで「TextBox」にマッピングされます。
コントロールを画面いっぱいに表示する場合、iOS(iOS7以降)では、上部のステータス表示領域に重なるため、下記のサンプルでは、iOSのみパディング20をとっています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
// Editor を生成する
var editor = new Editor {
VerticalOptions = LayoutOptions.FillAndExpand // 画面全体に表示する
};
// Editorのみをコンテンツとして配置する
Content = editor;
}
}
iOS | Android | WindowsPhone |
(7) Entry
1行のテキスト入力のためのコントロールです。 iOSでは「UITextField」、Androidでは「EditText」、WindowsPhoneでは「PhoneTextBox/PasswordBox」、WinRTでは「UserControl」にマッピングされています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
// StackLayoutで2つの Entryコントロールを並べる
Content = new StackLayout {
Children = {
new Entry{
Keyboard = Keyboard.Email,
Placeholder = "メールアドレス",
},
new Entry{
Keyboard = Keyboard.Text,
Placeholder = "パスワード",
IsPassword = true, // 入力された文字を隠す
},
}
};
}
}
iOS | Android | WindowsPhone |
(8) Image
Imageコントロールは、画像を表示するコントロールです。 iOSで「UIImageView」、Androidで「ImageView」、そして、Windows Phone と WinRTでは「Image」にマッピングされています。
Sourceプロパティに表示する画像を指定しますが、ネット上の画像をURLで指定する事もできます。 サンプルでは、ImageSource.FromResourceを使用していますが、これを使用すると共通プロジェクトに置いた画像ファイルを指定することができるので、各プラットフォームごとにリソースを用意する必要は無くなります。
App.cs
class MyPage : ContentPage {
public MyPage() {
// Imageを生成する
var image = new Image {
Source = ImageSource.FromResource("App1.Images.classmethod.png"),
};
// Imageのみをコンテンツとして配置する
Content = image;
}
}
iOS | Android | WindowsPhone |
(9) Label
ラベルです。 iOSで「UILabel」、Androidで「TextView」、Windows Phone及びWinRTで「TextBlock」にマッピングされます。 サンプルでは、カラー指定がありませんが、各プラットフォームごとにデフォルトのテキスト色となっています。
App.cs
class MyPage : ContentPage {
public MyPage() {
// Labelを生成する
var label = new Label {
Text = "Developers.IO",
FontSize =30,
HorizontalOptions = LayoutOptions.Center,//中央に配置する(横方向)
VerticalOptions = LayoutOptions.CenterAndExpand // 中央に配置する(縦方向)
};
// Labelのみをコンテンツとして配置する
Content = label;
}
}
iOS | Android | WindowsPhone |
3 まとめ
今回は、コントロールの前段として9個のコントロールを紹介しました。 それぞれのプラットフォームにマッピングする都合から、「共通項的なコントロールしか存在できない」とも言えそうです。
次回は、残りの9個について紹介させて頂きます。
サンプルコード(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の覚書)