NavigationDrawer を利用してスライド型のメニューを作成する - Android

画面がスライドしてメニューが表示される動作を実装します。

注意と補足

Android4以降ではNavigationDrawerを用いた実装が推奨されています。

アプリケーション作成情報

• ProjectName : NavigationDrawerDemo
• ApplicationName : NavigationDrawerDemo
• PackageName : com.ipentec.NavigationDrawerDemo
• Activity : MainActivity
• Minimum Required SDK : 2.2

プロジェクト作成

Project Explorerのポップアップメニューで[New]メニューを選択し、[Project]メニューを選択します。下図のプロジェクト作成ダイアログが表示されます。[Android]カテゴリの[Android Application Project]を選択します。


[New Android Application]ダイアログが表示されます。Application Name等を設定します。設定後[Next]ボタンをお押します。


プロジェクトの設定画面が表示されます。今回はデフォルトのままとします。[Next]ボタンを押して次に進みます。


プロジェクトのアイコン設定画面が表示されます。こちらもデフォルトのままとします。[Next]ボタンを押します。


アクティビティの設定画面が表示されます。今回は"Blank Activity"を選択します。選択後[Next]ボタンを押します。


先の画面で選択した、BlankActivityの名称などを設定します。今回はデフォルトのままとしました。[Finish]ボタンをタップしてプロジェクトの作成を完了します。

Support Library の追加

プロジェクトにサポートライブラリを追加します。Project Explorer でプロジェクトのノードを選択し右クリックします。ポップアップメニューが表示されますので、[Android Tools]メニューの[Add Support Library]メニューを選択します。


[Choose Packages to Install]ダイアログが表示されます。 [Accept Licnese]ラジオボタンにチェックをし、[Install]ボタンを押します。


サポートライブラリのインストールが始まります。

レイアウトファイルの編集

プロジェクトノードを開き \res\layout ディレクトリ内のactivity_main.xmlを開きます。


レイアウトエディタの下部のタブの[activity_main.xml]タブを選択します。レイアウトデザイナ画面からXMLのコード画面に切り替わります。

コード

編集前のレイアウトXMLコードは下記の通りです。

編集前 Activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

上記のコードを下記に変更します。

編集後 Activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <!-- メイン画面 -->
 
    <LinearLayout
        android:id="@+id/left_draw"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"/>
 
    <!-- NavigationDrawer -->
 
    <LinearLayout
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#808080"
        android:orientation="vertical">
 
        <Button
            android:id="@+id/drawer_button1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="メニュー1" />
        <Button
            android:id="@+id/drawer_button2"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="メニュー2" />
        <Button
            android:id="@+id/drawer_button3"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="メニュー3" />
    </LinearLayout>
 
</android.support.v4.widget.DrawerLayout>

実行結果

プロジェクトを実行します。起動すると下図の画面が表示されます。


画面の左端で右側にスワイプするとメニューのパネルが現れます。


Navigator(メニュー)が表示されました。

色を変更した場合

    <LinearLayout
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#808080"
        android:orientation="vertical">

の部分の"android:background"を"#FFFFFF"に変更した場合の実行結果です。

起動時の画面は変わりありません。


画面の左端で右側にスワイプするとメニューのパネルが表示されます。白いパネルです。


Navigator(メニュー)が表示されました。

Android 2.3 端末の場合

Android 2.3の端末でも同じように動作します。