グリッドと単位

密度非依存ピクセル(dp)とスケーラブル ピクセル(sp)は、レイアウトを作成し、Android デバイスを構成する幅広い画面密度、サイズクラス、フォーム ファクタ、アスペクト比に均一に対応するフォントを表示するために不可欠です。

テイクアウェイ

  • ベースライン グリッドを使用する場合は、4 と 8 の測定値を使用します。
  • 仕様は、ピクセルではなく dp と sp で表記します。
  • すべてのバケットのビットマップ/ラスター グラフィックをエクスポートします。
  • さまざまなサイズクラス、解像度、アスペクト比を念頭に置いて、レスポンシブなデザインを心掛けてください。
  • 密度非依存ピクセル(dp): 密度非依存ピクセルは、どの画面でも均一な寸法にスケーリングする柔軟な単位です。画面の物理密度に基づきます。これらの単位は、160 dpi(1 インチあたりのドット数)画面を基準にしています。160 dpi では、1 dp は 1 px にほぼ等しくなります。
  • 拡張可能ピクセル(sp): 拡張可能ピクセルは dp と同じ役割を果たしますが、フォント用です。sp のデフォルト値は、dp のデフォルト値と同じです。Android システムは、デバイスと Android デバイスの設定アプリで設定されたユーザーの設定に基づいて、使用する実際のフォントサイズを計算します。
図 1: dp と sp の表記

これらの測定単位の主な違いは、スケーラブル ピクセルではユーザーのフォント設定が維持される点です。ユーザー補助機能用のテキスト設定が大きいユーザーには、好みのテキストサイズと一致するフォントサイズが表示されます。Compose でフォントサイズを変更する方法をご覧ください。

Android では、これらの単位を使用して、さまざまなデバイスや解像度でのスケーリングと翻訳をサポートしています。

密度バケット

密度の低い画面よりも、密度の高い画面のほうが 1 インチあたりのピクセル数が多くなります。そのため、同じピクセル寸法の UI 要素は、低密度画面では大きく表示され、高密度画面では小さく表示されます。そのため、ピクセルで測定値を宣言しないでください。

Android は、画面密度の範囲を「バケット」にグループ化し、それを使用してデバイスに最適なアセットのセットを配信します。最もよく使用される密度バケットは mdpihdpixhdpixxhdpixxxhdpi です(nodpianydpi は、デバイスの解像度ごとにスケーリングしないバケットを指します。通常はベクター型ドローアブルに使用されます)。これらは、それぞれアプリのリソース ファイルに対応しています。

図 2: さまざまな密度のパーティー マスクメロン

したがって、dp は次の式で計算できます。

dp =(幅(ピクセル単位)× 160)÷ 画面密度

グリッド

ベースライン グリッド

基盤となるグリッドを使用して作成することで、UI 全体で一貫した間隔と配置を作成できます。Android UI は、レイアウト、コンポーネント、間隔に 8 dp のグリッドを利用します。

動画 1: 8 dp 単位でハイライト表示された 8 dp のグリッド

コンポーネント内の小さい要素(アイコン、タイプ、一部の要素など)は、4 dp グリッドに合わせます。

図 3: 8 dp のグリッドは、ほとんどの UI 要素に適しており、4 dp のグリッドはアイコンなどの小さい要素に適しています。

列のグリッド

列はグリッド構造を構築し、本文領域内のコンテンツを分割することでレイアウトを垂直方向に定義します。コンテンツは、列を含む画面の領域に配置されます。基盤となるグリッドに合わせてコンテンツを配置しますが、柔軟なサイズ設定を維持する必要があります。列グリッドを設定してコンテンツを適用する方法の基本については、レイアウトの基本をご覧ください。

図 4: 4 列のグリッド

さまざまなフォーム ファクタに柔軟に対応できるレイアウトの作成について詳しくは、マテリアル 3 の正規レイアウトのページをご覧ください。

サイズクラス

ウィンドウ サイズクラスは、アプリのレスポンシブ レイアウトとアダプティブ レイアウトの設計、開発、テストに役立つ独自のビューポート ブレークポイントのセットです。Android は、ウィンドウ サイズクラスを 3 つ(コンパクト、中程度、拡大)に分割します。詳細については、ウィンドウ サイズクラスをご覧ください。

アスペクト比

アスペクト比とは、要素の幅と高さの比率です。アスペクト比は「幅:高さ」の形式で記述します。

レイアウトの一貫性を維持するには、画像、サーフェス、画面サイズなどの要素に一貫したアスペクト比を使用します。

UI 全体で使用する場合は、次のアスペクト比を使用することをおすすめします。

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3