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

SIN

2015.10.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

前回に続いてXamarin.Formsのコントロールについての紹介です。これらのコントロールを概観することで、Xamarin.Formsで「果たして何が表現できるのか？」という疑問に、大体答えが見えて来るのでは無いでしょうか。

それでは、いつものとおり、可能な限りシンプルなサンプルコードで紹介を始めます。

2 コントロール

(1) Picker

あらかじめ作成されたリスト（文字列）から、データを選択するためのコントロールです。 iOSでは「UITextField、UIPickerView」、Androidでは「EditText、NumberPicker」Windows Phoneでは「ListPicker」、WinRTでは「ComboBox」にそれぞれマッピングされています。

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」にマッピングされます。サンプルでは、検索文字が確定時点でアラートダイアログを表示するようにしました。

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」にマッピングされます。サンプルでは、値が変化した際に発生するイベントでラベルに値を表示しています。

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」にマッピングされています。

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」にマッピングされます。

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では、画面いっぱいまで表示されません。

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は高機能で、まだまだ利用方法が複雑なので、改めて紹介できればと考えています。

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以外で違和感があるかも知れません。

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;
    }
}