コントロール バー

コントロールバーには、特定のビューに関連付けられたコントロールが表示されます。展開されていない状態では最大5つのコントロールが表示され、展開されている状態では最大5つのコントロールが追加されます。

メディア アプリでは、コントロール バーは再生ビューで再生/一時停止、前へ、次へ、その他のコントロール (カスタム サードパーティ アクションのコントロールを含む) に使用されます。

吹き出しアイコン
最小化されたコントロールバーコンポーネント
最小化されたコントロール バーには、複数のビューで使用できる最小限のコントロール セットが提供されます。

解剖学

コントロールバーには、展開されていない状態と展開された状態の2つの形式があります。展開されていないバージョンには最大5つのコントロールを含めることができます。メディアアプリでは、そのうちの1つが再生/一時停止です。

コントロールバーを展開すると、2行目に最大5つのコントロールを追加できます。ユーザーはオーバーフローボタンを選択して、コントロールバーを展開または折りたたむことができます。

1. 展開前に表示されるコントロールバー部分
2. アクションバーの拡大部分
3. コントロールの1つ
4. オーバーフローボタン(コントロールバーを展開および折りたたむ)

仕様

吹き出しアイコン
レイアウトラベル
E、M、KL、P、Flexの定義

コントロールバー

拡張コントロールバー

中央コントロールを固定したコントロールバーに 1 ~ 4 個のコントロールを配置

アンカー センター コントロールは、音楽の再生/一時停止ボタンなど、コントロール バーの中央に配置することを推奨するコントロールです。

アンカーコントロールのないコントロールバーに 1 ~ 4 個のコントロールを配置する

コントロールバーに6~9個のコントロールを配置

レイアウトのスケーリング

これらのリファレンス レイアウトは、さまざまな幅と高さの画面に合わせてコントロール バーを調整する方法を示しています (幅と高さのカテゴリはレイアウトセクションで定義されています)。すべてのピクセル値は、ダウンサンプリングまたはアップサンプリングが行われる前のレンダリングされたピクセルであることに注意してください。

マージン間隔が1028dpを超える超ワイドスクリーン

マージン間の幅がコントロールバーの最大幅(1028 dp)よりも大きい場合は、コントロールバーを水平方向に中央に配置します。コントロールバーはマージンまで完全には表示されません。

マージン間の幅が1028dp未満の超ワイドスクリーン

ワイドスクリーン

標準幅のスクリーン

標準幅の画面では、コントロールバーを水平中央に配置します。コントロールバーは画面の余白まで広がります。この例のように、690dpの標準幅の画面では、コントロールバーの端と画面の端の間にP5のサイドパディングを使用します。

ショートスクリーン

1000 dp 未満の画面ではコントロール バーが拡張されます

短い画面でコントロールバーを拡大

1000 dp を超える画面でコントロール バーが拡張されました

スタイル

吹き出しアイコン
色のガイドライン
パレット、高度、不透明度の値など

要素カラー(デイモード)カラー(夜間モード)
プライマリアイコン白 @ 88%
フルスクリーンスクリム黒 @ 78%黒 @ 84%
グラデーションスクリム未定未定

サイズ

要素サイズ(dp)
コントロールバー96(ショートスクリーン)または128(標準の高さ以上)
プライマリアイコン44

再生ビューのコントロール バー。
再生ビューのコントロール バーが拡張されました。
メディア キューのコントロール バー。
メディア キュー内のコントロール バーを拡張しました。
メディア キューのコントロール バー。
メディア キュー内のコントロール バーを拡張しました。
ユーザーがオーバーフロー ボタンをタップすると、コントロール バーが拡大および縮小します。