ListViewの下にボタンを配置したい、ただし両者は重ならないように

ANDROID


※その２もあります→http://d.hatena.ne.jp/windbell/20120701#p1


また嵌ったのでメモ。


画面にいっぱいに ListView を配置し、画面下部には常にボタンがあるようなレイアウトを作りたい場合、以下のようなやり方がある。

  • RelativeLayout の中に ListView と 下部に配置するボタン等を含む LinearLayout を配置
  • ListView の layout_height は fill_parent にする
  • LinearLayout の layout_height は wrap_content にし、layout_alignParentBottom="true" で常に下部に配置されるよう指定する

しかし、この方法だと、ListViewがまず画面いっぱいに配置され、その上に被さるように、ボタン等を含む LinearLayoutが配置される。


しかし、私は ListView と下部のボタンをどうしても重ねたくなかった。そこで、いろいろ試行錯誤していたら、以下のようにlayoutを記載することで、それが可能であることが判明した。

  • RelativeLayout の中に ListView と 下部に配置するボタン等を含む LinearLayout を配置。ただし、先に LinearLayout の方を記載する
  • LinearLayout の layout_height は wrap_content にし、layout_alignParentBottom="true" で常に下部に配置されるよう指定する
  • ListView の layout_height は 0dip とし（高さを明記しない）、layout_weight を 1にする（余った領域をListViewのエリアとする）。layout_alignParentTop="true" を設定し、画面上部に配置されるようにする。さらに 先に記述した LinearLayout の上部に配置するための layout_above を設定する

以下に実例を示す。

<?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"
    android:id="@+id/tab_list"
    android:orientation="vertical"
    >
    
    <!-- 最初に下部に置きたいボタンを含むレイアウトを配置 -->
    
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_control"
        android:layout_alignParentBottom="true"
        >
        <Button
            android:id="@+id/button_left"
            android:text="攻め" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical|center_horizontal"
            />
        <TextView 
            android:text="判定せよ！" 
            android:id="@+id/textView" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:layout_gravity="center_vertical|center_horizontal"
            android:padding="10dp"
            />
        <Button
            android:id="@+id/button_right"
            android:text="受け" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical|center_horizontal"
            />
    
    </LinearLayout>

    <!-- 次にその上部へ重ならないように ListViewを配置する -->

    <ListView 
        android:layout_height="0dip"
        android:id="@+id/listView" 
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_weight="1"
        android:layout_above="@id/bottom_control"
        />

</RelativeLayout>

実際の表示例は、以下となる。


※ボタンのキャプションおよびテキストは気にしないでください。


上記イメージは、実際の eclipse上でのプレビューのもの。青い枠は、選択状態の ListViewを示しているのだが、その領域が、下部の LinearLayoutの領域とかぶっていないことがわかると思う。


※その２もあります→ http://d.hatena.ne.jp/windbell/20120701#p1
＃RelativeLayoutを使わないで同じことをやっています