このページは Cloud Translation API によって翻訳されました。

選択ツール

Picker を使用すると、ユーザーは特定のデータを選択して設定できます。

選択ツール

ユーザーが限られた数のアイテムから選択できるようにするには、選択ツールを使用する必要があります。

デフォルトでは、アイテムは両方向に無限にループします。リスト内の順序が重要な場合や、ユーザーがクイックスワイプで最初と最後の要素に到達できるようにするには、この動作を無効にすることを検討してください。

解剖学

構造

A. 非アクティブな列
B. コロンブレーカー
C. 選択ツールの列
D. 上位のコンテンツ
E. 中間コンテンツ
F. 下部コンテンツ

幅と高さ

選択ツールグループは、使用可能な高さと幅に収まるように配置されます。選択ツールの列には、4 つのレイアウトオプションがあります。各レイアウトは中央に配置され、使用可能な高さいっぱいに表示されます。列の幅は、フォントで必要な桁数に対応するために必要な幅で定義されます。日付選択ツールは例外で、横方向に画面全体を占有し、端からはみ出します。

たとえば、数値は「00」の幅を計算し、幅を設定します。テキストフィールドの場合（月フィールドなど）は、「MMM」（ラテン文字で最も幅の広い文字）の幅として計算されます。そのため、幅と高さ（使用される書体の行の高さ）は、使用されるフォントの影響を受けます。

選択ツールのアイテムのサイズは、ブレークポイントによって異なります。

使用方法

日付と時刻の選択ツールに関する次の例をご覧ください。

事前構築済みの日付と時刻の選択ツールの実装については、GitHub の Horologist ライブラリをご覧ください。

ユーザーが複数の選択ツールで複数の値を選択できる同様のエクスペリエンスを作成する場合は、組み込みの PickerGroup コンポーネントを使用します。このオブジェクトは、フォーカスコーディネーターオブジェクトを使用して、正しい Picker 要素にフォーカスを割り当てます。