Android のnavigationview

イメージ効果

実装方法

ライブラリーの参照

implementation 'com.android.support:design:28.0.0'

view構成の変更

DrawerLayoutはroot view
Toolbarは開くボタン
NavigationViewは開くメニュー部分

<android.support.v4.widget.DrawerLayout 
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:id="@+id/drawer_layout"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="#00ff00"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>


<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="320dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#FFFFFFFF"
    android:overScrollMode="never"
    app:headerLayout="@layout/navigation_header"
    app:menu="@menu/navigation_menu"
    />

NavigationViewの定義

NavigationViewはheaderLayout とmenu　２つの部分で構成されている。

headerLayoutは@layout/navigation_header
menuは@menu/navigation_menu　で参考する。

NavigationViewのタッチリスナー

    navigationView = (NavigationView) findViewById(R.id.navigation_view);
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            if(menuItem.isChecked())menuItem.setChecked(false);
            else menuItem.setChecked(true);

            drawerLayout.closeDrawers();
            switch (menuItem.getItemId()){
                case R.id.item_home:
                    Toast.makeText(getApplicationContext(),"ホーム",Toast.LENGTH_LONG).show();
                    break;
                case R.id.item_company:
                    Toast.makeText(getApplicationContext(),"会社について",Toast.LENGTH_LONG).show();
                    break;
                case R.id.item_help:
                    Toast.makeText(getApplicationContext(),"ヘルプ",Toast.LENGTH_LONG).show();
                    break;
                case R.id.item_others:
                    Toast.makeText(getApplicationContext(),"そのほか",Toast.LENGTH_LONG).show();
                    break;
                case R.id.item_qa:
                    Toast.makeText(getApplicationContext(),"お問い合わせ",Toast.LENGTH_LONG).show();
                    break;
                case R.id.item_vip:
                    Toast.makeText(getApplicationContext(),"会員",Toast.LENGTH_LONG).show();
                    break;
            }
            return false;
        }
    });

menuオブジェクトとheaderオブジェクトの取得

    navigationViewMenu = navigationView.getMenu();
    navigationViewHeaderView = navigationView.getHeaderView(0);

DrawerLayoutのリスナー設定

    toolbar = (Toolbar) findViewById(R.id.tool_bar);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
            this,
            drawerLayout,
            toolbar,
            R.string.open_draw,
            R.string.close_draw){
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
            L.d();
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            L.d();
        }
    };
    drawerLayout.addDrawerListener(actionBarDrawerToggle);

タッチ開くの設定

    actionBarDrawerToggle.syncState();

ソースコード