Hello World を改造する (2/2)

~ android開発に親しむ(ImageView偏) ~

前へ   1  2  次へ
「Hello World」と表示するだけのandroidアプリをちょっとだけ改造してみます。前回は、TextViewをいじって文字を大きくしてリしましたが、今回は、もう1つのビューImageViewをいじってみます。文字通り画像を表示するためのものです。

7.画像を用意する

androidアプリで使う画像は、「res」の「drawable」に入れます。

[ Sample01 ]
    [ src ]
    [ gen ]
    [ Android 1.5 ]
    [ assets ]
    [ res ]
        [drawable]
            icon.png
            image.gif
        [layout]
        [values]
    AndroidManifest.xml
    default.properties
    proguard.cfg

これで、画像が用意できました。

8.画像を表示する

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>
画像とAndroid最高!

よし!画像が表示されました。"fill_parent"指定なので、あまっている範囲でいっぱいに表示されたようです。画像の縦横比は変わらないようです。あまっている範囲が小さいので、画像自体がかなり小さくなりました。

9.画像と文字を重ねる

このままでは、画像が小さすぎるので、文字と画像を1列に表示せずに、重ねて表示してみます。このためには、「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>
画像に重ねてAndroid最高!

あれ?画像が上に表示されてしまいました。後にセットしたビューが上に表示されるようです。上下を変えて見ます。それと、2つの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>
画像に重ねてAndroid最高!

よし!画像の上に文字を表示できました。ここで、文字の半透明効果も現れています。

10.結論

今回出てきた命令を並べておきます。

画像を表示するImageViewでandroid:src="@drawable/ファイル名"
複数のビューを重ねるRelativeLayoutを使う

2回にわたって Hello World を改造することで、TextViewとImageViewの理解を深めました。実は、ゲーム開発ではこの2つのビューはあまり使わないのですが、こんな表示の仕方もあるんだっことを頭の片隅にでも置いておいたら、いつか役立つはずです。ウィジェットを作るときとか。

前へ   1  2  次へ

次のセクション

Viewを使う