NinePatch とは

アンドロイドはオープンな OS です。

そのため各社がこぞって様々な端末を作って販売しています。

ユーザーとしては様々なバリエーションから端末を選べるので、気に入ったものを手に入れられるのでとても嬉しいわけです。

頭がいたいのは開発者側です。そう、私たちの側です。

美しい画像を駆使してファンシーなアプリケーションを作ろうと思っても、一般的には特定の画面サイズを想定することができず、デザインと表示の問題がのしかかるわけです。

アンドロイドは複数の画面をサポートするために、主に代替リソースを活用します。すなわち画面サイズ、深度に応じた適切なリソースをロードすることによって、複数画面をサポートします。 微調整については画像を自動的に伸縮させるなどします。

画像伸縮の問題 - NinePatch の出番!

さっそく例を示します。まずは NinePatch を利用しない場合にどうなるかみてみましょう。

元の画像としてこんな画像があった場合を考えます。

NinePatch

レイアウトファイルは次のようになってます。

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">
  <ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/no_nine_patch"/>
    ...

ImageButton のバックグラウンド画像として、グラデーションや枠線付きの矩形をセットしています。 幅は wrap_content としています。

この ImageButton の layout_width を wrap_content から match_parent に変えると、 親要素 (この場合は LinearLayout) の横幅を埋めるように、次のように画像が伸びます。

NinePatch

・・・いかがでしょうか?

確かに伸びて (ストレッチして) います。全体が均等に伸張しているので、横に伸びた分枠線も太くなってしまっています。 いかにも単純に引っ張って伸ばした感じですね。

まぁ、好みの問題でこれで良しとすることもできますが、NinePatch を利用すると次のようにストレッチできます。

NinePatch

枠線が太くなることなく、全体的に伸張しています。

NinePatch を用いるとこのように、美しく画像を伸張させることが可能になります。

次の記事では NinePatch の基本的な作成方法と利用方法について説明します。

ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。

© 2024 Android 開発入門