Xamarin.Forms コントロール① （Formsを使用した最後の１歩）

SIN

2015.10.31

この記事は公開されてから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

今回も、可能な限りシンプルなサンプルコードで、これらを紹介しようと思うのですが、ちょっと量が多くなってしまうので２回に分けて紹介させて頂きます。

※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
View001 View002 View003

(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
View004 View005 View006

(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
View007 View008 View009

(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
View010 View011 View012

(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
View041 View042 View043

(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
View013 View014 View015

(7) Entry

１行のテキスト入力のためのコントロールです。 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
View016 View017 View018

(8) Image

Imageコントロールは、画像を表示するコントロールです。 iOSで「UIImageView」、Androidで「ImageView」、そして、Windows Phone と WinRTでは「Image」にマッピングされています。

Sourceプロパティに表示する画像を指定しますが、ネット上の画像をURLで指定する事もできます。 サンプルでは、ImageSource.FromResourceを使用していますが、これを使用すると共通プロジェクトに置いた画像ファイルを指定することができるので、各プラットフォームごとにリソースを用意する必要は無くなります。

View022

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
View019 View020 View021

(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
View023 View024 View025

3 まとめ

今回は、コントロールの前段として９個のコントロールを紹介しました。 それぞれのプラットフォームにマッピングする都合から、「共通項的なコントロールしか存在できない」とも言えそうです。

次回は、残りの９個について紹介させて頂きます。

githubサンプルコード(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の覚書）

customer-story-analytics