AndroidのActionBarのNavigationView

ナビゲーションビューの例に入る前に、ナビゲーションビューについて知っておく必要があります。ナビゲーションビューは、HTMLのスライドメニューのようなものです。ナビゲーションビューはnavigatoinドロワーによって拡張されます。ナビゲーションビューのほとんどのユースケースは、さまざまなアクティビティをリダイレクトしたり、プロファイル情報を表示したりするために使用されます。

この例は、NavigationViewをActionBarに統合する方法を示しています

ステップ1 − Android Studioで新しいプロジェクトを作成し、[ファイル]⇒[新しいプロジェクト]に移動して、新しいプロジェクトを作成するために必要なすべての詳細を入力します。

ステップ2 −プロジェクトの作成中に、以下に示すようにナビゲーションドロワーアクティビティを選択する必要があります

ナビゲーションドロワーアクティビティを選択したら、[次へ]ボタンをクリックしてプロジェクトの作成を終了します。

ステップ3 −レイアウトフォルダのプロジェクト構造を開きます。 Android Studioは、以下に示すように異なるレイアウトを生成します

activity_main.xml −これはMainActivityレイアウトです。親レイアウトとしてドロワーレイアウトを作成し、子レイアウトには以下に示すナビゲーションビューが含まれます

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:id = "@+id/drawer_layout"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:fitsSystemWindows = "true"
   tools:openDrawer = "start">
   <include
      layout = "@layout/app_bar_main"
      android:layout_width = "match_parent"
      android:layout_height = "match_parent" />
   <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:headerLayout = "@layout/nav_header_main"
      app:menu = "@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

ナビゲーションビューには、ヘッダーレイアウトとメニューレイアウトの2つのレイアウトが含まれています。ヘッダーレイアウトにはnavigationviewのヘッダーに関する情報が含まれ、メニューレイアウトにはメニューリストに関する情報が含まれます。

app_bar_main.xml −通常のレイアウトと同じレイアウトファイルです。ただし、アプリバーのレイアウト（アクションバー）、中央のレイアウトに関する情報が含まれています。

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity">
   <android.support.design.widget.AppBarLayout
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:theme = "@style/AppTheme.AppBarOverlay">
   <android.support.v7.widget.Toolbar
      android:id = "@+id/toolbar"
      android:layout_width = "match_parent"
      android:layout_height = "?attr/actionBarSize"
      android:background = "?attr/colorPrimary"
      app:popupTheme = "@style/AppTheme.PopupOverlay" />
   </android.support.design.widget.AppBarLayout>
   <include layout = "@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

上記のレイアウトには、content_mainレイアウトが含まれています。以下に示すように、ユーザーが独自のビューをカスタマイズできるメインレイアウトです

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   app:layout_behavior = "@string/appbar_scrolling_view_behavior"
   tools:context = ".MainActivity"
   tools:showIn = "@layout/app_bar_main">
   <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" />
</android.support.constraint.ConstraintLayout>

nav_header_main −これはナビゲーションヘッダービューであり、ナビゲーションヘッダーに関する情報が含まれています。以下に示すようにナビゲーションヘッダーをカスタマイズしました

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   android:layout_width = "match_parent"
   android:layout_height = "@dimen/nav_header_height"
   android:background = "@drawable/side_nav_bar"
   android:gravity = "bottom"
   android:orientation = "vertical"
   android:paddingLeft = "@dimen/activity_horizontal_margin"
   android:paddingTop = "@dimen/activity_vertical_margin"
   android:paddingRight = "@dimen/activity_horizontal_margin"
   android:paddingBottom = "@dimen/activity_vertical_margin"
   android:theme = "@style/ThemeOverlay.AppCompat.Dark">
   <ImageView
      android:id = "@+id/imageView"
      android:layout_width = "wrap_content"
      android:layout_height = "100dp"
      android:contentDescription = "@string/nav_header_desc"
      android:paddingTop = "@dimen/nav_header_vertical_spacing"
      app:srcCompat = "@drawable/logo" />
   <TextView
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:paddingTop = "@dimen/nav_header_vertical_spacing"
      android:textColor = "#FFF"
      android:textStyle = "bold"
      android:text = "Tutorials Point"
      android:textAppearance = "@style/TextAppearance.AppCompat.Body1" />
   <TextView
      android:id = "@+id/textView"
      android:textColor = "#FFF"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:text = "Father of all educational website" />
</LinearLayout>

注 −ドローアブル/ロゴを追加しました。アプリケーションの開発中に、独自のロゴを追加してください。

activity_main_drawer −以下に示すように、menu/activity_main_drawer.xmlで利用できるメニューレイアウトです

<?xml version = "1.0" encoding = "utf-8"?>
<menu xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:tools = "https://schemas.android.com/tools"
   tools:showIn = "navigation_view">
   <group android:checkableBehavior = "single">
      <item
         android:id = "@+id/nav_camera"
         android:icon = "@drawable/ic_menu_camera"
         android:title = "Import" />
      <item
         android:id = "@+id/nav_gallery"
         android:icon = "@drawable/ic_menu_gallery"
         android:title = "Gallery" />
      <item
         android:id = "@+id/nav_slideshow"
         android:icon = "@drawable/ic_menu_slideshow"
         android:title = "Slideshow" />
      <item
         android:id = "@+id/nav_manage"
         android:icon = "@drawable/ic_menu_manage"
         android:title = "Tools" />
   </group>
   <item android:title = "Communicate">
      <menu>
         <item
            android:id = "@+id/nav_share"
            android:icon = "@drawable/ic_menu_share"
            android:title = "Share" />
         <item
            android:id = "@+id/nav_send"
            android:icon = "@drawable/ic_menu_send"
            android:title = "Send" />
      </menu>
   </item>
</menu>

ステップ4 −次のコードをsrc / MainActivity.java

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);
      DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
      ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
      this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
      drawer.addDrawerListener(toggle);
      toggle.syncState();
      NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
      navigationView.setNavigationItemSelectedListener(this);
   }
   @Override
   public void onBackPressed() {
      DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
      if (drawer.isDrawerOpen(GravityCompat.START)) {
         drawer.closeDrawer(GravityCompat.START);
      } else {
         super.onBackPressed();
      }
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      int id = item.getItemId();
      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
         return true;
      }
      return super.onOptionsItemSelected(item);
   }
   @SuppressWarnings("StatementWithEmptyBody")
   @Override
   public boolean onNavigationItemSelected(MenuItem item) {
      // Handle navigation view item clicks here.
      int id = item.getItemId();
      if (id == R.id.nav_camera) {
         // Handle the camera action
      } else if (id == R.id.nav_gallery) {
      } else if (id == R.id.nav_slideshow) {
      } else if (id == R.id.nav_manage) {
      } else if (id == R.id.nav_share) {
      } else if (id == R.id.nav_send) {
      }
      DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
      drawer.closeDrawer(GravityCompat.START);
      return true;
   }
}

ナビゲーションビューを閉じるには、以下に示すようにドロワーを閉じる必要があります

if (drawer.isDrawerOpen(GravityCompat.START)) {
   drawer.closeDrawer(GravityCompat.START);
}

ナビゲーションビューの位置を変更するには、次のコードを使用します

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.END);

アプリケーションを実行してみましょう。実際のAndroidモバイルデバイスをコンピューターに接続していると思います。 android studioからアプリを実行するには、プロジェクトのアクティビティファイルの1つを開き、ツールバーの[実行]アイコンをクリックします。オプションとしてモバイルデバイスを選択し、デフォルトの画面を表示するモバイルデバイスを確認します