第 15 章の概要: 対話型インターフェイス

  • [アーティクル]

サンプルのダウンロードサンプルのダウンロード

注意

この本は 2016 年春に発行されて以降、改訂されていません。 多くの情報はまだ価値がありますが、一部の資料は古くなっており、トピックの中にはまったく正しくないものまたは不完全なものもあります。

この章では、ユーザーとの対話を可能にする 8 つの View 派生型について説明します。

ビューの概要

Xamarin.Forms には、View から派生するが Layout からは派生しない、20 個のインスタンス化可能なクラスが含まれています。 それらのうち 6 つについては、これまでの章で説明しました。

この章の 8 つのビューを使用すると、ユーザーは基本的な .NET データ型を効果的に操作できます。

データの種類 Views
Double Slider, Stepper
Boolean Switch
String Entry, Editor, SearchBar
DateTime DatePicker, TimePicker

これらのビューは、基になるデータ型を視覚的に対話形式で表現したものと考えることができます。 この概念については、次の章「第 16 章: データ バインディング」で詳しく説明します。

残りの 6 つのビューについては、以下の章で説明します。

スライダーとステッパー

Slider と Stepper の両方で、ユーザーは範囲から数値を選択できます。 Slider は連続した範囲ですが、Stepper には不連続値が含まれます。

スライダーの基本

Slider は水平方向のバーで、左側の最小値から右側の最大値までの範囲の値を表します。 次の 3 つのパブリック プロパティが定義されます。

  • double 型の Value (既定値 0)
  • double 型の Minimum (既定値 0)
  • double 型の Maximum (既定値 1)

これらのプロパティに使用されるバインド可能なプロパティによって、一貫性が確保されます。

  • 3 つのプロパティすべてについて、バインド可能なプロパティに指定された coerceValue メソッドによって、Value が Minimum と Maximum の間にあることが確実になります。
  • MinimumProperty の validateValue メソッドでは、Minimum が Maximum 以上の値に設定されている場合は false が返されます。MaximumProperty についても同様です。 validateValue メソッドから false が返されると、ArgumentException が発生します。

Slider では、 プロパティが (プログラムによって、またはユーザーが Slider を操作したときに) 変更された場合、ValueValueChangedEventArgs 引数を使用した ValueChanged イベントが発生します。

SliderDemo サンプルに Slider の簡単な使用方法が示されています。

よくある落とし穴

コードと XAML の両方で、Minimum プロパティと Maximum プロパティは、指定した順序で設定されます。 これらのプロパティは、Maximum が常に Minimum よりも大きくなるように初期化してください。 それ以外の場合は、例外が発生します。

Slider プロパティを初期化すると、Value プロパティが変更され、ValueChanged イベントが発生する可能性があります。 ページの初期化中に、まだ作成されていないビューに Slider イベント ハンドラーがアクセスしないようにする必要があります。

ValueChanged イベントは、Value プロパティが変更されない限り、Slider の初期化中に発生することはありません。 ValueChanged ハンドラーは、コードから直接呼び出すことができます。

スライダーの色の選択

RgbSliders プログラムには、RGB 値を指定して色を対話形式で選択できる、3 つの Slider 要素が含まれています。

R G B スライダー RGB スライダーのトリプル スクリーンショット

TextFade サンプルでは、2 つの Slider 要素を使用して、2 つの Label 要素を AbsoluteLayout 全体で移動し、一方をもう一方にフェードインしています。

ステッパーの相違点

Stepper で定義されるプロパティとイベントは Slider と同じですが、Maximum プロパティは 100 に初期化され、Stepper では 4 つ目のプロパティが定義されます。

  • double 型の Increment (1 に初期化されます)

視覚的には、 と Stepper というラベルが 付いた 2 つのボタンで構成されています +。 を押すと、 がValueIncrement少なMinimumくなります。 + を押すと、Value は Increment ずつ Maximum の最大値まで増加します。

これは、StepperDemo サンプルで示されています。

スイッチとチェックボックス

Switch では、ユーザーがブール値を指定できます。

スイッチの基本

視覚的には、Switch はオンとオフの切り替えができるトグルで構成されます。 このクラスでは、1 つのプロパティが定義されます。

Switch では 1 つのイベントが定義されます。

  • ToggledEventArgs オブジェクトを伴う Toggled。IsToggled プロパティが変更されたときに発生します。

SwitchDemo プログラムに Switch が示されています。

従来のチェックボックス

開発者によっては、Switch よりも従来の CheckBox が好まれる場合があります。 Xamarin.FormsBook.Toolkit ライブラリには、ContentView から派生する CheckBox クラスが含まれています。 CheckBox は CheckBox.xaml ファイルと CheckBox.xaml.cs ファイルによって実装されます。 CheckBox では 3 つのプロパティ (Text、FontSize、IsChecked) と CheckedChanged イベントが定義されます。

CheckBoxDemo サンプルに、この CheckBox が示されています。

テキスト入力

