Chapter07: 画像を中央表示する

さて、Sample02プロジェクトを開始します。
まだインポートをしていない方は、「Sample02プロジェクトを公開しました」より、Eclipseへのインポートをお願いします。 今回は、レイアウトの中央に画像を表示する方法です。 まぁこれも、ぴんとくる人はくると思いますが、RelativeLayoutのlayout_centerInParentを使います。 Chapter02で使っている、中央に文字を表示していたやつです。

では、サンプルを見てみましょう。
Sample02アプリを起動してください。
以下のような画面になります。

画像はネスカフェのバリスタです。
Androidで画像を扱う場合は、ImageViewを使います（ゲームなどでは、SurfaceView）。普段はImageViewを使うと思っていて大丈夫です。

コードレビュー

ではレイアウトのコードを見てみましょう。 Sample02プロジェクトの/res/layout/chapter07.xmlを開いてください。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- 
        layout_centerInParent=trueにしているので、
        画像が領域の中央に配置されます。
        ImageViewのscaleTypeをfitCenterにすることで、
        領域に合わせて自動でリサイズされます。
        scaleTypeは色々あるので、時間があれば他の値も試してみましょう。
        また、解像度の大きい画像を使うとメモリを消費しやすくてアプリが
        強制終了しやすくなります。
        なるべく画面の解像度に近いサイズにしましょう。
     -->
    <ImageView 
        android:src="@drawable/barista"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
    />
</RelativeLayout>

RelativeLayoutが親要素です。その子要素のImageViewに、layout_centerInParentを指定しています(20行目)。

21行目で、scaleTypeという指定を行っています。fitCenterにしておくと、大きな画像の場合、表示領域の大きさ(layout_width, layout_height)に自動的に縮小されます。このscaleTypeもまた色々種類があるのですが、ほぼfitCenterしか使わないんじゃないかと思うので説明は省略します。

22行目のadjustViewBoundsは、描画の縦横比を維持するかどうかです。ImageViewのlayout_width, layout_heightの値が画像の縦横比の影響を受けて変化する、という認識なのですが、違うかもしれません（汗。レイアウトを静的に作るときには、trueにしておけばいいと思っています。

 外部リンクになりますが、Android Wiki UIコンポーネント / ImageView を見たら参考になります。

 スマートフォンはメモリが少ないですし、アプリ毎にメモリ割り当て上限が決まっているので、サイズの大きな画像を読み込ませるとOut Of Memoryという例外が発生してアプリが落ちます。なるべく、端末の解像度に近い画像を準備するようにしましょう（マルチ解像度については別のところで取り上げるのでそれまで待っててください）。