Logo9 Patch Editor

NinePatch 画像とは

2025年1月7日

目次

NinePatch 画像は、Android システムが歪みや引き伸ばしなしに、コンテンツに応じて画像を自動的にリサイズできる特別な PNG 画像です。これにより、開発者はさまざまな画面サイズに対応するために複数のリソースセットを用意することなく、ボタン、プログレスバー、背景画像などのスケーラブルな UI 要素を作成できます。

NinePatch 画像の作成

Draw 9-patch は、Android Studio 内で NinePatch 画像を作成および編集するためのツールです。開発者は、境界線に沿って黒いピクセル線を描画し、さまざまなサイズで画像がどのように見えるかをプレビューできます。Android Studio に付属のツール以外にも、9 Patch Editor など、NinePatch 画像を作成するための多くのオンラインリソースやアプリケーションが利用可能です。

NinePatch 画像の使用

Android アプリでの NinePatch 画像の使用は簡単です。プロジェクトの res/drawable フォルダに追加し、XML レイアウトファイルで android:background を使用して参照します。例：

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

注意してください。テキストに合わせてボタンをきちんと表示するには、layout_width と layout_height を wrap_content にする必要があります。

以下は、XML と NinePatch 画像によってレンダリングされた 2 つのボタンを示しています。上記の図のように、ボタンの幅と高さがテキストに合わせて変化する一方で、背景画像は画面に合わせて引き伸ばされていることがわかります。

小さいサイズと 通常のサイズのボタンの画像

NinePatch のシナリオ

  1. ボタンの背景: これは、ドローアブルで最も一般的な使用例です。テキストの長さはボタンによって異なる可能性があるため、NinePatch は背景画像が完全に覆われ、境界線の外に出たり、ボタンのテキスト位置から変形したりしないようにします。たとえば、角が丸いボタンの背景がある場合、NinePatch を使用し、ボタンのテキストの長さがどうであれ、丸い角は変更されません。

  2. プログレスバーの背景: プログレスバーでは、固定単位の距離に沿って背景画像を引き伸ばします。単位距離は異なり、システムごとにロードによって変化します。NinePatch は、引き伸ばし中に背景画像のスタイルが歪まないようにします。

  3. リストアイテムの背景: リストビューでは、これらのリストアイテムの背景は、ビューに入力されるコンテンツの長さによって実際に異なる必要があります。NinePatch は、背景画像が歪むことなく非常に美しく引き伸ばされるようにします。

  4. ダイアログケージの背景: このような場合、ダイアログのサイズはコンテンツによって変化します。NinePatch は、背景画像が同じスタイルで一貫して引き伸ばされるようにします。

  5. スケーラブルな区切り線: NinePatch を使用すると、ユーザーは水平または垂直に伸縮可能な区切り線を設計でき、複数の画面サイズとレイアウトの適応性に対応できます。

  6. ユーザー定義の形状の背景: NinePatch は、角の丸み、影付きなど、さまざまなユーザー定義の形状の背景を作成し、引き伸ばし中にこれらの効果が変化しないように、さまざまな特殊効果を持たせることができます。

NinePatch の利点

  • スケーラビリティ: これは NinePatch の最大の利点です。コンテンツに基づいて自動的にサイズ変更されるため、さまざまな画面サイズやコンテンツの長さに対応するために複数のリソースセットを維持する必要がなくなります。
  • 歪みを回避: 引き伸ばし可能な領域の座標制御により、画像の引き伸ばしが防止されます。シャープネスと美しさのプロパティはほとんどの場合保持されます。
  • 効率の向上: リソースファイルが減り、開発効率が向上します。
  • 柔軟な配置: さまざまなレイアウト要件に合わせて、さまざまな形状とサイズの UI 要素を簡単に作成できます。

NinePatch の仕組み

NinePatch 画像の特長は、ピクセルの非常に狭い境界線です。その境界線は、画像のコンテンツのスケーラビリティと領域を定義します。エッジに黒いピクセル線を描画することで、どの部分が周囲で水平方向に引き伸ばされるか、どの部分が垂直方向に引き伸ばされるかを指定します。

Image of stretchable area and padding box

特に、1 ピクセルの境界線は 4 つの部分に分割されます。

1. 左側の境界線 (垂直の黒いピクセル線):

  • 機能: 画像の垂直方向の引き伸ばしを制御します。左側の境界線にある垂直の黒いピクセル線は、画像のどの領域を垂直方向に引き伸ばすことができるかを定義します。

  • 例:

    • 黒いピクセル線がない: 画像の高さは固定されているため、垂直方向の引き伸ばしはできません。画像自体よりも高いコンテナに入れようとすると、そのまま残るか、空白領域ができるか、切り取られる可能性があります。

    • 1 つの黒いピクセル線: 画像を垂直方向に引き伸ばすことができますが、黒いピクセル線で指定された領域に限定されます。たとえば、黒いピクセル線が左側の境界線の中央に配置されている場合、上半分の領域と下半分の領域は変更されず、中央部分のみが垂直方向に引き伸ばされるようになります。

    • 複数の黒いピクセル線: 複数の垂直方向の引き伸ばし領域で定義できます。たとえば、左側の境界線に 2 つの黒いピクセル線がある場合、画像は中央の引き伸ばし可能な部分で 3 つの部分に分割され、上部と下部の部分は変更されません。

