選択ツール

Picker は、特定のデータを選択して設定する際に役立ちます。

選択ツール

選択ツールは、ユーザーが有限数のアイテムから選択できるようにするために使用します。

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

構造

構造

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

幅と高さ

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

たとえば、数値は「00」の幅を指定してから、幅を設定します。テキスト フィールドの場合、たとえば月フィールドの場合は、「MMM」(ラテンアルファベットの最も広い文字)の幅になります。したがって、幅と高さ(使用されているその書体の行の高さ)は、使用されるフォントの影響を受けます。

選択ツールのアイテムは、ブレークポイント全体でサイズが異なります。

Usage

日時選択ツールの次の例をご覧ください。

事前に構築された日時選択ツールの実装については、GitHub の Horologist Library をご確認ください。

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

アダプティブ レイアウト

時間選択ツール 24 時間

TimePicker(12 時間前)

日付選択ツール

レスポンシブ動作

文字サイズの拡大

225 以上のブレークポイントを超えると、Picker 要素のフォントサイズが変更されます。遅延スクロール列内の上下のコピーは、中央のコピーと同様に、A を調整します。次に例を示します。

2 列レイアウト

225 dp のブレークポイント未満

フォント: Display 2

225 dp 超のブレークポイント

フォント: ディスプレイ 1

3 列レイアウト

225 dp のブレークポイント未満

フォント: Display 3

225 dp のブレークポイントより上

フォント: Display 2

勾配サイズの増加

Picker 列のグラデーションの高さは、使用可能なスペースを基準として定義されます。上下のグラデーションは、使用可能な高さの 3 分の 1(33%)に設定されます。つまり、使用可能な画面サイズごとに、グラデーションがそれに比例してスケーリングされます。列レイアウトから独立している。

225 dp のブレークポイント未満

サイズ: 列の高さの 33%

225 dp のブレークポイントより上

サイズ: 列の高さの 33%

列間隔の拡大

列間隔は 225 以上のブレークポイントを基準として、2 dp または 4 dp から 6 dp まで拡大する。選択したレイアウトに応じて、2 列または 3 列のレイアウトを選択できます

2 列レイアウト

225 dp のブレークポイント未満

列間隔 4 dp

225 dp のブレークポイントより上

列間隔 6 dp

3 列レイアウト

225 dp のブレークポイント未満

列間隔 2 dp

225 dp のブレークポイントより上

列間隔 6 dp