Posted at

Android のnavigationview


イメージ効果

navigation_view.gif


実装方法


ライブラリーの参照

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 2つの部分で構成されている。

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();


ソースコード