Android画面設計の基本

Androidの画面設計を行っていてつくづく感じることは、CSSに似ているなと言うことです。基本的に相対配置として、ブロックの組み合わせを上手に行うことでレイアウトを作り上げていくパターンです。WindowsアプリケーションをC#などで開発している場合には馴染みのないレイアウト方法でしょう。(もっとも、WPFに関してはこの限りではないですが…)

とりあえず、いろいろと試して調べたところヘッダ・コンテンツ・フッタの3部構成を基本的なレイアウトとして作成して、コンテンツ部分をいろいろと分けたりすることで良い感じのレイアウトが作成できることがわかりました。

image

上の図がサンプルとして作成したものですが、タイトルと記載のある黒い部分がヘッダ、EditTextとButtonのは位置されている赤い部分がコンテンツ、そしてボタンが配置されている白い部分がフッタというイメージです。

また、この場合はコンテンツ部分がスクロールするようになっているのでレイアウトがあふれた場合も画面の表示が切れることがなくなります。

このレイアウトですが、RelativeLayoutを使用して作成するとうまくできます。レイアウトを構成するレイアウトファイルは以下の通りです。

[sourcecode language="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" android:baselineAligned="true"> <!-- ヘッダ --> <LinearLayout android:id="@+id/header" android:layout_alignParentTop="true" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/tv_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="left" android:text="タイトル" /> </LinearLayout> <!-- フッター --> <LinearLayout android:id="@+id/fotter" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="#FFFFFF" android:layout_marginTop="3dp"> <Button android:text="ボタン左" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/btn_left"/> <Button android:text="ボタン右" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/btn_right"/> </LinearLayout>

&lt;!-- コンテンツ --&gt;
&lt;ScrollView
    android:layout_width=&quot;fill_parent&quot;
    android:layout_below=&quot;@+id/header&quot;
    android:layout_above=&quot;@+id/fotter&quot;
    android:background=&quot;#FF0000&quot;
    android:layout_height=&quot;wrap_content&quot;&gt;

    &lt;LinearLayout
        android:orientation=&quot;vertical&quot;
        android:layout_width=&quot;fill_parent&quot;
        android:layout_height=&quot;fill_parent&quot;
        android:baselineAligned=&quot;true&quot;&gt;

        &lt;LinearLayout
            android:layout_width=&quot;fill_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_margin=&quot;3dp&quot;&gt;
            &lt;EditText
                android:id=&quot;@+id/tv_1&quot;
                android:inputType=&quot;date&quot;
                android:layout_width=&quot;fill_parent&quot;
                android:text=&quot;2011/01/20&quot;
                android:layout_weight=&quot;1&quot;
                android:layout_height=&quot;fill_parent&quot; /&gt;
            &lt;Button
                android:id=&quot;@+id/btn_1&quot;
                android:text=&quot;ボタン&quot;
                android:layout_width=&quot;fill_parent&quot;
                android:layout_weight=&quot;2&quot;
                android:layout_height=&quot;fill_parent&quot;/&gt;
        &lt;/LinearLayout&gt;
    &lt;/LinearLayout&gt;
&lt;/ScrollView&gt;

</RelativeLayout> [/sourcecode]

コンテンツにあるEditTextとButtonはただ同じものを貼り付けてスクロールバーを表示するために使用しているだけです。通常同じ内容を繰り返し表示する場合ListViewを使用するでしょう。

Androidの場合、機種や縦・横など画面の見え方が画一的ではないのでできる限りスクロールバーなど内容を確認できる状態は確保した方がいいのかと思います。

もっとも、上手にすればコンテンツのサイズなどを動的に変更するなどの対応方法もあるのでしょうが今のところそこまではわからないのでスクロールバーが妥当なところかなと思います。