2. 上側の境界線: (水平方向の黒いピクセル線):

  • 機能: 画像の水平方向の引き伸ばしを制御します。上側の境界線にある水平の黒いピクセル線は、画像の水平方向の引き伸ばし可能な部分を定義します。

  • 例:

    • 黒いピクセル線がない: 画像の幅は固定されており、水平方向に引き伸ばされません。左側の境界線に黒いピクセル線がない場合と同様に、画像はそのままになり、空白領域ができるか、切り取られる可能性があります。

    • 1 つの黒いピクセル線: 画像は水平方向に引き伸ばすことができますが、黒いピクセル線で指定された領域でのみ可能です。たとえば、黒いピクセル線が上側の境界線の中央にある場合、画像の左半分は変更されず、右半分も変更されず、中央のみが引き伸ばされるようになります。

    • 複数の黒いピクセル線: さまざまな横方向の引き伸ばし可能な領域を定義します。さまざまな水平方向の黒いピクセル線がある左側の境界線の場合と同様に、画像は複数の部分に分割され、このようにマークされたどのセクションも水平方向に引き伸ばすことができます。

3. 右側の境界線 (垂直の黒いピクセル線):

  • 機能: コンテンツ領域の右側のパディングを定義します。右側のマージンにある垂直の黒いピクセル線は、画像コンテンツ領域の右側の境界を示します。引き伸ばし中に、コンテンツ領域の右側はこの境界線に留まります。

  • 例:

    • 黒いピクセル線がない: コンテンツ領域は画像の右側のマージンまでずっと拡張され、コンテンツが引き伸ばされたときに柔軟に対応せず、画像コンテンツが右端まで拡張されます。

    • 1 つの黒いピクセル線: コンテンツ領域の右端は、黒いピクセル線の位置によって決定されます。引き伸ばし中に、コンテンツ領域の右側は黒いピクセル線で固定され、右側のスペースは引き伸ばされます。

4. 下側の境界線 (水平方向の黒いピクセル線):

  • 機能: コンテンツが限定される領域の下側のマージンを定義します。下側の境界線にある水平の黒いピクセル線は、画像のコンテンツ領域の下側の境界が終了する場所を定義します。コンテンツ領域の下端は、引き伸ばし中にその境界に留まります。

  • 例:

    • 黒いピクセル線がない: コンテンツ領域は画像の底端まで拡張されます。引き伸ばし中に、画像コンテンツ全体が底端まで引き伸ばされます。

    • 1 つの黒いピクセル線: コンテンツ領域の下側の境界は、黒いピクセル線の位置から派生します。引き伸ばし中に、コンテンツ領域の下端は黒いピクセル線のレベルに残り、下の空白が引き伸ばされます。

これらの 4 つの境界線で賢く黒いピクセル線を使用することで、プログラマーは、Nine Patch 画像をさまざまなサイズで表示する方法を正確に制御し、コンテンツ領域を変形させたり失ったりすることなく表示できます。これらのピクセル線は、画像の実際の境界ではなく、引き伸ばし可能な領域のコンテンツ領域からの定義境界であることに留意してください。黒いピクセル線がない部分は、固定サイズのコンポーネントです。

注意点

  • NinePatch 画像は、.9.png で終わるファイル名で保存する必要があります。
  • スケーリング時に画像が消えないようにするには、引き伸ばし可能な領域の最小寸法が 2x2 ピクセル必要です。
  • 引き伸ばし可能な領域のエッジに余分な安全スペースを追加すると、スケーリング中に発生する色の変化を解消できます。
  • 画像の引き伸ばし可能な領域とコンテンツ領域を非常に徹底的に確認して、画像がさまざまな寸法で正しく表示されるようにしてください。
  • NinePatch 画像を過度に使用しないでください。特に、アニメーションインターフェースや頻繁に変更されるインターフェースでは、パフォーマンスが低下する可能性があります。

まとめ

NinePatch 画像は、UI デザインの効率を高め、Android アプリケーションでユーザーエクスペリエンスを向上させるための最も強力なツールです。ただし、これは開発者が利点と制限事項のバランスを取る必要がないという意味ではありません。画像のタイプの選択は要件によって異なります。たとえば、NinePatch 画像がさまざまな長さのテキストを受け入れる必要があるスケーラブルな背景や UI 要素に最適な選択肢であっても、通常の PNG 画像は静的な背景画像には最適です。そのシンプルさが魅力です。NinePatch を使用する場合は、さまざまなデバイスと画面サイズで優れたパフォーマンスを発揮するように、設計とテストに最大限の注意を払う必要があります。

iOSおよびmacOSでNinePatch画像を使用する方法