用途 | 便利 |
---|---|
カテゴリ | レイアウト |
レベル | 初級 |
動作確認環境 | Android 2.3.1(GingerBread) エミュレータにて動作確認 |
備考 | 今回のTipsは上記環境で動作確認・検証を行っています |
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)を設定してみる。
// TextView に背景画像を設定するサンプル void setImageToView( TextView view ){ // res/drawable_mdpi ディレクトリに配置した // droid_image.png ファイルを背景画像に設定する view.setBackgroundResource(R.drawable.droid_image); }
以下は、ドロイド君の画像の中(お腹の部分)に文字列を表示した様子だ(画像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); }
文字列をドロイド君のお腹の白い部分にだけ表示したいような場合は、Draw 9-patchを使って画像を調整するとよい。
Draw 9-patchにより、元の画像をAndroidアプリケーション用に調整し、ビューの飾りワクとして使用可能な画像を作成できる。
Android SDKの「tools」ディレクトリに入っている「draw9patch.bat」を実行すると、Draw 9-patchツールが起動する。
Draw 9-patchツールで調整したい画像を開くと、以下のような画面(画像4)になる。左側が作業用のウィンドウ、右側がプレビューウィンドウだ。
Draw 9-patchツールの操作はシンプルだ。マウス操作で画像の周囲に黒い線を引くと、引いた線に合わせて画像が9つの領域に分割される(画像5)。
作業ウィンドウの下にある[Show patches]にチェックを入れると、分割状況が分かりやすい。画像6のピンク色で表示されている領域にコンテンツが表示され、その他の領域はワクとして扱われる。
領域の設定が終わったら、[File]メニューから画像を保存する。保存したファイルの拡張子は「*.9.png」となる。
作成したワク画像(*.9.png)ファイルは、通常の画像と同様にdrawableディレクトリに配置して、ビューの背景に設定できる。
先のサンプルと全く同じ内容で、ドロイド君の画像をワク用画像(*.9.png)に入れ替えると、以下のように表示される。
Copyright © ITmedia, Inc. All Rights Reserved.