１．文字を変える
「Hello World」という文字は、「res」の「values」の「strings.xml」にあります。こいつを変えれば文字が変わるはずです。
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">こんにちわ！</string>
<string name="app_name">サンプル０１</string>
</resources>
よし！確かに変わりました。この文字は、main.xmlでTextViewにセットされることで表示されています。つまり、こんな回りくどいことをしなくても、TextViewに直接書けばいいわけです。
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Android最高！"
/>
</LinearLayout>
よし！これでも文字が変わりました。こうすると、strings.xmlの中の文字は不要になりました。
２．文字のサイズを変える
文字が小さすぎるので、もっと大きくしてみます。これもTextViewを設定することでできます。次のコードのように１行付け足します。
main.xml
～ 省略 ～
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Android最高！"
android:textSize="64px"
/>
</LinearLayout>
よし！見やすくなりました。ちなみに、例ではサイズをpx単位で指定しましたが、sp単位なども使えます。
３．文字の色を変える
文字の色を変えてみます。これもTextViewに１行付け足すだけです。
main.xml
～ 省略 ～
android:text="Android最高！"
android:textSize="64px"
android:textColor="#990099ff"
/>
</LinearLayout>
よし！色が変わりました。"#990099ff"は、２桁の１６進数が４つで、前から、不透明度、赤色、緑色、青色です。例では、青緑のちょっと透明になっています。
４．文字の位置を変える
文字が左によっているので、真ん中に表示してみます。これもTextViewに１行を足すだけです。
main.xml
～ 省略 ～
android:text="Android最高！"
android:textSize="64px"
android:textColor="#990099ff"
android:gravity="center_horizontal"
/>
</LinearLayout>
よし！真ん中に表示されました。center_horizontal以外にも、top, bottom, left, rght, center, center_vertical, fullなどがあります。
５．TextViewを増やす
画面にTextViewを１つしか置いてはいけないというルールはありません。いっぱい並べることができます。試しに、同じものを２つ並べて見ます。色だけ、２つ目は黄色にして見ます。
main.xml
～ 省略 ～
<TextView
～ 省略 ～
/>
<TextView
～ 省略 ～
/>
</LinearLayout>
よし！２つ表示されました。TextViewは、だいたいこんな感じです。
６．結論
今回出てきた命令を並べておきます。
| 文字を表示する | android:text="文字" |
| 文字のサイズを変える | android:textSize="64px" |
| 文字の色を変える | android:textColor="#990099ff" |
| 文字の位置を変える | android:gravity="center_horizontal" |
「Hello World を改造する」のはずが、もう全然「Hello World」でなくなったような気もしますが、次は画像を表示してみます。
７．画像を用意する
androidアプリで使う画像は、「res」の「drawable」に入れます。
[ Sample01 ]
[ src ]
[ gen ]
[ Android 1.5 ]
[ assets ]
[ res ]
[drawable]
icon.png
image.gif
[layout]
[values]
AndroidManifest.xml
default.properties
proguard.cfg
これで、画像が用意できました。
８．画像を表示する
ImageViewを使います。TextViewと同じ感じです。main.xmlにImageViewを付け足します。
main.xml
～ 省略 ～
<TextView
～ 省略 ～
/>
<TextView
～ 省略 ～
/>
<ImageView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:src="@drawable/image"
/>
</LinearLayout>
よし！画像が表示されました。"fill_parent"指定なので、あまっている範囲でいっぱいに表示されたようです。画像の縦横比は変わらないようです。あまっている範囲が小さいので、画像自体がかなり小さくなりました。
９．画像と文字を重ねる
このままでは、画像が小さすぎるので、文字と画像を１列に表示せずに、重ねて表示してみます。このためには、「LinearLayout」を「RelativeLayout」に変更します。
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
～ 省略 ～
/>
<TextView
～ 省略 ～
/>
<ImageView
～ 省略 ～
/>
</RelativeLayout>
あれ？画像が上に表示されてしまいました。後にセットしたビューが上に表示されるようです。上下を変えて見ます。それと、２つのTextViewが完全に重なってしまっているので、ちょっとずらしてみます。
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
～ 省略 ～
/>
<TextView
～ 省略 ～
android:gravity="center"
/>
<TextView
～ 省略 ～
android:gravity="left"
/>
</RelativeLayout>
よし！画像の上に文字を表示できました。ここで、文字の半透明効果も現れています。
１０．結論
今回出てきた命令を並べておきます。
| 画像を表示する | ImageViewでandroid:src="@drawable/ファイル名" |
| 複数のビューを重ねる | RelativeLayoutを使う |
２回にわたって Hello World を改造することで、TextViewとImageViewの理解を深めました。実は、ゲーム開発ではこの２つのビューはあまり使わないのですが、こんな表示の仕方もあるんだっことを頭の片隅にでも置いておいたら、いつか役立つはずです。ウィジェットを作るときとか。
