今日は NavigationView の使用について見ていきましょう。NavigationView は標準のナビゲーションメニューで、そのメニュー内容はメニューリソースファイルによって充填されます。NavigationView は一般的に DrawerLayout と組み合わせて使用され、抽斗メニューを構成し、内容ページとメニューページから成り立っています。主な内容は以下の通りです：
- 基本レイアウト
- よく使う属性
- テキスト選択効果
- アイコンとテキストの間隔
- ケーススタディ
- 表示効果
基本レイアウト#
DrawerLayout をルートレイアウトとして直接使用できます。その中には内容レイアウトとメニューレイアウトが順に配置されます。内容レイアウトは必ずメニューレイアウトの前にあることを忘れないでください。メニューが引き出されるときは、必ず内容レイアウトの上に表示される必要があります。もし順序が逆になると、メニューアイテムのクリックイベントやメニューのスライド隠蔽に影響を与えます。もちろん、ToolBar などがある場合は、必要に応じて内容レイアウトに追加することもできますし、DrawerLayout の外に配置することもできます。唯一の違いは、サイドメニューが ToolBar を遮るかどうかです。基本的な使用例は以下の通りです：
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--内容 -->
<!--メニュー-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
よく使う属性#
以下は NavigationView のよく使う属性です。具体的には以下の通りです：
<!--メニューのポップアップ方向-->
android:layout_gravity="start"
<!--メニューアイコンのレンダリング色-->
app:itemIconTint="@color/colorPrimary"
<!--メニュー文字の色-->
app:itemTextColor="@color/colorNormal"
<!--メニューアイテムの背景色（グループ間に間隔あり）-->
app:itemBackground="@color/colorBackground"
<!--メニューアイテム-->
app:menu="@menu/menu_navigation_view"
<!--NavigationView のヘッダー レイアウト-->
app:headerLayout="@layout/head_navigation_layout"
テキスト選択効果#
デザイナーが気を使う場合、クリック時の色や押下時の色、または特定の効果を教えてくれることがあります。この場合、メニューアイテムのテキスト選択効果を設定する必要があります。ここでは、color リソースファイルの形式でテキスト選択効果を実現することにします。color リソースファイルの定義は以下の通りです：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--押下-->
<item android:color="@color/colorPress" android:state_pressed="true"/>
<!--選択中-->
<item android:color="@color/colorCheck" android:state_checked="true"/>
<!--デフォルト-->
<item android:color="@color/colorNormal"/>
</selector>
次に、NavigationView の itemTextColor 属性を設定するだけです。具体的には以下の通りです：
<!--メニューアイテムの色を設定-->
app:itemTextColor="@color/select_color_navigation"
もちろん、コード内で設定することもできます。具体的には以下の通りです：
//メニューアイテムの色を設定
ColorStateList colorStateList = getResources().getColorStateList(R.color.select_color_navigation);
navigationView.setItemTextColor(colorStateList);
次に、NavigationView メニューアイテムの選択イベントリスナーを設定します。具体的には以下の通りです：
navigationView.setNavigationItemSelectedListener(this);
最後に、クリックが完了したら、そのメニューアイテムが選択されたことを設定します。具体的には以下の通りです：
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.menu1:
Toast.makeText(this,"menu1",Toast.LENGTH_SHORT).show();
break;
//...
}
//メニューアイテムを選択状態に設定
item.setCheckable(true);
//Drawerを閉じる
// navDrawLayout.closeDrawers();
return true;
}
アイコンとテキストの間隔#
NavigationView を使用した後、メニューアイコンとメニュー文字の間に一定の間隔があることに気付きました。見た目が少し広く、強迫観念的に少し修正する必要があります。以前に FloatingActionButton のサイズを変更した経験に基づいて、ソースコードを調べてこの間隔を設定している場所を見つけました。NavigationView のソースコードを確認し、最終的に NavigationMenuPresenter の関連する dimen 値を見つけました。その後、Navigation に関連するいくつかの dimen 値を見つけました。具体的には以下の通りです：
public static final int design_navigation_elevation = 0x7f060064;
public static final int design_navigation_icon_padding = 0x7f060065;
public static final int design_navigation_icon_size = 0x7f060066;
public static final int design_navigation_max_width = 0x7f060067;
public static final int design_navigation_padding_bottom = 0x7f060068;
public static final int design_navigation_separator_vertical_padding = 0x7f060069;
この時、プロジェクトの dimens フォルダーに同じ名前の値を作成して上書きするだけです。ここでは、メニューアイコンとテキストの間隔を変更するため、次のように設定します：
<!--NavigationView メニューアイコンとテキストの間隔を変更-->
<dimen name="design_navigation_icon_padding" tools:override="true">10dp</dimen>
他の関連する dimen 値については一つ一つ説明しませんが、これでメニューアイコンとテキストの間隔が変更されました。
ケーススタディ#
以下は、NavigationView と DrawerLayout を組み合わせた使用例です。レイアウトは以下の通りです：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--ToolBar-->
<android.support.v7.widget.Toolbar
android:id="@+id/navToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/navDrawLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/app_name"
android:textSize="18sp" />
</LinearLayout>
<!--メニュー-->
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/head_navigation_layout"
app:itemIconTint="@color/colorPrimary"
app:itemTextColor="@color/select_color_navigation"
app:menu="@menu/menu_navigation_view" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
表示効果#
以下は表示効果です。下の図の通りです：
NavigationView の紹介はここで終了です。