画面の左端からスワイプで引っ張り出せる「NavigationDrawer」を実装する必要があったのでこんな感じのレイアウトを XML で定義しました。
メイン画面のレイアウト XML
■ activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- メニュー --> <include android:id="@+id/drawer_menu" layout="@layout/drawer_menu"/> <!-- 表示するコンテンツ --> <RelativeLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="package.name.MainActivity"> <!-- コンテンツ --> </RelativeLayout> </android.support.v4.widget.DrawerLayout>
メニューのレイアウト XML
■ drawer_menu.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="left" android:background="#eee" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="24dp" android:text="@string/app_name" android:textAlignment="center" android:textSize="24sp" android:textStyle="bold"/> </LinearLayout>
この状態で早速実機に流し込んで起動してみましたが、引き出したメニューをスワイプしてもまったく反応せず、どこをタップしてもメニューが閉じてしまいました。
原因はメニューとコンテンツの位置が逆だったことでした。
DrawerLayout の直下には「コンテンツ」「メニュー」の順で配置しなければならず、その順番を逆にしていたため、どこをタップしてもコンテンツをタップしたことになってしまったようです。
（後に書いたものが先に書いたものの上に置かれるイメージですね）
DrawerLayout 配下のメニューはメニュー外のどこかをタップされると閉じる仕様となっているため、そんな挙動になっていました。
さらに、この状態ではメニューのクリックイベントが裏に隠れているはずのコンテンツにも発生してしまうため、下に置かれたボタンも反応してしまっていました。
これを解消するための clickable 属性もしれっと追加しておきます。
というわけで以下修正版です。
メイン画面のレイアウト XML （修正版）
■ activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 表示するコンテンツ --> <RelativeLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="package.name.MainActivity"> <!-- コンテンツ --> </RelativeLayout> <!-- メニュー --> <include android:id="@+id/drawer_menu" layout="@layout/drawer_menu"/> </android.support.v4.widget.DrawerLayout>
メニューのレイアウト XML （修正版）
■ drawer_menu.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="left" android:background="#eee" android:clickable="true" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="24dp" android:text="@string/app_name" android:textAlignment="center" android:textSize="24sp" android:textStyle="bold"/> </LinearLayout>
これで想定通り動くようになりました。
コメント