グリッドと単位

密度非依存ピクセル(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 つの(Compact、Medium、Expanded)に分割しています。詳しくは、各種の画面サイズのサポートをご覧ください。

アスペクト比

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

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

UI 全体で推奨されるアスペクト比は次のとおりです。

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