【Android】SlidingDrawerを使う

投稿者: | 2011年5月20日

SlidingDrawerはAndroidSDK1.5から使えるようになったユーザーインターフェースで
一つのハンドルと、画面外に隠れたUIの2つの部品で構成されている。
ハンドルをスライドすると、その先に隠れているUIを引き出すことができる。

以下はSlidingDrawerを使ったレイアウトxmlの例である。
分かりやすいようにするために各Viewには適当に背景色を付けておいた。

<?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"
    >
	<TextView
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="#ff006666"
         android:text="TextView" />
	<SlidingDrawer
	     android:id="@+id/drawer"
	     android:layout_width="fill_parent"
	     android:layout_height="wrap_content"
	     android:handle="@+id/handle"
	     android:content="@+id/content"
	     android:topOffset="200dp">

	     <TextView
	         android:id="@id/handle"
	         android:background="#FFcc0000"
	         android:text="SlidingDrawer Handle"
	         android:layout_width="88dp"
	         android:layout_height="44dp" />
	     <LinearLayout
	         android:id="@id/content"
	         android:layout_width="fill_parent"
	         android:layout_height="fill_parent" >
	         <TextView
	         	android:layout_width="fill_parent"
	         	android:layout_height="fill_parent"
	         	android:text="SlidingDrawer Content"
	         	android:background="#ff996600" />
	     </LinearLayout>

	 </SlidingDrawer>
</RelativeLayout>

注意が必要なのは、ハンドルと、隠れたUIのために2つのidをSlidingDrawerの宣言の中で前もって指定しておかなければ
いけないことである。上の例でそれをしているのは16行目と17行目である。
また、21行目ではTextViewをハンドルにするために先ほど16行目で宣言したidを指定し、27行目では
LinearLayoutを隠すUIとするため、17行目で宣言したidを指定している。
なお、これらはあくまで例であり、handleとcontentになるのはViewであれば何でもかまわない。

実行すると以下のようになる。

初期状態

UIを引き出した状態

※今回の例では18行目でtopOffsetを指定して画面の途中でUIの引き出しを止めるようにしてみた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です