Xamarin.Forms では、ユーザーがテキストの入力と編集ができるようにする 3 つのビューが定義されています。

  • 1 行のテキスト用の Entry
  • 複数行のテキスト用の Editor
  • 検索を目的とした 1 行のテキスト用の SearchBar

Entry と Editor は、View の派生型である InputView から派生します。 SearchBar は View から直接派生します。

キーボードとフォーカス

物理的なキーボードがないスマートフォンやタブレットでは、Entry、Editor、SearchBar の各要素すべてによって、仮想キーボードがポップアップ表示されます。 このキーボードが画面に表示されるかどうかは、入力フォーカスに関連しています。 ビューは、入力フォーカスを取得するために、IsVisible プロパティと IsEnabled プロパティの両方が true に設定されている必要があります。

2 つのメソッド、1 つの読み取り専用プロパティ、2 つのイベントが入力フォーカスに関係します。 これらはすべて、VisualElement によって定義されます。

  • Focus メソッドでは、入力フォーカスを要素に設定することが試みられ、成功した場合は true が返されます。
  • Unfocus メソッドでは、要素から入力フォーカスが削除されます。
  • IsFocused 読み取り専用プロパティでは、要素に入力フォーカスがあるかどうかが示されます。
  • Focused イベントによって、要素が入力フォーカスを取得したことが示されます。
  • Unfocused イベントによって、要素が入力フォーカスを失ったことが示されます。

キーボードの選択

Entry と Editor の派生元である InputView では、1 つのプロパティだけが定義されます。

これにより、表示されるキーボードの種類が示されます。 一部のキーボードは、URI または数値用に最適化されています。

クラスをKeyboard使用すると、 型KeyboardFlagsの引数を持つ静的Keyboard.Createメソッドを使用してキーボードを定義できます。列挙には次のビット フラグがあります。

1 段落以上のテキストが必要な場合に複数行の Editor を使用するときは、キーボードを選択する方法として、Keyboard.Create を呼び出すことをお勧めします。 単一行の Entry の場合、次に示す Keyboard の静的な読み取り専用プロパティが役に立ちます。

では KeyboardTypeConverter 、 EntryKeyboards プログラムで示されているように、XAML でこれらのプロパティを指定できます。

入力のプロパティとイベント

単一行の Entry では次のプロパティが定義されます。

Entry では、2 つのイベントも定義されます。

  • TextChangedEventArgs オブジェクトを伴う TextChanged (Text プロパティが変更されたときに発生します)
  • Completed (ユーザーの操作が終了し、キーボードが閉じられたときに発生します)。 ユーザーが完了を示す方法はプラットフォームに固有です。

QuadraticEquations サンプルに、これら 2 つのイベントが示されています。

エディターの相違点

複数行の Editor では、Entry と同じ Text プロパティと Font プロパティが定義されますが、その他のプロパティは定義されません。 Editor では、Entry と同じ 2 つのプロパティも定義されます。

JustNotes は、Editor の内容を保存して復元する自由形式のノート作成プログラムです。

SearchBar は InputView から派生しないため、Keyboard プロパティがありません。 ただし、Entry で定義される Text、Font、Placeholder のすべてのプロパティがあります。 さらに、SearchBar では 3 つの追加プロパティが定義されます。

プラットフォーム固有のキャンセル ボタンでテキストが消去されます。 SearchBar には、プラットフォーム固有の検索ボタンもあります。 これらのボタンのいずれかを押すと、SearchBar によって定義される 2 つのイベントのいずれかが発生します。

SearchBarDemo サンプルに、SearchBar が示されています。

日付と時刻の選択

DatePicker ビューと TimePicker ビューでは、ユーザーが日付または時刻を指定できるプラットフォーム固有のコントロールが実装されます。

DatePicker

DatePicker では 4 つのプロパティが定義されます。

  • DateTime 型の MinimumDate (1900 年 1 月 1 日に初期化されます)
  • DateTime 型の MaximumDate (2100 年 12 月 31 日に初期化されます)
  • DateTime 型の Date (DateTime.Today に初期化されます)
  • string 型の Format (短い日付のパターンである "d" に初期化された .NET 書式指定文字列。米国では "7/20/1969" のような日付表示になります)

プロパティをプロパティ要素として表現し、カルチャに依存しない短い日付形式 ("7/20/1969") を使用することによって、XAML で DateTime プロパティを設定できます。

DaysBetweenDates サンプルでは、ユーザーが選択した 2 つの日付の間の日数を計算しています。

TimePicker (または TimeSpanPicker?)

TimePicker では 2 つのプロパティを定義し、イベントは定義しません。

  • Time は、DateTime 型ではなく TimeSpan 型であり、午前 0 時からの経過時間を示します。
  • string 型の Format は、短い時刻のパターンである "t" に初期化された .NET 書式指定文字列であり、米国では "1:45 PM" のような時間表示になります。

SetTimer プログラムに、TimePicker を使用してタイマーの時間を指定する方法が示されています。 このプログラムは、フォアグラウンドに保持している場合にのみ機能します。

また、SetTimer では、Page の DisplayAlert メソッドを使用して警告ボックスを表示する方法も示されています。