画面下部に固定配置

Posted by muchag | Android |
初回投稿:2011-04-09 (土) 22:37:19 | 最終更新:2012-01-09 (月) 15:28:35

スマートフォンを片手で操作する人が多い現状
画面下部にナビゲータなりメニューなりを配置することが多いと思う。

実際、各端末メーカーが提供するホーム画面も
画面下部にメニューを移動させた。(とどこかで読んだ)

【環境】
android-sdk_r08-windows
Android DDMS 8.0.1.v201012062107-82219
Android 開発ツール 8.0.1.v201012062107-82219
Android Hierarchy Viewer 8.0.1.v201012062107-82219
ターゲット:Android 1.6

画面上部にもタイトルなり情報なりを表すとすると
画面の基本レイアウトは

  • ヘッダ
  • 本文
  • フッタ

となってくる。

ところが、まんまレイアウトしても
このようになってしまう。

 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7.     <Button
  8.         android:text="Header"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="wrap_content"
  11.         />
  12.     <TextView
  13.         android:text="Content"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         />
  17.     <Button
  18.         android:text="Footer"
  19.         android:layout_width="fill_parent"
  20.         android:layout_height="wrap_content"
  21.         />
  22. </LinearLayout>

 

手法1:Gravity の利用

そこで私が最初に考えた手法は、
フッタに LinearLayout を採用し
Gravity を設定する手法。
もちろん、LinearLayout である必要はない。何でもOK。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7.     <Button
  8.         android:text="Header"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="wrap_content"
  11.         />
  12.     <TextView
  13.         android:text="Content"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         />
  17.  
  18.     <LinearLayout
  19.         android:gravity="bottom"
  20.         android:layout_width="fill_parent"
  21.         android:layout_height="fill_parent"
  22.         >
  23.         <Button
  24.             android:text="Footer"
  25.             android:layout_width="fill_parent"
  26.             android:layout_height="wrap_content"
  27.             />
  28.     </LinearLayout>
  29.  
  30. </LinearLayout>

 
ひゃっほい!
上手くできた♪

と思うも束の間。
本文が長くなると、フッタが画面から追い出されてしまう。

 

手法2:ScrollView の利用

仕方がないので、本文部分を ScrollView で囲んでみた。
が、何故か最下部にフッタがない。

どうやら仕様のようで
以下のサイトに解決策が載っていた。

public static void main:AndroidでScrollViewの下部にボタンなどを配置する方法
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7.     <Button
  8.         android:text="Header"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="wrap_content"
  11.         />
  12.    
  13.     <ScrollView
  14.         android:layout_width="fill_parent"
  15.         android:layout_height="fill_parent"
  16.         android:layout_weight="1"
  17.         >
  18.         <TextView
  19.             android:text="Content"
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="wrap_content"
  22.             />
  23.     </ScrollView>
  24.    
  25.     <Button
  26.         android:text="Footer"
  27.         android:layout_width="fill_parent"
  28.         android:layout_height="wrap_content"
  29.         />
  30.  
  31. </LinearLayout>

16行目 android:layout_weight=”1″ がポイント。
この属性は パーツの均等割り付け でも出てきたけど、今一つかめない。

ちなみに15行目の android:layout_height=”fill_parent” は wrap_content でも同じ結果になった。

同じく ScrollView を用いた手法で別のパターンもあった。
adakoda:[Android] ScrollViewのfillViewportの解説

本文が短いときでも思い通りのレイアウトになった。
wrap_content でもOK。

と書いてはいるが、このシンプルなサンプルでは上手くいったけど
本物の方では上手くいかなかった。

本物では Style を用いて XML ファイルを作成している。
あれこれゴチャゴチャしてミスの見落としがあるのかもしれないが
上手くいかないので、他も当たってみた。
 

手法3:RelativeLayout の利用

日本Androidの会:RelativeLayoutの中にScrollViewを入れる方法
上記ディスカッションに素敵な情報が♪
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     >
  6.     <Button
  7.         android:text="Header"
  8.         android:id="@+id/header"
  9.         android:layout_alignParentTop="true"
  10.         android:layout_width="fill_parent"
  11.         android:layout_height="wrap_content"
  12.         />
  13.    
  14.     <Button
  15.         android:text="Footer"
  16.         android:id="@+id/footer"
  17.         android:layout_alignParentBottom="true"
  18.         android:layout_width="fill_parent"
  19.         android:layout_height="wrap_content"
  20.         />
  21.    
  22.     <ScrollView
  23.         android:layout_below="@id/header"
  24.         android:layout_above="@id/footer"
  25.         android:layout_width="fill_parent"
  26.         android:layout_height="fill_parent"
  27.         >
  28.         <TextView
  29.             android:text="Content"
  30.             android:layout_width="wrap_content"
  31.             android:layout_height="wrap_content"
  32.             />
  33.     </ScrollView>
  34.  
  35. </RelativeLayout>

2行目、ラッパーを RelativeLayout にして
9行目、ヘッダに android:layout_alignParentTop=”true”
17行目、フッタに android:layout_alignParentBottom=”true”
本文 ScrollView に
23行目、android:layout_below=”@id/ヘッダ”
24行目、android:layout_above=”@id/フッタ”

これでバッチリOK!

上記ディスカッションでは

  • ヘッダ、フッタ、本文の順で記述すること(もしかすると取り違えているかも)
  • 23, 24行目の “@id/ヘッダ” は “@+id/ヘッダ” とする必要がないこと
  • 26行目、ScrollView の android:layout_height を fill_parent とすること

の3点が書いてあったが、

  • “@+id/ヘッダ” と記述してもOK
  • “@+id/ヘッダ” と記述すると、ヘッダ、本文、フッタの順で記述してもOK
  • 26行目、ScrollView の android:layout_height が wrap_content でもOK

という実験結果が出た。

Posted by muchag | Android |
初回投稿:2011-04-09 (土) 22:37:19 | 最終更新:2012-01-09 (月) 15:28:35

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment