[Design support Library] NavigationViewについて

こんにちはKID.Aです。

今回もデザインサポートライブラリーのクラスの説明をしていこうと思います。
Design support Libraryはデザインのサポートライブラリーで素晴らしいコンポーネントがいくつもあります。
今回は「NavigationView」について説明していきます。
NavigationViewは22.2から追加されたコンポーネントでマテリアルデザインの原則に基づいたナビゲーションをデザインできます。

Navigation Viewは標準的なナビゲーションメニューを表示してくれるコンポーネントで
メニュー内容はメニューリソースファイルで作ることができます。
Navigation Viewは一般的にDrawerLayoutの内部に配置します。

・APIは以下の通りです。
http://developer.android.com/intl/ja/reference/android/support/design/widget/NavigationView.html

実装

実装は以下の通りです。

・build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

・MainActivity.java

package jp.co.navigationviewtest;

import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                int id = item.getItemId();
                if (id == R.id.item1) {
                } else if (id == R.id.item2) {
                } else if (id == R.id.item3) {
                }
                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                drawer.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }
}

・activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer"/>

</android.support.v4.widget.DrawerLayout>

・menu/drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/item1"
            android:icon="@mipmap/ic_launcher"
            android:title="Item1"/>
        <item
            android:id="@+id/item2"
            android:icon="@mipmap/ic_launcher"
            android:title="Item2"/>
    </group>

    <item android:title="Title">
        <menu>
            <item
                android:id="@+id/item3"
                android:icon="@mipmap/ic_launcher"
                android:title="Item3"/>
        </menu>
    </item>
</menu>

drawer.xmlのgroupのcheckableBehaviorを選択するとアイテムがチェックされます。表示されるアイテムはgroup配下のitemです。
またタイトルをつけたい場合は、itemタグの配下に、menuタグをつけます。

メニューの選択時のイベントの判定はNavigationView.setNavigationItemSelectedListenerで行います。
設定したリスナーに選択したアイテムのイベントが発火します。

実行

アプリを実行して左スワイプすると以下のナビゲーションが表示されます。

簡単にナビゲーションメニューをデザインすることができます。

以上です。

関連記事

[Design support Library] CoordinatorLayoutについて [Design support Library] TextInputLayoutについて [Design support Library] SwipeDismissBehaviorについて [Android 6.0] Voice Interaction APIのリクエストについて