page.title=さまざまな画面密度のサポート
parent.title=複数画面のデザイン
parent.link=index.html

trainingnavtop=true
previous.title=さまざまな画面サイズのサポート
previous.link=screensizes.html
next.title=順応性のある UI フローの実装
next.link=adaptui.html

@jd:body


<!-- This is the training bar -->
<div id="tb-wrapper"> 
<div id="tb"> 

<h2>このレッスンでの学習内容</h2>
<ol>
  <li><a href="#TaskUseDP">密度非依存ピクセルを使用する</a></li>
  <li><a href="#TaskProvideAltBmp">代替ビットマップを生成する</a></li>
</ol>

<h2>関連ドキュメント</h2>

<ul>
  <li><a href="{@docRoot}guide/practices/screens_support.html">複数画面のサポート</a></li>
  <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">アイコン設計のガイドライン</a></li>
</ul>

<h2>試してみる</h2>
 
<div class="download-box"> 
<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">サンプル アプリのダウンロード</a>
<p class="filename">NewsReader.zip</p> 
</div> 
 
 
</div> 
</div> 

<p>このレッスンでは、異なるリソースを生成し、かつ解像度非依存単位を使用して、異なる画面密度をサポートする方法について学習します。</p>

<h2 id="TaskUseDP">密度非依存ピクセルを使用する</h2>

<p>レイアウトを設計する際に回避すべきよくある落とし穴の 1 つとして、絶対ピクセルを使用して距離やサイズを定義することがあります。ピクセルを使用してレイアウトのサイズを定義すると、画面によってピクセル密度が異なるため、問題が起こります。したがって、同じピクセル数では、デバイスが異なる場合に物理サイズが異なる可能性があります。そのため、サイズを指定する場合は、常に <code>dp</code> 単位や <code>sp</code> 単位を使用します。<code>dp</code> とは、1 ピクセルの物理サイズが 160 dpi に相当する密度非依存ピクセルです。<code>sp</code> も基本単位は同じですが、ユーザーの優先テキスト サイズによってサイズが決まるので（スケール非依存ピクセル）、テキスト サイズを定義する際にはこの単位を使用する必要があります（ただし、レイアウト サイズには絶対に使用しないこと）。</p>

<p>たとえば、2 つのビューの間にスペースを挿入する場合は、<code>px</code> ではなくて <code>dp</code> を使用します:</p>

<pre>
&lt;Button android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="&#64;string/clickme"
    android:layout_marginTop="20dp" /&gt;
</pre>

<p>テキスト サイズを指定する場合は、常に <code>sp</code> を使用します:</p>

<pre>
&lt;TextView android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:textSize="20sp" /&gt;
</pre>


<h2 id="TaskProvideAltBmp">代替ビットマップを生成する</h2>

<p>Android は、画面密度がさまざまなデバイスで動作するため、それぞれの汎用密度バケット（低密度、中密度、高密度、超高密度）に合わせてビットマップ リソースを生成する必要があります。そうすることで、すべての画面密度で画質とパフォーマンスが向上します。</p>

<p>これらの画像を生成するには、ベクター形式の未加工リソースから、次のサイズ スケールを使用して密度別に画像を生成する必要があります:</p>

<p><ul>
  <li><code>xhdpi</code>: 2.0
  <li><code>hdpi</code>: 1.5
  <li><code>mdpi</code>: 1.0（基準）
  <li><code>ldpi</code>: 0.75
</ul></p>

<p>つまり、200&times;200 画像（<code>xhdpi</code> デバイス用）を生成する場合、同じリソースを 150&times;150 画像（<code>hdpi</code> デバイス用）、100&times;100 画像（<code>mdpi</code> デバイス用）、75&times;75（<code>ldpi</code> デバイス用）でも生成する必要があります。</p>

<p>さらに、生成した画像を <code>res/</code> 下の適切なサブディレクトリに配置することで、アプリが動作するデバイスの画面密度に基づいて、自動的に適切な画像が表示されます:</p>

<pre class="classic no-pretty-print">
MyProject/
  res/
    drawable-xhdpi/
        awesomeimage.png
    drawable-hdpi/
        awesomeimage.png
    drawable-mdpi/
        awesomeimage.png
    drawable-ldpi/
        awesomeimage.png
</pre>

<p>また、<code>&#64;drawable/awesomeimage</code> を参照する場合は常に画面の dpi に基づいて、適切なビットマップが選択されます。</p>

<p>アプリ用のアイコン アセットを作成するためのヒントとガイドラインについては、<a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">アイコン設計のガイドライン</a>をご覧ください。</p>