連載
» 2012年01月27日 10時31分 UPDATE

Android Tips(5):Draw 9-patchでビューの飾りワクを作る

Androidアプリ開発者のためのTips集。TextViewやLinearLayoutなどのビューで、任意の画像を背景として設定・利用することができる。また、Android SDKに含まれている「Draw 9-patch」ツールを使うことで、ビューやレイアウトの飾りワクとして使用可能な画像を作成できる。

[秋本耕平(イーフロー),@IT MONOist]
Android Tips

Tips概要と動作検証環境

用途 便利
カテゴリ レイアウト
レベル 初級
動作確認環境 Android 2.3.1(GingerBread) エミュレータにて動作確認
備考 今回のTipsは上記環境で動作確認・検証を行っています


Tips 5:Draw 9-patchでビューの飾りワクを作る

 TextViewやLinearLayoutなどのほとんどのビューで、任意の画像を背景として設定・利用することができる。

 また、Android SDKに含まれている「Draw 9-patch」ツールを使うことで、ビューやレイアウトの飾りワクとして使用可能な画像を作ることができる。

背景画像適用のサンプル

 背景に使用する画像ファイルは、プロジェクトの「/res/drawable」ディレクトリに格納する。drawableディレクトリには、標準で「drawable-hdpi」「drawable-ldpi」「drawable-mdpi」の3つがある。基本的には、drawable_mdpiに格納すればよい。

 Androidでは「BMP」「JPEG」「PNG」「GIF」の4種類の画像ファイル形式を使用できるが、推奨はPNGなので、基本的にはPNG形式の画像ファイルを使用する。

 drawableディレクトリに配置した画像は「R.drawable.<拡張子を除いたファイル名>」というリソースIDでアクセスできる。

 まずサンプルとして、Textビューの背景に以下の画像(画像1)を設定してみる。

今回、背景用に用意した画像 画像1 今回、背景用に用意した画像

例:画像を背景として設定するサンプル関数(setImageToView)

    // TextView に背景画像を設定するサンプル
    void setImageToView( TextView view ){
        // res/drawable_mdpi ディレクトリに配置した
        // droid_image.png ファイルを背景画像に設定する
        view.setBackgroundResource(R.drawable.droid_image);
    }


 以下は、ドロイド君の画像の中(お腹の部分)に文字列を表示した様子だ(画像2)。

ドロイド君の画像の中に文字が表示される 画像2 ドロイド君の画像の中に文字が表示される

 画像2では、TextViewに表示している文字列が“Hello\nAndroid Tips”というごく短いものであるが、文字列がもっと長い場合はどうなるだろうか。実際に試してみると、以下のようになる。

サンプルソース:

    // TextView に背景画像を設定するサンプル2
    void setImageToView2( TextView view ){
        // 長い文章を表示してみる
        view.setText("~外郎売~\n"
                        + "拙者親方と申すは、\n"
                        + "お立ち会い中にご存知のお方もござりましょうが、\n"
                        + "お江戸を発って二十里上方、\n"
                        + "相州小田原一色町をお過ぎなされて\n"
                        + "青物町を登りへおいでなさるれば、\n"
                        + "欄干橋虎屋藤衛門、\n"
                        + "只今は剃髪致して円斎と名乗りまする。\n");
 
        // res/drawable_mdpi ディレクトリに配置した
        // droid_image.png ファイルを背景画像に設定する
        view.setBackgroundResource(R.drawable.droid_image);
    }


文字列がもっと長い場合 画像3 文字列がもっと長い場合

 文字列をドロイド君のお腹の白い部分にだけ表示したいような場合は、Draw 9-patchを使って画像を調整するとよい。

ワク画像の作成

 Draw 9-patchにより、元の画像をAndroidアプリケーション用に調整し、ビューの飾りワクとして使用可能な画像を作成できる。

 Android SDKの「tools」ディレクトリに入っている「draw9patch.bat」を実行すると、Draw 9-patchツールが起動する。

 Draw 9-patchツールで調整したい画像を開くと、以下のような画面(画像4)になる。左側が作業用のウィンドウ、右側がプレビューウィンドウだ。

Draw 9-patchツールで画像を開いた様子 画像4 Draw 9-patchツールで画像を開いた様子

 Draw 9-patchツールの操作はシンプルだ。マウス操作で画像の周囲に黒い線を引くと、引いた線に合わせて画像が9つの領域に分割される(画像5)。

引いた線に合わせて画像が9つの領域に分割 画像5 引いた線に合わせて画像が9つの領域に分割

 作業ウィンドウの下にある[Show patches]にチェックを入れると、分割状況が分かりやすい。画像6のピンク色で表示されている領域にコンテンツが表示され、その他の領域はワクとして扱われる。

[Show patches]にチェックを入れると分割状況が分かりやすい 画像6 [Show patches]にチェックを入れると分割状況が分かりやすい

 領域の設定が終わったら、[File]メニューから画像を保存する。保存したファイルの拡張子は「*.9.png」となる。

ワク画像適用のサンプル

 作成したワク画像(*.9.png)ファイルは、通常の画像と同様にdrawableディレクトリに配置して、ビューの背景に設定できる。

 先のサンプルと全く同じ内容で、ドロイド君の画像をワク用画像(*.9.png)に入れ替えると、以下のように表示される。

ドロイド君の画像をワク用画像に入れ替えると 画像7 ドロイド君の画像をワク用画像(*.9.png)に入れ替えると

Android コーナー

Androidコーナー
「Android(アンドロイド)」の組み込み機器への適用からアプリ開発、レポート、ニュースなどさまざまな技術情報・最新動向をお届けする!!

>>コーナーTOPはこちらから


Copyright© 2017 ITmedia, Inc. All Rights Reserved.