Android Auto の適応型レスポンシブ（AR）フレームワークは、アプリのレイアウトを車の画面サイズに合わせて調整します。
メディア ブラウジングや再生アクションなどのアプリの UI や機能も、Android Auto で自動調整されます。Android Auto は、ユーザーのスマートフォンから投影されたアプリに対応した車です。
概要
- レイアウトは特定のブレークポイントで画面サイズに合わせて調整される
- 8 dp 単位でパディングを適用する
- 小さなコンポーネントの間に 12 dp のパディングを控えめに配置する
レイアウトの決定方法
Android Auto の AR フレームワークは、アダプティブ デザインとレスポンシブ デザインの両方を使用します。
- レスポンシブ デザイン（正確な画面サイズによりレイアウトを決定する）が左右の余白に使用される
- アダプティブ デザイン（画面の高さと幅の範囲でレイアウトを決定）がレイアウトに使用
レイアウトは、ブレークポイントと呼ばれる測定値を使用して決定されます。ブレークポイントは、画面レイアウトの幅と高さを戦略的に定義し、特定のレイアウトを表示するタイミングを決定します。レイアウトは、ブレークポイントの範囲ごとに、画面サイズと向きに合わせて調整されます。
アダプティブ
アダプティブ デザインは、ブレークポイントを使用して画面のレイアウトを決定します。定義した画面サイズの範囲（幅 1,280 dp 未満など）で、特定のレイアウトが表示されます。
レスポンシブ
レスポンシブ デザインでは、正確な画面サイズに比例してレイアウトが調整されます。コンポーネントにはフレックス領域があり、車ごとに適切なサイズに拡張または縮小できます。アダプティブ ブレークポイント
Android Auto は、アダプティブ ブレークポイントを利用して画面レイアウトを決定します。このレイアウトは、画面全体ではなく、アプリ ウィンドウのサイズから計算されます。
レスポンシブ マージン
Android Auto では、車の画面全体のサイズに基づいてレスポンシブ マージンが使用されます。左右のマージンは画面幅の 12% に合わせて調整されます。通常は、スクロールバーとナビゲーション コントロールが含まれています。残りの画面スペース（アプリ キャンバス）には、アプリのコンテンツが入っています。
スペースを広げるには、小さい画面サイズで右側の余白を削除します。このスペースは、アプリがセカンダリ エリアとして追加情報を表示するために使用できます。
レイアウト グリッド
Android Auto のレイアウトは、UI 要素を 8 dp のグリッドに揃え、小型のコンポーネントは 4 dp のグリッドに揃えます。
パディング
パディングは、UI 要素間のスペースを指します。Android Auto のパディング スケールは、96 dp のパディング サイズまで、8 dp の倍数で適用されます。パディングが大きい場合は、8 dp の倍数で追加することもできます。
次の表に、Auto UI に表示される一般的なパディング値を示します。サイズの増分は昇順で表示され、文字「P」で始まるラベルでマークされています。
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4 dp | 8 dp | 12dp | 16 dp | 24 dp | 32 dp | 48 dp | 64dp | 96dp |
小さなコンポーネントのパディング
アライメントを改善し、十分なスペースを確保するため、小型のコンポーネントでは 12 dp のパディングを控えめに使用することをおすすめします。
キーライン
キーラインとは、要素とコンポーネントをレイアウト内の水平方向（x 軸に沿って）に配置する位置を示し、UI を整理するための測定です。ラベルは「KL."」で始まるラベルでマークされています。
キーラインはレイアウト内のどこにでも配置できます。これらは、2 つの垂直エッジ（要素、コンポーネント、または画面自体の間隔）の距離を示すために使用します。コンポーネントと要素は、左端または右端が最も近いキーラインに揃えられます。
キーラインを使用した測定
キーラインは画面の幅に応じて変化するため、さまざまな画面サイズに合わせて表示位置を一貫して調整できます。
画面サイズの大きい画面では、次のキーラインを使用することをおすすめします。「KL(n)"」というラベルの付いたキーで表してください。これらは、キーラインのサイズが大きいものから順に表示されます。
| KL（n） | 画面を絞り込む （0 ～ 600 dp） |
標準画面 （600 ～ 930 dp） |
ワイド スクリーン （930 ～ 1,280 dp） |
エクストラ ワイド スクリーン （1,280 dp 以上） |
|---|---|---|---|---|
| KL0 | 16 dp | 24 dp | 24 dp | 32 dp |
| KL1 | 24 dp | 32 dp | 32 dp | 48 dp |
| KL2 | 96dp | 112dp | 112dp | なし |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | なし |