空戯れ日記H

Download - Android くまタイマ 魔法使いのソリティア クロンダイク 計算 弱肉強食 MINE ROAD Punky Tank Garden Diary DungeonDiary メンタラリスメティック Shopping Note Shortcut Image Clover Widget シンプルタイマー
Download - iOS and Other くまタイマ for iOS 魔法使いのソリティア クロンダイク 計算 弱肉強食 MINE ROAD for iOS Punky Tank for iOS           NEET ROAD for Windows twitter
日記内の記事 くまタイマ for iOS   計算 弱肉強食 MINE ROAD Punky Tank Garden Diary DungeonDiary メンタラリスメティック Shopping Note Clover Widget

2011-08-15 (Mon)

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


※その2もあります→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>

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

f:id:windbell:20110816083252p:image

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


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


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

#RelativeLayoutを使わないで同じことをやっています

トラックバック - http://d.hatena.ne.jp/windbell/20110815